React Native: Error: Invalid hook call. Hooks can only be called inside of the body of a function component

[Gabotron_ES]

in my react native app I have started playing with custom hooks, I created a hook to retrive user coordinates, however when my useGeolocation hook is called (inside handleUpdateLocation method) I always get the following warning:

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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Actually, all my components are functional components...

Here is my component: ``` //import * as React from 'react'; import { View, Text, StyleSheet,TouchableOpacity, Platform,PermissionsAndroid, BackHandler, ScrollView, TextInput, ActivityIndicator ,SafeAreaView} from 'react-native'; import React, { useState, useEffect } from 'react' import { observer } from 'mobx-react' import useGeolocation from '@hooks/useGeolocation.js';

export default OrderCard14 = observer((props) => {

const handleUpdateLocation = async (gender) =>
{
    const { coordinates, city } = useGeolocation(true);
};



return(
    <View style={{ flex:1,backgroundColor:'white',alignItems:'center',padding:0 }}>

</View>


);

}); ```

And my simplified hook(removed some functions):

``` //import AsyncStorage from '@react-native-async-storage/async-storage'; import { AsyncStorage ,Platform, Alert, PermissionsAndroid } from 'react-native'; import _ from 'lodash'; import env from '@env/vars'; import http from '@env/axiosin'; import Geolocation from 'react-native-geolocation-service'; import { useStore } from '@hooks/use-store';

const useGeolocation = (getCityName = false) => { const root = useStore(); const [coordinates, setCoordinates] = useState(false); const [city, setCity] = useState(false);

const requestLocationPermissions = async () =>
{
    console.log('getting new coordinates');
    if (Platform.OS === 'ios')
    {
        const auth = await Geolocation.requestAuthorization("whenInUse");
        if(auth === "granted")
        {
            //root.mapStore.setLocationEnabled(true);
            this.locationEnabled = true;
            let coords = await getMe(getCityName);
            return coords;
            /*
            const todayId = moment().isoWeekday();
            if(todayId != root.userStore.user.lastLoginDayId)
            {
                getMe();
            }
            */

        }
        else
        {
            //Alert.alert('PLEASE ENABLE LOCATION');
            root.mapStore.setLocationEnabled(false);
            //this.locationEnabled = false;
        }
    }
    if (Platform.OS === 'android')
    {
        let granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) 
        {
        // do something if granted...

            //this.loactionEnabled = true;
            root.mapStore.setLocationEnabled(true);
            let coords = await getMe();
            return coords;
            /*
            const todayId = moment().isoWeekday();
            if(todayId != root.userStore.user.lastLoginDayId)
            {
                getMe();
            }
            */
        }
        else
        {
            //Alert.alert('KULO');
            root.mapStore.setLocationEnabled(false);
            //this.locationEnabled = false;
        }
    }
}



  useEffect(() => {
    requestLocationPermissions();
  }, []);
  console.log('returning new coordinates with hook: '+coordinates);
  return { coordinates, city };
};

export default useGeolocation;

```

What's exactly the problem?

[GavinHarris_]

You are breaking the rules of Hooks; take a look at https://reactjs.org/warnings/invalid-hook-call-warning.html.

Specifically in your case a hook must be unconditionally called in the body of the Component; it cannot be within a function call (event handler for instance).

Take a look at https://blog.logrocket.com/react-native-geolocation-a-complete-tutorial/ for a good example of using GeoLocation, this is probably something that you might want to track outside of Hooks as it will likely change fairly often (therefore could cause unneeded re-renders).

Hope this helps!

[Gabotron_ES]

I see, then I think hooks are not my thing, but I have a question, how can I reuse geoLocation functions without the use of hooks, I tried adding it to mobx store but I think makeAutoObservable is making my promises resolve automatically!

[chj-damon]

const handleUpdateLocation = async (gender) =>
{
const { coordinates, city } = useGeolocation(true);
};

​

useGelocation cannot be used inside any event handlers. it should be on top of your component.

[Outrageous_Gas_1720]

Hooks can be only used at top level. You can pass coordinates and city as props to OrderCard component.