React-Native display user's current location

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image, FlatList, ScrollView, Dimensions, TouchableOpacity } from 'react-native';

import MapView from 'react-native-maps';

import HomeScreenStyles from './Styles/HomeScreenStyles';

 

class HomeComponent extends Component {

constructor(props) {

super(props);

this.state = {

initialPosition: {

latitude: 0,

longitude: 0,

latitudeDelta: 0.0922,

longitudeDelta: 0.05,

},

markerPosition: {

latitude: 0,

longitude: 0

}

}

}

componentDidMount() {

navigator.geolocation.getCurrentPosition(

(position) => {

var lat = (position.coords.latitude)

var long = (position.coords.longitude)

var initialRegion = {

latitude: lat,

longitude: long,

latitudeDelta: 0.0922,

longitudeDelta: 0.05,

}

this.setState({ initialPosition: initialRegion })

this.setState({ markerPosition: initialRegion })

},

(error) => {

alert('Error in getting location')

},

{

enableHighAccuracy: true,

timeout: 20000,

maximumAge: 10000

}

)

this.watchID = navigator.geolocation.watchPosition(

(position) => {

var lat = parseFloat(position.coords.latitude)

var long = parseFloat(position.coords.longitude)

var lastRegion = {

latitude: lat,

longitude: long,

latitudeDelta: 0.0922,

longitudeDelta: 0.05,

}

this.setState({ initialPosition: lastRegion })

this.setState({ markerPosition: lastRegion })

});

}

componentWillMount() {

navigator.geolocation.clearWatch(this.watchID);

}

render() {

return (

<View style={{ flex: 1, flexDirection: 'column' }}>

<MapView

region={this.state.initialPosition}

style={HomeScreenStyles.container}

showsUserLocation={true}

followsUserLocation={true}>

<MapView.Marker coordinate={this.state.markerPosition}>

</MapView.Marker>

</MapView>

</View>

);

}

}

export default HomeComponent;