Im trying to render a map at the current user geolocation on android device, using react-native maps.
Here is what i've got so far:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
} from 'react-native';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
class MapComponent extends Component {
constructor() {
super()
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
this.setState({initialPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
}
renderScreen = () => {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}/>
</View>
);
}
render() {
return (
this.renderScreen()
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default MapComponent;
The map renders, but not in current device geolocation, as expected. (it renders in the middle of the ocean)
The permissions are already set at AndroidManifest.xml as:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
After 20 seconds, i get an alert saying, "Location request timed out" "code 3"
What i'm doing wrong?
Adding a marker in React Native MapsStart by importing Marker from react-native-maps . import { Marker } from "react-native-maps"; Next, render the <Marker /> component as a child of <MapView /> . Pass the coordinate for the marker in the coordinate prop.
Copy your API key into app. In your code, import { PROVIDER_GOOGLE } from react-native-maps and add the property provider=PROVIDER_GOOGLE to your <MapView> . This property works on both iOS and Android. Rebuild the app binary. An easy way to test that the configuration was successful is to do a simulator build.
I'm not sure but there is an issue ("Geolocation timed out, code 3") which looks related
For anyone else struggling with this issue on android, try removing the maximumAge: 2000 option parameter. This option was causing geolocation to either timeout or crash the app.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With