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 = heightconst SCREEN_WIDTH = widthconst ASPECT_RATIO = width / heightconst LATITUDE_DELTA = 0.0922const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIOclass 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?