![](\"https://raw.githubusercontent.com/webyonet/react-native-android-location-services-dialog-box/master/demo.gif\")
\n\nA react-native component for turn on the dialog box from android location services\n\n\n[](https://github.com/webyonet/react-native-android-location-services-dialog-box)\n[](https://badge.fury.io/js/react-native-android-location-services-dialog-box)\n\n\n\n\n### Installation\n\n#### Mostly automatic installation (recommended)\n\n1. `yarn add react-native-android-location-services-dialog-box`\nUse Location ?
This app wants to change your device settings:Use GPS, Wi-Fi, and cell network for location
Learn more\",\n ok: \"YES\",\n cancel: \"NO\",\n enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => GPS OR NETWORK PROVIDER\n showDialog: true, // false => Opens the Location access page directly\n openLocationServices: true, // false => Directly catch method is called if location services are turned off\n preventOutSideTouch: false, // true => To prevent the location services window from closing when it is clicked outside\n preventBackClick: false, // true => To prevent the location services popup from closing when it is clicked back button\n providerListener: false // true ==> Trigger locationProviderStatusChange listener when the location state changes\n}).then(function(success) {\n console.log(success); // success => {alreadyEnabled: false, enabled: true, status: \"enabled\"}\n}).catch((error) => {\n console.log(error.message); // error.message => \"disabled\"\n});\n\nBackHandler.addEventListener('hardwareBackPress', () => { //(optional) you can use it if you need it\n //do not use this method if you are using navigation.\"preventBackClick: false\" is already doing the same thing.\n LocationServicesDialogBox.forceCloseDialog();\n});\n\nDeviceEventEmitter.addListener('locationProviderStatusChange', function(status) { // only trigger when \"providerListener\" is enabled\n console.log(status); // status => {enabled: false, status: \"disabled\"} or {enabled: true, status: \"enabled\"}\n});\n\ncomponentWillUnmount() {\n // used only when \"providerListener\" is enabled\n LocationServicesDialogBox.stopListener(); // Stop the \"locationProviderStatusChange\" listener\n}\n```\n\n### Configure Colors\n\n```javascript\nimport LocationServicesDialogBox from \"react-native-android-location-services-dialog-box\";\n\nLocationServicesDialogBox.checkLocationServicesIsEnabled({\n message: \"Use Location ?\",\n ok: \"YES\",\n cancel: \"NO\",\n style: { // (optional)\n backgroundColor: '#87a9ea',// (optional)\n \n positiveButtonTextColor: '#ffffff',// (optional)\n positiveButtonBackgroundColor: '#5fba7d',// (optional)\n \n negativeButtonTextColor: '#ffffff',// (optional)\n negativeButtonBackgroundColor: '#ba5f5f'// (optional)\n }\n}).then(function(success) {\n console.log(success);\n}).catch((error) => {\n console.log(error.message);\n});\n\n```\n
![\"screen](\"https://user-images.githubusercontent.com/973302/42411805-3246281a-820b-11e8-862c-8d8cd12d90f3.png\"/)
\n\n### Usage And Example For Async Method `ES6`\n\n```javascript\nimport { BackHandler, DeviceEventEmitter } from 'react-native';\nimport LocationServicesDialogBox from \"react-native-android-location-services-dialog-box\";\n\nexport default class LocationServiceTestPage extends Component {\n constructor(props){\n super(props);\n \n this.checkIsLocation().catch(error => error);\n \n DeviceEventEmitter.addListener('locationProviderStatusChange', function(status) { // only trigger when \"providerListener\" is enabled\n console.log(status); // status => {enabled: false, status: \"disabled\"} or {enabled: true, status: \"enabled\"}\n });\n }\n \n async checkIsLocation():Promise {\n let check = await LocationServicesDialogBox.checkLocationServicesIsEnabled({\n message: \"Use Location ?\",\n ok: \"YES\",\n cancel: \"NO\",\n enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => GPS OR NETWORK PROVIDER\n showDialog: true, // false => Opens the Location access page directly\n openLocationServices: true, // false => Directly catch method is called if location services are turned off\n preventOutSideTouch: false, //true => To prevent the location services window from closing when it is clicked outside\n preventBackClick: false, //true => To prevent the location services popup from closing when it is clicked back button\n providerListener: true // true ==> Trigger \"locationProviderStatusChange\" listener when the location state changes\n }).catch(error => error);\n\n return Object.is(check.status, \"enabled\");\n }\n \n componentWillUnmount() {\n // used only when \"providerListener\" is enabled\n LocationServicesDialogBox.stopListener(); // Stop the \"locationProviderStatusChange\" listener\n } \n}\n```\n\n### Examples `ES6`\n```javascript\nimport React, { Component } from 'react';\nimport {\n AppRegistry,\n Text,\n View,\n BackHandler,\n DeviceEventEmitter\n} from 'react-native';\n\nimport LocationServicesDialogBox from \"react-native-android-location-services-dialog-box\";\n\nclass SampleApp extends Component {\n state = {\n initialPosition: 'unknown',\n };\n\n componentDidMount() {\n LocationServicesDialogBox.checkLocationServicesIsEnabled({\n message: \"Use Location ?
This app wants to change your device settings:Use GPS, Wi-Fi, and cell network for location
Learn more\",\n ok: \"YES\",\n cancel: \"NO\",\n enableHighAccuracy: true, // true => GPS AND NETWORK PROVIDER, false => GPS OR NETWORK PROVIDER\n showDialog: true, // false => Opens the Location access page directly\n openLocationServices: true, // false => Directly catch method is called if location services are turned off\n preventOutSideTouch: false, //true => To prevent the location services popup from closing when it is clicked outside\n preventBackClick: false, //true => To prevent the location services popup from closing when it is clicked back button\n providerListener: true // true ==> Trigger \"locationProviderStatusChange\" listener when the location state changes\n }).then(function(success) {\n // success => {alreadyEnabled: true, enabled: true, status: \"enabled\"} \n navigator.geolocation.getCurrentPosition((position) => {\n let initialPosition = JSON.stringify(position);\n this.setState({ initialPosition });\n }, error => console.log(error), { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 });\n }.bind(this)\n ).catch((error) => {\n console.log(error.message);\n });\n \n DeviceEventEmitter.addListener('locationProviderStatusChange', function(status) { // only trigger when \"providerListener\" is enabled\n console.log(status); // status => {enabled: false, status: \"disabled\"} or {enabled: true, status: \"enabled\"}\n });\n }\n \n componentWillUnmount() {\n // used only when \"providerListener\" is enabled\n LocationServicesDialogBox.stopListener(); // Stop the \"locationProviderStatusChange\" listener.\n } \n\n render() {\n return (\n