Here's the error I tried to use react-native-maps and import permissions, location from expo-permissions + expo-location Do I have to catch the error and how to do it? Also I'm using my real device
This is the code
import React from 'react';
import {
View,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native'
import MapView from 'react-native-maps';
import {Permissions} from 'expo-permissions';
import {Location} from 'expo-location'
class MapViewScreen extends React.Component {
constructor(props){
super(props);
this.state={
region:{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.922,
longitudeDelta: 0.0421,
}
}
this._requestUserLocationPermission();
}
_requestUserLocationPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if(status !== 'granted'){
alert('Please enable your location!')
}
let location = await Location.getCurrentPositionAsunc({enabledHighAccuracy: true})
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.045,
longitudeDelta: 0.045
}
}
render(){
return(
<View style={styles.container}>
<MapView
initialRegion={this.state.region}
showsCompass={true}
showsUserLocation={true}
rotateEnabled={false}
style={{flex: 1}}
/>
</View>
);
}
}
export default MapViewScreen;
const styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#fff',
}
})
I have successfully fixed the problem. By changing initialRegion
to region
prop in react-native-maps, the screen is able now to show my device location right after I enter the map screen. Thanks all for your help