Map View With Pin Point Accuracy in React Native & Expo Apps

Google Maps For Android & iOS Apps

Google Map in react native & expo apps

Hey! My name is Rohit. I’m not a professional content writer, but I will do my best to ensure that by the end of this article, you will be able to add the Map View feature to your React Native and Expo applications.

Remember that, If you are testing this application with the Expo Go Mobile app, no additional setup is required. But If you are planning to deploy on any app store, you must use the Google Cloud API.

In this video, I will test the application on Expo Go Application with Pin Point Accuracy.

I recommend that you watch the step-by-step tutorial here:

Project setup, Package Requirements, and Code

• Start your expo project
• Install the required npm package for this project:

npx expo install expo-location
npx expo install react-native-maps

• First, I am setting the default map region using the useState hook. Later we are going to change it with the user’s current location. The default map region is:

const [mapRegion, setMapRegion] = useState({
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });

• Next, add the ‘userLocation’ function, Inside this function, first, we will fetch the user’s current location, then we will replace it with the map region state. Something like this:

const userLocation = async () => {
    let {status} = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
    }
    let location = await Location.getCurrentPositionAsync({enableHighAccuracy: true});
    setMapRegion({
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    });
    console.log(location.coords.latitude, location.coords.longitude);
  }

• Console log the coordinate to check that the function is working fine.
• At last, pass this userLocation to a useEffect hook. By doing this, the application will remember the state change.

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

• That’s it. Now, add the UI according to your project requirement. If you need help then you can check this.
• If you are confused or lost, I would recommend watching a step-by-step video tutorial. Few minutes of setup and code, you will be ready to test the application.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.