How do I access coords in react-native-maps?

Question

I am trying to use the current location of the user in my react native app by using the 'coords' prop from react-native-maps.

The problem is that when I try to console.log currentLocation.coords I get the error:

TypeError: null is not an object (evaluating 'currentLocation.coords')

But when when I console.log currentLocation I can see the coords props in the response.

Object {
  "coords": Object {
    "accuracy": 5,
    "altitude": 5,
    "altitudeAccuracy": 5,
    "heading": 0,
    "latitude": 13.184791,
    "longtitude": 55.735991,
    "speed": 0,
  },
  "timestamp": 1000000,
}

const locationReducer = (state, action) => {
    switch (action.type) {
        case 'add_current_location':
            return { ...state, currentLocation: action.payload }
        default:
            return state;
    }
};

const startRecording = dispatch => () => {};
const stopRecording = dispatch => () => {};
const addLocation = dispatch => (location) => {
    dispatch({ type: 'add_current_location', payload: location })
};

export const { Context, Provider } = createDataContext(
    locationReducer,
   { startRecording, stopRecording, addLocation },
   { recording: false, locations: [], currentLocation: null }
);

const Map = () => {
    const { state: { currentLocation } } = useContext(LocationContext);

    console.log(currentLocation.coords);

    if (!currentLocation) {
        return <ActivityIndicator size="large" style={{ marginTop: 200 }} />;
    };

    return (
        <MapView
            style={styles.map}
            initialRegion={{
                ...currentLocation.coords,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            }}
        >
        </MapView>
    );
};

const TrackCreateScreen = () => {
    const { addLocation } = useContext(LocationContext);
    const [err, setErr] = useState(null);

    const startWatching = async () => {
        try {
            await requestPermissionsAsync();
            await watchPositionAsync({
                accuracy: Accuracy.BestForNavigation,
                timeInterval: 1000,
                distanceInterval: 10
            }, (location) => {
                addLocation(location);
            });
        } catch (e) {
            setErr(e);
        }
    };

useEffect(() => {
    startWatching();
}, []);

How can I access the coords? (I need to use the longitude and latitude)

Rajan Rajan · Accepted Answer · 2019-11-15T19:38:38

I have used 'react-native-location' for getting the user's current location. In subscribeToLocationUpdates, I am fetching the latitude and longitude as follow.

 let requestBody = await getPlaceNameFromLocation(locations[0].latitude, locations[0].longitude)

As you can see I am geting locations array that might be issue in your case. Please check. As array is also object.

How do I access coords in react-native-maps?

1 Answers