This is a searchable version of the documentation included in the open source project React Native.

Geolocation

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.

Geolocation follows the MDN specification: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

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( (initialPosition) => this.setState({initialPosition}), (error) => alert(error.message), {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((lastPosition) => { this.setState({lastPosition}); }); }, componentWillUnmount: function() { navigator.geolocation.clearWatch(this.watchID); }, render: function() { return ( <View> <Text> <Text style={styles.title}>Initial position: </Text> {JSON.stringify(this.state.initialPosition)} </Text> <Text> <Text style={styles.title}>Current position: </Text> {JSON.stringify(this.state.lastPosition)} </Text> </View> ); } }); var styles = StyleSheet.create({ title: { fontWeight: '500', }, });