CODEWITHSUNDEEP
javascriptreact-nativemapsmapbox-gl-js
anie
anie

Reputation: 519

Get current coords with react native mapbox using function components

I am using react native with mapbox library and i am doing the following to get the current location on map for the user:

   <MapboxGL.MapView          
          surfaceView={true}
          zoomLevel={15}
          logoEnabled={false}
          style={styles.matchParent}>

           <MapboxGL.UserLocation
                visible={true}
                onUpdate={() => onUserLocationUpdate()}
            />

            <MapboxGL.Camera
                followZoomLevel={17} //followUserLocation
                followUserMode={'normal'}
                followUserLocation={true}
                followZoomLevel={17}
                animationDuration={1000}
            />


     </MapboxGL.MapView>

based on the docs is that the prop onUpdate is triggered on location update with current coords, so once triggered i am calling onUserLocationUpdate() which do the following:

const onUserLocationUpdate = async (location) => {
        //console.log(location)
        let lat = location.coords.latitude;
        let long = location.coords.longitude;
        let alt = location.coords.altitude;
        setlatitude(lat)
        setlongitude(long)
        setaltitude(alt)
}

However, I am getting this error:

ERROR TypeError: undefined is not an object (evaluating 'location.coords')

I am using react native function components, however, I have followed this example here which is using class components and it worked for me but when I convert to function components I got the error

Upvotes: 0

Views: 1548

Answers (1)

AdriSolid
AdriSolid

Reputation: 2825

That's a JS thing, not related with Mapbox. Try passing the location argument to your function like:

onUpdate={(location) => onUserLocationUpdate(location)}

Or even better:

onUpdate={onUserLocationUpdate}

Upvotes: 1

Related Questions