CODEWITHSUNDEEP
javascriptreact-nativenpmreact-reduxexpo
khalil hajri
khalil hajri

Reputation: 35

Invalid hook call. Hooks can only be called inside of the body of a function component (react-native)

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

I'm trying to implement the location permission in react native (I'm using expo CLI)

this is the function that I already created :

function OfferScreen({ navigation}: {navigation:any}) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);
  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });


      //GEOLOCATION TEST
      //STATE FOR GEOLOCATION
  const [location, setLocation] = useState < any | null > (null);
  const [hasPermission, setHasPermission] = useState < any | null > (null);
    useEffect(() => {
      (async () => {
          const {status} = await Location.requestForegroundPermissionsAsync();
          setHasPermission(status === "granted");
          let location = await Location.getCurrentPositionAsync({});
      })();
  }, []);
}
export default OfferScreen;

and this is the target function in my tab bar

<Tab.Screen //TABSCREEN OFFER
                options={
                    {headerShown: false}
                }
                name={"Offres"}
                component={Offers}/>

and by the way when I remove the location permission code works fine.

Upvotes: 0

Views: 939

Answers (1)

Satya S
Satya S

Reputation: 238

You can't have useState() inside of an React.useEffect(). Move these statements to the top and outside of the useEffect

function OfferScreen({ navigation }: { navigation: any }) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);

  //GEOLOCATION TEST
  //STATE FOR GEOLOCATION
  const [location, setLocation] = (useState < any) | (null > null);
  const [hasPermission, setHasPermission] = (useState < any) | (null > null);

  React.useEffect(() => {
    if (!loading && data) {
      (async () => {
        const { status } = await Location.requestForegroundPermissionsAsync();
        setHasPermission(status === "granted");
        let location = await Location.getCurrentPositionAsync({});
      })();
    }
  }, [data, loading]);

  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });
  }, []);
}

export default OfferScreen;

Upvotes: 1

Related Questions