In this tutorial we will learn How To Show User Location On Google Maps in React Native Android App. Source code to find user location and then display it on google maps is given.
Table of Contents
React Native Source Code
Simple React Native source code is given below.
{/* install mapview dependency
npm install reat-native-maps
*/}
import { Dimensions, StyleSheet, Text, View, } from 'react-native';
import * as Location from 'expo-location';
import React, {useState, useEffect} from 'react';
import MapView from 'react-native-maps';
export default function App() {
const [location , setLocation]= useState(null);
const [errorMsg , setErrorMsg]= useState(null);
useEffect( () => {
(async() => {
let {status}= await Location.requestForegroundPermissionsAsync();
if(status !=='granted')
{
setErrorMsg('Permission to access locatiob was denied');
return;
}
let location= await Location.getCurrentPositionAsync({});
setLocation(location);
})();
},[]);
let text= 'Waiting...';
if(errorMsg)
{
text(errorMsg)
}
else if(location) {
text=JSON.stringify(location);
}
return (
<View style={styles.container}>
<MapView
showsMyLocationButton= {true}
showsUserLocation= {true}
style={styles.map}
>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});