/react-native-android-location-services-dialog-box

React Native Android Location Services Dialog Box

Primary LanguageJavaMIT LicenseMIT

React Native Android Location Services Dialog Box

A react-native component for turn on the dialog box from android location services

npm version

Installation

Mostly automatic installation (recommended)

  1. npm install react-native-android-location-services-dialog-box --save
  2. react-native link react-native-android-location-services-dialog-box

Manual Installation

Android
  1. npm install react-native-android-location-services-dialog-box --save
  2. Make the following additions to the given files:

android/settings.gradle

include ':react-native-android-location-services-dialog-box'
project(':react-native-android-location-services-dialog-box').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-location-services-dialog-box/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':react-native-android-location-services-dialog-box')
}

MainApplication.java

On top, where imports are:

import com.showlocationservicesdialogbox.LocationServicesDialogBoxPackage;

Under protected List<ReactPackage> getPackages() {:

  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new LocationServicesDialogBoxPackage() // <== this
  );

Usage

import { BackHandler } from 'react-native';
import LocationServicesDialogBox from "react-native-android-location-services-dialog-box";

LocationServicesDialogBox.checkLocationServicesIsEnabled({
    message: "<h2>Use Location ?</h2>This app wants to change your device settings:<br/><br/>Use GPS, Wi-Fi, and cell network for location<br/><br/><a href='#'>Learn more</a>",
    ok: "YES",
    cancel: "NO",
    enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => ONLY GPS PROVIDER
    showDialog: true // false => Opens the Location access page directly
}).then(function(success) {
    console.log(success); // success => {alreadyEnabled: false, enabled: true, status: "enabled"}
}).catch((error) => {
    console.log(error.message); // error.message => "disabled"
});

BackHandler.addEventListener('hardwareBackPress', () => {
   LocationServicesDialogBox.forceCloseDialog();
});

Usage And Example For Async Method ES6

import { BackHandler } from 'react-native';
import LocationServicesDialogBox from "react-native-android-location-services-dialog-box";

export default class LocationServiceTestPage extends Component {
    constructor(props){
        super(props);
        this.checkIsLocation();
        BackHandler.addEventListener('hardwareBackPress', () => {
           LocationServicesDialogBox.forceCloseDialog();
        });
    }
    
    async checkIsLocation():Boolean {
        let check = await LocationServicesDialogBox.checkLocationServicesIsEnabled({
            message: "Use Location ?",
            ok: "YES",
            cancel: "NO",
            enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => ONLY GPS PROVIDER
            showDialog: true // false => Opens the Location access page directly
        }).catch(error => error);

        return Object.is(check.enabled, "enabled");
    } 
}

Examples ES6

import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
    View,
    BackHandler
} from 'react-native';

import LocationServicesDialogBox from "react-native-android-location-services-dialog-box";

class SampleApp extends Component {
    state = {
        initialPosition: 'unknown',
    };

    componentDidMount() {
        LocationServicesDialogBox.checkLocationServicesIsEnabled({
            message: "<h2>Use Location ?</h2>This app wants to change your device settings:<br/><br/>Use GPS, Wi-Fi, and cell network for location<br/><br/><a href='#'>Learn more</a>",
            ok: "YES",
            cancel: "NO",
            enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => ONLY GPS PROVIDER
            showDialog: true // false => Opens the Location access page directly
        }).then(function(success) {
            // success => {alreadyEnabled: true, enabled: true, status: "enabled"} 
                navigator.geolocation.getCurrentPosition((position) => {
                    let initialPosition = JSON.stringify(position);
                    this.setState({ initialPosition });
                }, error => console.log(error), { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 });
            }.bind(this)
        ).catch((error) => {
            console.log(error.message);
        });
        
        BackHandler.addEventListener('hardwareBackPress', () => {
               LocationServicesDialogBox.forceCloseDialog();
        });
    }

    render() {
        return (
            <View>
                <Text>
                    Geolocation: {this.state.initialPosition}
                </Text>
            </View>
        );
    }
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);

Props

Prop Type Default Description
message HTML null Dialog box content text
ok String null Dialog box ok button text
cancel String null Dialog box cancel button text
enableHighAccuracy (optional) Boolean true Provider switch (ONLY GPS OR GPS AND NETWORK)
showDialog (optional) Boolean true Indicate whether to display the dialog box

Methods

Name Return Return Value
checkLocationServicesIsEnabled Promise Object
forceCloseDialog void -

NPM