How do I add permissions for react-native-maps for showUserLocation in MapView component in expo?

Question

I am a little knew the react native, and I am not so familiar with react native permissions with expo. This is my code for the MapView component.

import MapView, { Marker, Callout } from 'react-native-maps';
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Modal, Button } from 'react-native';

import * as Location from 'expo-location';


export default function Map(props) {
  let handler = props.handler;
  let show = props.show;
  const [location, setLocation] = useState({coords: {longitude: 0, latitude: 0}});
  const [errorMsg, setErrorMsg] = 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);
    })();
  });

  let text = "wating...";
  if (errorMsg) {
    text = errorMsg;
  }

  return (
    <Modal animationType = 'slide' transparent = {true} visible = {show}>
      <View style={styles.container}>
        <Button title = 'CLOSE' color = 'white' onPress = {handler}/>
        <MapView 
          showUserLocation = {true}
          style={styles.map} 
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          
          <Marker coordinate = {{latitude: location.coords.latitude,
            longitude: location.coords.longitude}} pinColor = 'black'>
              <Callout>
                <Text>Im here</Text> 
              </Callout>
          </Marker>
        </MapView>
      </View>
    </Modal>
  );
}


const styles = StyleSheet.create({
  container: {
    height: '80%',
    margin: 10,
    marginTop: '30%',
    padding: 10, 
    paddingTop: 0,
    backgroundColor: '#2997FF',
    borderRadius: 10,
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  map: {
    width: '100%',
    height: '92%',
  },
  paragraph: {
    margin: 50
  }
}); 

I can't find a clear answer on how to add permissions even after checking the docs and a lot of videos. This module seems to work well with react native cli.

Answer 1

Location.js

export async function requestPermission() {
    RNLocation.configure({
        distanceFilter: 5.0
    })

    var permission = await RNLocation.requestPermission({
        ios: 'whenInUse', // or 'always'
        android: {
            detail: 'coarse', // or 'fine'
            rationale: {
                title: "We need to access your location",
                message: "We use your location to show where you are on the map",
                buttonPositive: "OK",
                buttonNegative: "Cancel"
            }
        }
    });

    return permission;
}

Main.js

 useEffect(() => {
        async function fetchLocation() {
            var permission = await requestPermission();
            if (permission) {
                var location = await requestLocation();
                const { coords } = location;
                setLocation(coords)
            } else {
                dispatch(toastMessage({
                    message: 'Permission to access location was denied',
                    title: APPLICATION_NAME,
                    type: 'error',
                }))
                return
            }
        }
        fetchLocation();
    }, [])

here example see

Hope this will help you