Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Handling Background Location Permissions in React Native

Published by: Zayan Tharani | September 23, 2021 msaqlain
SCROLL AND BE AMAZED!
Home > App Development • Blog • React Native > Handling Background Location Permissions in React Native

Location-based applications are widely used nowadays in mobile apps. You may want to get a user’s location to show services around, get a sense of the user ‘s city or country or act based on the location updates of the user while moving (like Uber calculating the distance and trip fare). In this article, we are going to explain how you can handle background location permissions in react native for iOS 13 and above and Android 10 and above. We will use react-native-permissions to check and request permission.

iOS

To make background location tracking more transparent, Apple has taken a couple of steps. This means that If your app requested Always permissions, users will see the same dialog as for When In Use, except the consequences of the user choosing the options are different.

The user choosing Allow While in Use though starts a multi-step process, called Provisional Always Authorization.

iOS13 does this to check if the app will use a location API that requires Always permissions. In our case, continuing to track in the background fits the requirements, and usually, next time user checks their home screen a second dialog appears:

This prompt appears automatically when iOS algorithms conclude that the user is not busy and is currently on the home screen. The app has no control over the timing, but in our tests, the prompt appears shortly after switching to the home screen during active location tracking.

Once the user chooses either Change to Always Allow or Keep Only While Using, your app starts receiving location events. This event marks the end of the Provisional Always Authorization state.

However, to reduce this gap, you can do this:

On the screen where you request for Always permissions, explain that your app requires the user to choose Change to Always Allow on the second prompt and/or navigate the user to the app Settings to manually end Provisional Always Authorization by switching permissions to Always Allow:

To do this, use can use react-native-permissions to first ask for LOCATION_WHEN_IN_USE permissions:

var permission;
   if (Platform.OS === 'ios') {
     permission =
       parseInt(Platform.Version, 10) < 13
         ? PERMISSIONS.IOS.LOCATION_ALWAYS
         : PERMISSIONS.IOS.LOCATION_WHEN_IN_USE;
   }
   var result = await request(permission);

After requesting, check if permissions are granted and in case of iOS 13, the user must be navigated to app Settings to manually change location permissions to always. This can be done by:

Linking.openSettings();

This is how the process will look in the app:

Android

Similar to iOS, in Android 10 and above, a new permission ACCESS_BACKGROUND_LOCATION is introduced. However, to enable this, the user must be navigated to the app settings. In the case of the Android version is below 10, this step is not required and using ACCESS_FINE_LOCATION will do the work. The process is similar to iOS and this is how it can be achieved:

if (Platform.Version < 29) {
       alwaysPermission = PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION;
     } else {
       alwaysPermission = PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION;
     }
   }

Then, in order to navigate to app settings, use Linking.openSettings();

This is what the flow looks like:

Note:

It is important that GPS is enabled as the permissions library would not enable it even if the location permissions are enabled. To enable GPS, react-native-android-location-enabler can be used.


About Zayan Tharani

Zayan Tharani is working as a Software Engineer at Folio3, comes up with expertise including; React-Native, Native iOS, Native Android, and Flutter development. He is a passionate developer who can work under a great deal of pressure, prepared for new challenges, particularly about innovation. He is skilled in vision and chatbot development as well. He loves outdoor activities such as playing football, cricking, and traveling which give him new experiences.

Newsletter

Search

Archives

  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React
  • Introduction To Full Stack Quality Assurance

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous Fetching Data from Google Fit into a React Native Application
Next What is Google Maps Geometry Library & How it Works?
Schedule an appointment with our Mobile App Development Expert

    Footer Menu
    • Company
      • About Us
      • Portfolio
      • Blog
      • Careers
      • Contact Us
    • Solutions
      • Apps Discovery Services
      • Team Augmentation
      • Enterprise App Development
      • AR/VR Application Development
      • IoT Application Development
      • Wearables Apps Development
      • Field Sales
      • On-Demand Apps Development
    • Technologies
      • iOS
      • Android
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • HTML5
      • Sencha
    • Industries
      • Retail
      • Agriculture
      • Healthcare
      • Pharmaceutical
      • Manufacturing
      • Automotive
      • Logistics
      • Education

    US Office

    Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

    Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

    Tel: +1 408 365 4638
    Support: +1 (408) 512 1812

    Mexico Office

    Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

    Bulgaria Office

    49 Bacho Kiro Street, Sofia, 1000, Bulgaria

    Canada Office​

    895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

    UK Office

    Export House, Cawsey Way, Woking Surrey, GU21 6QX

    Tel: +44 (0) 14 8361 6611

    UAE Office

    Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

    Tel: +971-55-6540154
    Tel: +971-04-2505173

    Pakistan Office

    163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
    75350

    705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
    Karachi – 75350

    First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

    Tel: +92-21-3432 3721-4 

    © 2021, Folio3 Software Inc., All rights reserved.

    • Privacy policy and terms of use
    • Cookie Policy
    Follow us on
    Facebook-f Twitter Linkedin-in

    Get a free app audit

      Tired of your app not performing up to the mark?

      Get a free technology and app strategy review.