How to go to my current location using the custom button on react-native-maps?

Question

When the user goes to another view of map, and wants to go back to his current location, I have created a custom button. When the user clicks the button, it should go back to his current location.

import React,{ useState, useEffect} from 'react';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import { StyleSheet, Image , Text, View} from 'react-native';
import * as Location from 'expo-location';
import { 
  LocationView ,
  LocationBtn,
  } from '../components/styles';
  import { MaterialIcons } from '@expo/vector-icons';


  
const Map = (props) =>{


  
     const [mapRegion, setMapRegion] = 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({});
          setMapRegion({
              longitude: location.coords.longitude,
              latitude: location.coords.latitude,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421
            });
            console.log('location', location)
        })();
      }, [])

     

    return(
      <View style={{ flex: 1}}>
        <MapView
        region={mapRegion}
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        mapType={props.mapType}
        showsUserLocation={true}
        showsMyLocationButton={true}
        loadingEnabled={true}
        initialRegion={mapRegion}
        userInterfaceStyle='light'
        showsTraffic={true}
        >
           <Marker 
          coordinate={mapRegion}
          >
            <Image source={require('../assets/marker.png')} style={{height: 90, width: 90}} />
          </Marker>
        </MapView>
         <LocationView>
           <LocationBtn 
           >
                <MaterialIcons 
                name="my-location" 
                size={30}
                 color="black"
                  style={{alignSelf: 'center', marginTop: 13}}
                  />
                </LocationBtn>
             </LocationView>  
        </View>
         
       
    )
} 


const styles = StyleSheet.create({
    map: {
        height: '100%', 
    },
})


export default Map;

My idea was to put onPress(mapRegion) in the <LocationBtn></LocationBtn/>(which is the custom button), and when the user clicks the button, it goes to the user current location which is in the mapReagion state How can I make it work?

Answer 1

There is no option in react-native-map to go to your current location. You need to implement on your own.

Use this package https://www.npmjs.com/package/react-native-location to get your location (you can do lot more) add a marker on the map using react-native-map functions.