react-native/docs/geolocation.md

id, title

id	title
geolocation	geolocation

Geolocation

The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

iOS #

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with react-native init.

Android #

To request access to location, you need to add the following line to your app's AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Methods #

static getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: GeoOptions) #

Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)

static watchPosition(success: Function, error?: Function, options?: GeoOptions) #

Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)

static clearWatch(watchID: number) #

static stopObserving() #

Edit on GitHubExamples #

/* eslint no-console: 0 */ 'use strict';

var React = require('react-native'); var { StyleSheet, Text, View, } = React;

exports.framework = 'React'; exports.title = 'Geolocation'; exports.description = 'Examples of using the Geolocation API.';

exports.examples = [ { title: 'navigator.geolocation', render: function(): ReactElement { return <GeolocationExample />; }, } ];

var GeolocationExample = React.createClass({ watchID: (null: ?number),

getInitialState: function() { return { initialPosition: 'unknown', lastPosition: 'unknown', }; },

componentDidMount: function() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); this.setState({initialPosition}); }, (error) => alert(error.message), {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((position) => { var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); },

componentWillUnmount: function() { navigator.geolocation.clearWatch(this.watchID); },

render: function() { return ( <View> <Text> <Text style={styles.title}>Initial position: </Text> {this.state.initialPosition} </Text> <Text> <Text style={styles.title}>Current position: </Text> {this.state.lastPosition} </Text> </View> ); } });

var styles = StyleSheet.create({ title: { fontWeight: '500', }, });

Next →