get lat and long from expo location to fetch on map - location

Question

I found this code on location docs of expo :
state = {
location: null,
errorMessage: null,
};
componentWillMount() {
if (Platform.OS === 'android' && !Constants.isDevice) {
this.setState({
errorMessage: 'Oops, this will not work on Sketch in an Android
emulator. Try it on your device!',
});
} else {
this._getLocationAsync();
}
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: 'Permission to access location was denied',
});
}
let location = await Location.getCurrentPositionAsync({});
this.setState({ location });
};
render() {
let text = 'Waiting..';
if (this.state.errorMessage) {
text = this.state.errorMessage;
} else if (this.state.location) {
text = JSON.stringify(this.state.location);
}
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{text}</Text>
</View>
);
}
}
it works fine for me by returning my lat,long, accuracy timestamp and other things.
can someone tell me how can i get my coordinates and render them on a map?? i want to use a state of lat,long and pass the values which it accessed from my location into that state to further put it into the initial region of the mapview
anyone who can help??

Answer 1

I know this answer is a little late, but in case someone runs across it, this is what I did:
Added a region property to state:
state = {
location: null,
region: null,
errorMessage: null,
};
In getLocations, I translated the location object returned from the getCurrentPositionAsync() call to a Region:
getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: 'Permission to access location was denied',
});
}
let location = await Location.getCurrentPositionAsync({});
const region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 1.0,
longitudeDelta: 1.0
}
this.setState({ location, region });
};
And finally in the render method I used the region property of state to set the region in the mapview:
render() {
return (
<MapView
initialRegion={this.state.region}
/>
);
}
Once the async call to get the location is complete, the map jumps to the current location.