To track the location in react native we have ‘geolocation’. Geolocation support both ios and android. Before using the geolocation we need to request to access the user location by adding below line in android/app/src/main/AndroidManifest.xml.
... android:versionName="1"> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
Geolocation api exits on global navigator object, so we can access it via navigator.geolocation, and don't need to import as a react native component.
It is used to access user location at anytime.
Possible options are:
if this method is called success function it will return present position information, otherwise it returns error.
For ex:
import React, {Component} from ‘react’; import { View, Text } from ‘react-native’; export default class Geolocation extends Component { constructor(props) { super(props); this.state = { latitude: null, longitute: null, timestamp: null } } componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { this.setState({ latitude: position.coords.latitude , longitute: position.coords.longitude timestamp: position.timestamp }) }, (error) => { console.log(error); }, { enableHighAccuracy: true, timeout: 30000 } ) } render() { return ( <View> <Text>{this.state.latitude}</Text> <Text>{this.state.longitude}</Text> <Text>{this.state.timestamp}</Text> </View> ) } }
Here we can get the longitude and latitude, if we pass those values to google maps api we can get the location details in json format.
For example:
import React, {Component} from ‘react’; import { View, Text } from ‘react-native’; const googleApiKey = ‘my_google_api_key’; export default class Geolocation extends Component { constructor(props) { super(props); this.state = { country: null } } componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { this.getLocationDetails(position.coords.latitude,position.coords.longitude) }, (error) => { console.log(error); }, { enableHighAccuracy: true, timeout: 30000 } ) } getLocationDetails(latitude, longitude) { const location = []; url='https://maps.googleapis.com/maps/api/geocode/json?address='+ latitude + ',' +longitude + '&key=' + googleApiKey fetch(url) .then((response) => response.json()) .then((responseJson) => { location = responseJson; location.results[0].address_components.forEach(component => { if (component.types.indexOf('country') !== -1) { this.setState({ country: component.long_name }); } }); }); } render() { return ( <View> <Text>{this.state.country}</Text> </View> ) } }
In above example we can get country name of current location.
It is same as getCurrentPostition, but it invoked success function when the location is changed If you don't need real time update of present location then noo need of using this method.
It should be used only when the watchPosition is used. It will clear the previously stored watch id when the app is unmount.
Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.
Django-CRM :Customer relationship management based on Django
Django-blog-it : django blog with complete customization and ready to use with one click installer Edit
Django-webpacker : A django compressor tool
Django-MFA : Multi Factor Authentication
Docker-box : Web Interface to manage full blown docker containers and images
More...