Current Location in react-native-maps

user_4999323 0
Viewed 5898

I was trying get the current location using react-native-maps. This is my following code :

import MapView from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const [position, setPosition] = useState({
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
});

useEffect(() => {
    Geolocation.getCurrentPosition(success, error, options);
}, []);

var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };
      
function success(pos) {

 var crd = pos.coords;

 setPosition({
   latitude: crd.latitude,
   longitude: crd.longitude,
   latitudeDelta: 0.0421,
   longitudeDelta: 0.0421,
 });
}

function error(err) {
   console.warn(`ERROR(${err.code}): ${err.message}`);
}

return (

<MapView
    style={styles.map}
    initialRegion={position}
    showsUserLocation={true}
>
</MapView>

Now if I remove the property initialRegion, the map is working perfectly fine. But with the above code, I am getting a white screen without any error.

enter image description here

Any help will be appreciated.

react-native-maps react-native geolocation google-maps
1 Answers

I think the problem with your code is that getCurrentPosition is failing and since your initial coordinates inside position are very zoomed in, it looks like it isn't showing anything.

Also make sure the google maps API is enabled and react-native-maps is configured correctly.

Here is how I got it working:

import React, {useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import MapView from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const App = () => {
  const [position, setPosition] = useState({
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
  });

  useEffect(() => {
    Geolocation.getCurrentPosition((pos) => {
      const crd = pos.coords;
      setPosition({
        latitude: crd.latitude,
        longitude: crd.longitude,
        latitudeDelta: 0.0421,
        longitudeDelta: 0.0421,
      });
    }).catch((err) => {
      console.log(err);
    });
  }, []);

  return (
    <MapView
      style={styles.map}
      initialRegion={position}
      showsUserLocation={true}
    />
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;
user_90983500
Related