React Native - Geolocation


Advertisements


In this chapter, we will show you how to use Geolocation.

Step 1 - Home

src/components/home/Home.js

import React from 'react'
import GeolocationExample from './GeolocationExample.js'

const Home = () ⇒ {
   return (
      <GeolocationExample />
   )
}
export default Home

Step 2 - Geolocation

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.

src/components/home/AsyncStorageExample.js

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

When we run the app, we can update the text by typing into the input field.

React Native Geolocation

Advertisements