react-native-maps get current location using geolocation

Question

i am trying to get the current location of a user but everytime i run my emulator it is showing me the location of googleplex this is the output iam getting .My guess is that its the default location somehow. I added "ACCESS_FINE_LOCATION" in my manifest.xml and here is my source code . . . . . . .

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions
} from 'react-native';

// import { Actions } from 'react-native-router-flux';
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;

export default class Location extends Component {
    constructor(props){
        super(props);
        this.state = {
            initialPosition: {
              latitude: 0,
              longitude: 0,
              latitudeDelta: 0,
              longitudeDelta: 0
            },
            markerPosition: {
              latitude: 0,
              longitude: 0,

            }
        }
    }
    watchID: ?number = null
    componentDidMount(){
        navigator.geolocation.getCurrentPosition((position) => {
            //let lat = parseFloat(position.coords.latitude);
            //let long = parseFloat(position.coords.longitude);
            var lat = parseFloat(position.coords.latitude);
            var long = parseFloat(position.coords.longitude);

            //this.setState({initialRegion : {
              var initialRegion = {
                latitude : lat,
                longitude : long,
                latitudeDelta : LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA
            }
              this.setState({initialPosition: initialRegion})
              this.setState({markerPosition: initialRegion})


        },
            (error)=> alert(JSON.stringify(error)),
            {enableHighAccuracy : true , timeout: 20000, maximumAge:1000})

            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: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA
              }
              this.setState({initialPosition: lastRegion})
              this.setState({markerPosition: lastRegion})
            })
    }
    componentWillUnmount(){
      navigator.geolocation.clearWatch(this.watchID)
    }

    render(){
        return(
            <View style={styles.container}>
              <MapView style={styles.map}
              region ={this.state.initialPosition}>

              <MapView.Marker
              coordinate={this.state.markerPosition}
              >
              <View style={styles.radius}>
              <View style={styles.marker}>
              </View>
              </View>
              </MapView.Marker>
              </MapView>

            </View>
        );
    }}


    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,
      },
    });

Also if someone could help me, add the current location button it would be very helpful.