Search code examples
javascriptgoogle-mapsreact-nativenavigatorreact-native-maps

TypeError: undefined is not an object( evaluating 'navigator.geolocation.getCurrentPosition')


I have recently started working on react-native, now am trying to access react-native-maps for the reason wherever I click on the map it should give me the coordinates. I installed react-native-map and tried to use below method

navigator.geolocation.getCurrentPosition((position) => {

I am getting below error.

E | ReactNativeJS ▶︎ TypeError: undefined is not an object (evaluating 'navigator.geolocation.getCurrentPosition')
                             │ 
                             │ This error is located at:
                             │ in App (at renderApplication.js:40)
                             │ in RCTView (at View.js:35)
                             │ in View (at AppContainer.js:98)
                             │ in RCTView (at View.js:35)
                             │ in View (at AppContainer.js:115)
                             └ in AppContainer (at renderApplication.js:39)

My code looks similar like this.

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }

      this.setState({initialPosition: initialRegion})
    },
    (error) => alert(JSON.stringify(error)),
    {enableHighAccuracy: true, timeout: 20000});
  }

Also I tried with some other methods like

this.watchID = navigator.geolocation.watchPosition((position) => {

and

navigator.geolocation.clearWatch(this.watchID);

How can I solve this problem and make these methods work from react-native-maps

I am using import MapView from 'react-native-maps'; this import


Solution

  • I'm not sure if this is the answer that you are looking for, but if you don't have any problem in using this react-native-geolocation library from react-native-community, you can easily follow its great example. Please don't forget to add permission in AndroidManifest.xml file like this -

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    

    You also need to add the meta-data in the manifest file -

     <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/>
    

    You can easily generate the API key using Google API console