React Native iOS getting the lat & long of current position - ios

Question

I am trying to get the longitude and langtitude but it seems like I can't access it from the default geolocation json object that I get.
I followed this example form the docs and it works great but I only need the long & lat so I am trying to pick it out like this:
const LATITUDE = 19.0760;
const LONGITUDE = 72.8777;
class Map extends Component {
state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE
},
};
watchID: ?number = null;
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
var initialPosition = JSON.stringify(position);
this.setState({
initialRegion: {
latitude: initialPosition.coords.latitude,
longitude: initialPosition.coords.longitude,
}
});
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);
this.watchID = navigator.geolocation.watchPosition((position) => {
var lastPosition = JSON.stringify(position);
this.setState({
lastRegion: {
latitude: lastPosition.coords.latitude,
longitude: lastPosition.coords.longitude,
}
});
});
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
<View>
<Text>
<Text style={styles.title}>Initial position: </Text>
{this.state.initialRegion}
</Text>
<Text>
<Text style={styles.title}>Current position: </Text>
{this.state.lastRegion}
</Text>
</View>
);
}
}
Eventualy I want to do render something like this:
render() {
return (
<MapView
style={ styles.map }
initialRegion={{
latitude: {this.state.lat},
longitude:{this.state.long},
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}

Answer 1

Try this:
import React, { Component } from 'react';
import {
MapView,
StyleSheet,
View,
} from 'react-native';
var Dimensions = require('Dimensions'),
windowSize = Dimensions.get('window'),
Screen = require('Dimensions').get('window'),
NavigationBar = require('react-native-navbar');
var regionText = {
latitude: '0',
longitude: '0',
latitudeDelta: '0',
longitudeDelta: '0',
};
class LocateMap extends Component {
createAnnotation(longitude, latitude) {
return {
longitude,
latitude,
draggable: true,
onDragStateChange: (event) => {
if (event.state === 'starting') {
this.setState({
annotations: [this.createAnnotation(event.longitude, event.latitude)],
});
}
},
};
}
constructor(props) {
super(props);
this.state = {
isFirstLoad: true,
annotations: [],
mapRegion: undefined,
};
}
render() {
if (this.state.isFirstLoad) {
var onRegionChangeComplete = (region) => {
//When the MapView loads for the first time, we can create the annotation at the
//region that was loaded.
this.setState({
isFirstLoad: true,
annotations: [this.createAnnotation(region.longitude, region.latitude)],
});
};
}
const rightButtonConfig = {
title: 'Locate',
tintColor:'#ffffff',
handler: () => {
this.props.data.getMapPosition(this.state.annotations[0].longitude, this.state.annotations[0].latitude);
this.props.navigator.pop();
},
};
return (
<View style={{flex:1}}>
<MapView
style={styles.map}
onRegionChangeComplete={onRegionChangeComplete}
region={this.state.mapRegion}
annotations={this.state.annotations}
zoomEnabled={true}
showsUserLocation={true}
/>
</View>
);
}
};
var styles = StyleSheet.create({
map: {
height: Screen.height,
width: Screen.width
}
});
module.exports= LocateMap;