react native map show user location expo

How to Show User Location on a Map in React Native using Expo?#

If you are building a location-based mobile application, it is important to display the user's current location on a map. React Native provides an easy way to integrate maps into your application using the Expo platform. In this post, we will show you how to display the user's location on a map using React Native and Expo.

Step 1: Installation#

Before we start coding, we need to install the necessary dependencies. Let's open up the terminal and navigate to our project directory. Then, we will install the following packages:

  npm install react-native-maps expo-location

Step 2: Importing Libraries#

We need to import the necessary libraries before we can start coding. Open up your App.js file and add the following imports:

  import React, { useState, useEffect } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import MapView, { Marker } from 'react-native-maps';
  import * as Location from 'expo-location';

Step 3: Getting User Location#

Next, we need to get the user's current location using the Location API provided by Expo. We can use the useState and useEffect hooks to store and update the user's location in our component. Add the following code to your App.js file:

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

The above code will request permission to access the user's location and then get the current position of the user. We are using the async/await syntax to make asynchronous API calls.

Step 4: Displaying the Map#

Now that we have the user's location, we can display the map using the MapView component provided by react-native-maps. Add the following code to your App.js file:

  return (
    
      {location && (
        
          
        
      )}
    
  );

The above code will render a map with a Marker at the user's current location. We are using the latitude and longitude values obtained from the user's location to center the map on their current position.

Step 5: Styling the Map#

We can also style the map to customize its appearance. Add the following code to your App.js file:

  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
  });

The above code will make the map take up the entire screen by setting its flex property to 1. We can also customize the color and size of the Marker using the style prop.

Alternative Method#

If you prefer using the Expo MapView component instead of react-native-maps, you can follow these steps:

Step 1:

Install the following dependency:

  expo install expo-location expo-mapview

Step 2:

Import the necessary libraries:

  import { MapView } from 'expo-mapview';
  import * as Location from 'expo-location';

Step 3:

Get the user's location:

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

Step 4:

Display the map:

  return (
    
      {location && (
        
          
        
      )}
    
  );

The above code will display the user's location on a map using the Expo MapView component.