In this chapter, we will show you how to use Geolocation.
import React from 'react' import GeolocationExample from './geolocation_example.js' const App = () => { return ( <GeolocationExample /> ) } export default App
We will start by setting up the initial state for that will hold the initial and the last position.
Now, we need to get current position of the device when a component is mounted using the navigator.geolocation.getCurrentPosition. We will stringify the response so we can update the state.
navigator.geolocation.watchPosition is used for tracking the users’ position. We also clear the watchers in this step.
import React, { Component } from 'react' import { View, Text, Switch, StyleSheet} from 'react-native' class SwichExample extends Component { state = { initialPosition: 'unknown', lastPosition: 'unknown', } watchID: ?number = null; componentDidMount = () => { navigator.geolocation.getCurrentPosition( (position) => { const initialPosition = JSON.stringify(position); this.setState({ initialPosition }); }, (error) => alert(error.message), { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } ); this.watchID = navigator.geolocation.watchPosition((position) => { const lastPosition = JSON.stringify(position); this.setState({ lastPosition }); }); } componentWillUnmount = () => { navigator.geolocation.clearWatch(this.watchID); } render() { return ( <View style = {styles.container}> <Text style = {styles.boldText}> Initial position: </Text> <Text> {this.state.initialPosition} </Text> <Text style = {styles.boldText}> Current position: </Text> <Text> {this.state.lastPosition} </Text> </View> ) } } export default SwichExample const styles = StyleSheet.create ({ container: { flex: 1, alignItems: 'center', marginTop: 50 }, boldText: { fontSize: 30, color: 'red', } })