React Native Maps loading position

Question

I am trying to make an application using react-native-maps module. I can get the device location via navigator.geolocation.watchPosition , and i am also using the map built in showUserLocation property. How can I achive that the map when loading in would go to the user location. Not seeing the whole world nor a hard coded initial position.

EDIT: This is my react-native-map element. The region, is set to a hard coded initial position, and i'd like to change that to load always on the users location.

    <View style={styles.container}>
                    <MapView
                    style={styles.map}
                    region={this.state.initialPosition}
                    showsMyLocationButton={true}
                    loadingEnabled={true}
                    onRegionChange={(region)=> this.setState({ initialPosition:region })}
                    onLongPress={this.mapOnPress}
                    showsUserLocation={true}
                    > 

The location i am using in the app is from here, but it's loads very late, it usually more than 20s, so I would like to skip this 20s and load on the user location instantly.

this.watchID= navigator.geolocation.watchPosition((position)=>{
    var lastRegion ={
                latitude: lat,
                longitude: lon,
                longitudeDelta: LON_D,
                latitudeDelta: LAT_D
            }
    this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10})

Is there any solution for this? Thanks for your help :)

Answer 1

you can try this, timeout unit is ms.Tested in RN: 44,

class Map extends Component {

constructor(props) {
    super(props);
    this.state = {
        permissionState: false,
        latitude: null,
        longitude: null,
        error: null,
    };
}

componentDidMount() {
    Platform.OS === 'android' && Platform.Version >= 23 ? this.requestMapPermission() : this.requestMap()
}

async requestMapPermission() {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('Granted');
            this.watchId = navigator.geolocation.getCurrentPosition(
                (position) => {
                    console.log('Position is watched');
                    this.setState({
                        permissionState: true,
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        error: null,
                    });
                },
                (error) => this.setState({error: error.message}),
                {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
            );

        } else {
            console.log('not Granted');
            this.setState({
                permissionState: false,
            });
        }
    } catch (err) {
        console.warn(err)
    }
}

requestMap() {
    this.watchId = navigator.geolocation.watchPosition(
        (position) => {
            this.setState({
                permissionState: true,
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                error: null,
            });
        },
        (error) => this.setState({error: error.message, permissionState: false,}),
        {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
    );
}


componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
}

render() {
    var {height, width} = Dimensions.get('window');
    return (
        <View style={{height: 150, justifyContent: 'center'}}>
            {
                this.state.permissionState === true ?
                    <MapView
                        minZoomLevel={16}
                        style={{height: 150, marginBottom: 5, marginTop: 5}}
                        region={{
                            latitude: this.state.latitude,
                            longitude: this.state.longitude,
                            latitudeDelta: 0.0922,
                            longitudeDelta: 0.0421
                        }}>
                        <MapView.Marker
                            coordinate={{
                                latitude: (this.state.latitude + 0.00000),
                                longitude: (this.state.longitude + 0.00000),
                            }}>
                            <View>
                                <Icon name="place" size={40} color="#038FC0"/>
                            </View>
                        </MapView.Marker>
                    </MapView> :
                    <View style={{
                        borderWidth: 1,
                        borderColor: '#6f6f6f',
                        height: 150,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <Text>No Permission for location</Text>

                    </View>


            }

        </View>
    );
}
}

const styles = StyleSheet.create({
map: {
    ...StyleSheet.absoluteFillObject,
 }
});

export default Map;