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
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