React Native Location Manager

A redux connected component to manage localization stuff: permission, settings and position state.

Requirements

• react
• prop-types
• redux
• react-redux
• react-native
• reduxsauce
• seamless-immutable
• react-native-material-dialog
• react-native-settings
• react-native-permissions

Many of these packages come already when starting your project with ignite.

Features

Tested with android simulator and real android device (xperia z3c)

• checks for location permission, prompts a dialog asking to authorize the app, if undetermined
• checks for location setting enabled, prompts a dialog asking to enable location, if disabled
• tries to get high accuracy position, with timeout configurable fallback on low accuracy (but high accuracy still running and updating later on if successful)
• manages maxAge (position cache) internally (can't rely on maxAge option param of react-native location methods)
• all texts are customizable
• callbacks can be defined in order to inform the user about what is going on under the hood

Install

Using npm

$ npm install --save react-native-location-manager

Ore yarn

$ yarn add react-native-location-manager

Additional setup

Some required packages need more setup actions:

$ react-native link

Please, refer to packages repo pages for further instructions:

• react-native-vector-icons (required by react-native-material-dialog)
• react-native-permissions
• react-native-settings

Usage

Add the provided reducer:

/* ------------- Assemble The Reducers ------------- */
import { reducer as locationManagerReducer } from 'react-native-location-manager/Redux'

export const reducers = combineReducers({
  // ...
  location: locationManagerReducer,
  // ...
})

Inside a connected component

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux' }
import { View, Text } from 'react-native'
import Toast from 'react-native-simple-toast'
import LocationManager from 'react-native-location-manager'

class MyContainer extends Component () {
  static propTypes = {
    location: PropTypes.shape({
      permission: PropTypes.string,
      position: PropTypes.shape({
        latitude: PropTypes.number,
        longitude: PropTypes.number,
        timestamp: PropTypes.number
      }),
      stealthMode: PropTypes.bool
    })
  }

  render () {
    let position = this.props.location.position

    let myPositionText = position === null ? 'Position unknown' : `Lat: ${position.latitude}, Lng: ${position.longitude}`
    return (
      <View>
        <LocationManager
          highAccuracyTimeout={10000}
          dialogTitle={'Can we access you position?'}
          dialogAuthorizeText={'Authorize the app to use the location service?'}
          dialogAuthorizeCancelLabel={'CANCEL'}
          dialogSettingsText={'Please enable location service in order to make me happy'}
          dialogSettingsOkLabel={'SETTINGS'}
          dialogSettingsCancelLabel={'DON\'T BOTHER'}
          deniedPermissionMessage={
            <View style={{ backgroundColor: 'red', padding: 10 }}>
              <Text style={{ color: 'white' }}>
                In order to calculate the distance and trip details
                of each retailer, you must authorize the app to use
                the location service!
              </Text>
            </View>
          }
          onSearchHighAccuracy={() => Toast.show('Searching position')}
          onSuccessHighAccuracy={() => Toast.show('GPS position found')}
          onSuccessLowAccuracy={() => Toast.show('Position found')}
          onLocationError={() =>
            Toast.show('Can\'t retrieve your current position')
          }
        />
        <Text>{myPositionText}</Text>
      </View>
    )
  }
}

const mapStateToProps = state => (
  return {
    location: state.location
  }
)

export default connect(mapStateToProps)(MyContainer)

Reducer

The reducer provided:

location: PropTypes.shape({
  permission: PropTypes.string, // one of authorized, denied, undetermined, restricted
  position: PropTypes.shape({
    latitude: PropTypes.number,
    longitude: PropTypes.number,
    timestamp: PropTypes.number // when it was fetched?
  }),
  stealthMode: PropTypes.bool // set to true when the user closes the dialog without going to location enable settings page
})

The stealthMode variable is used in order to stop asking the user to enable location setting every time the component renders, if someone doesn't want to share its position, why should we annoying him?

API

LocationManager props:

| Prop | Type | Default | Description | |----------------------------|----------|---------------------------------------------------|------------------| | dialogTitle | String | Possiamo accedere alla tua posizione? | Title of the modal dialog which pops up when the user has not given app permission to retrieve location, or location setting is disabled | | dialogAuthorizeOkLabel | String | OK | Label of the OK button when the dialog ask for location permission | | dialogAuthorizeCancelLabel | String | ANNULLA | Label of the CANCEL button when the dialog ask for location permission | | dialogAuthorizeText | String | Dai il permesso per rilevare la tua posizione? | Dialog text when the dialog ask for location permission | | dialogSettingsOkLabel | String | IMPOSTAZIONI | Label of the OK button when the dialog ask to enable setting | | dialogSettingsCancelLabel | String | NON VOGLIO | Label of the CANCEL button when the dialog ask to enable setting | | dialogSettingsText | String | Attivare la localizzazione? | Dialog text when the dialog ask to enable setting | | deniedPermissionMessage | Object | Autorizzazione localizzazione negata | Node shown to inform the user that location authorization was denied (can't prompt the user for authorization again) | | onPermissionDenied | Function | () => {} | Callback called when the user denies location permission to the app | | maxAge | Number | 30000 | Cache time for the position to be considered still valid | | onLocationError | Function | () => {} | Callback called when the position cannot be retrieved | | highAccuracyTimeout | Number | 10000 | Timeout fot the high accuracy request | | onSearchHighAccuracy | Function | () => {} | Callback called when searching with high accuracy | | onSuccessHighAccuracy | Function | () => {} | Callback called when high accuracy position is succesfully retrieved | | onTimeoutHighAccuracy | Function | () => {} | Callback called when high accuracy request timeouts | | onSearchLowAccuracy | Function | () => {} | Callback called when searching with low accuracy | | onSuccessLowAccuracy | Function | () => {} | Callback called when low accuracy position is succesfully retrieved |

The Utils module also exports 2 useful functions:

import { distance, getLocation } from 'react-native-location-manager/Utils'

distance

distance (lat1, lon1, lat2, lon2)

Params

• lat1
• lon1
• lat2
• lon2

The latitude and longitude of the 2 points

Returns

The distance between 2 LatLng points

getLocation

getLocation (
  onSuccess,
  onError,
  options,
  // wanna display messages?
  onSearchHighAccuracy = () => {},
  onSuccessHighAccuracy = () => {},
  onTimeoutHighAccuracy = () => {},
  onSearchLowAccuracy = () => {},
  onSuccessLowAccuracy = () => {}
)

Params

• onSuccess(coords): cb called when the position is retrieved. It may be calles 2 times, the first with low accuracy position and later on with high accuracy position
• onError(error): cb called when the position cannot be retrieved
• options:
  • options.timeout: high accuracy request timeout (after this interval the low accuracy request is performed, but the previous high accuracy request continues!)
• onSearchHighAccuracy: function called when requesting the high accuracy position
• onSuccessHighAccuracy: function called when the high accuracy request is successful
• onTimeoutHighAccuracy: function calles when the timeout interval is gone (so the low accuracy request is going to be performed)
• onSearchLowAccuracy: function called when requesting the low accuracy position
• onSuccessLowAccuracy: function called when the low accuracy request is successful

Contribute

Contributions are very much appreciated, please make sure your code is compliant with the following eslintrc:

{
  "parser"  : "babel-eslint",
  "extends" : [
    "standard",
    "standard-react"
  ],
  "plugins" : [
    "babel"
  ],
  "env"     : {
    "node" : true
  },
  "rules": {
    "semi" : [2, "never"],
    "max-len": [2, 120, 2],
  }
}