CODEWITHSUNDEEP
react-nativegpslocation
Alvaro Lorente
Alvaro Lorente

Reputation: 3084

react-native check and prompt user to enable Network/GPS

I am looking around on how to check if network or GPS are enabled on a device when my application starts. And if they are disabled prompt the user to enable it.

Is this posible in React-native?, and is there any class or tool that could help with this type of dialogs?

Upvotes: 30

Views: 46769

Answers (3)

Domotor Zsolt
Domotor Zsolt

Reputation: 614

If you use any kind of package to get the user's location, most likely they will automatically ask for the user to enable the hardware part when you request it for the first time.

So, you can do something like this to show the prompt:

CheckForGPSEnablement() {
    return new Promise(resolve => {
        RNLocation.configure({
            distanceFilter: 100, // Meters
            desiredAccuracy: {
                ios: "best",
                android: "balancedPowerAccuracy",
            },
            // Android only
            androidProvider: "auto",
            interval: 5000, // Milliseconds
            fastestInterval: 10000, // Milliseconds
            maxWaitTime: 5000, // Milliseconds
            // iOS Only
            activityType: "other",
            allowsBackgroundLocationUpdates: false,
            headingFilter: 1, // Degrees
            headingOrientation: "portrait",
            pausesLocationUpdatesAutomatically: false,
            showsBackgroundLocationIndicator: false,
        })
            .then(x => {
                console.log({ x })
                resolve(true)
            })
            .catch(err => {
                console.log({ err })
                resolve(false)
            })
    })
}

In my case I've used react-native-location.

Upvotes: -1

Alvaro Lorente
Alvaro Lorente

Reputation: 3084

So I am going to start answering my own question.

For GPS:

there seems to be a sensible solution. IOS seems to natively request if there is a geolocation request. And for Android this is not natively supported but someone has created a module for that ( https://github.com/webyonet/react-native-android-location-services-dialog-box )

so in my action creator I added the next code:

if(Platform.OS === 'android')
LocationServicesDialogBox.checkLocationServicesIsEnabled({ 
                message: "<h2>Use Location?</h2> \
                            This app wants to change your device settings:<br/><br/>\
                            Use GPS for location<br/><br/>", 
                ok: "YES", 
                cancel: "NO" 
            }).then(() => { 
                locationTracking(dispatch, getState, geolocationSettings)
            })

For Network: There is no native support for neither so i end up doing my own action creator to check. 

export function networkCheck(){
  return (dispatch) => {
    const dispatchNetworkState = (isConnected) => dispatch({
      type: types.NETWORK_STATE,
      state: isConnected
    })
    const handle = () => NetInfo.isConnected.fetch().done(dispatchNetworkState)
    NetInfo.isConnected.addEventListener('change', handle);
  }
}

A little extra:

for GPS i added this to check if the user goes and disable GPS on the middle of the task.

export function locationCheck(geolocationSettings = {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000, distanceFilter:10}){
  return (dispatch) => {
    navigator.geolocation.watchPosition(
        () => {
            dispatch({
                type: types.LOCATION_STATE,
                state: true
            })
        },
        () => {
            dispatch({
                type: types.LOCATION_STATE,
                state: false
            })
        },
        geolocationSettings)
  }
}

Upvotes: 26

Unknown
Unknown

Reputation: 601

For enabling location/gps on Android I can recommend this module: https://github.com/Richou/react-native-android-location-enabler

It is using the standard Android dialog for location: enter image description here

Upvotes: 16

Related Questions