React Native Geolocation - React Native

What is React Native - Geolocation?

In this tutorial, we will discuss about how to use Geolocation API.

Step 1 - Create File

The file we are going to use for presentational component is src/components/home/GeolocationExample.js

Step 2 - Logic

  • First we are setting initial state for HomeContainer and passing it to GeolocationExample as a prop.
  • Then we need to get current position of the device when component is mounted using navigator.geolocation.getCurrentPosition. We will stringify the response so we can update the state.

navigator.geolocation.watchPosition is used for tracking users position.

At the end we need to clear watchers.

src/components/home/HomeContainer.js

Example

Step 3 - Presentation

Presentation component is used only to display the data.

src/components/home/GeolocationExample.js

Example

On starting the app, we will be asked for having the location permission.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics