Android – react native maps loading location

I'm trying to create an application using the react native maps module. I can get the device location through navigator.location.watchposition. I also use the built-in map in showuserlocation property. How to turn the map to the user location when loading. I don't see the whole world or the hard coded initial location

Edit: This is my react native map element. This field is set to the hard coded initial position. I want to change it so that it is always loaded in the user's position

    <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 use in the application starts from here, but it loads late, usually more than 20 seconds, so I want to skip this 20 seconds and load it to the user location immediately

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? Thank you for your help:)

resolvent:

You can try this. The 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;