Irem Karaoglu Mobile App Developer. Experienced in React Native, learning iOS and game development these days.

Managing app permissions in React Native

7 min read 1988

Managing App Permissions in React Native

When you are developing a mobile application with advanced features, you will most likely need to get permission from the user.

Applications should not be able to directly access the user’s camera, microphone, location, and so on in order to protect the user. We need to respect user privacy by seeking permission to capture and store photos, audio, and video.

Let’s check on Facebook to see an example of camera permission. You are familiar with these alerts, right?

FB Camera Access Permission

To be able to present your application fully, your users have to give permission. But what if the user denies it? As you may guess, you can’t provide that feature. Therefore, permissions are essential.

What if we are developing a photo editing application? The solution is simple: we need to get their permission to access their data. In this article, we are going to dive into permissions and how we can get permissions in React Native by using zoontek’s react-native-permissions library.

The react-native-permissions library 🐝

Unfortunately, React Native doesn’t support getting permissions. Luckily, there is a popular third-party library we can use: Mathieu Acthernoene’s react-native-permissions library.

Let’s assume we want to ask for camera permission. The steps are easy to do.

💡 To start, make sure you add this library to the project:

$ npm install --save react-native-permissions
--or--
$ yarn add react-native-permissions

Then, be sure you import the library by writing at the top of your file where you’ll handle these permissions:

We made a custom demo for .
No really. Click here to check it out.

import * as permissions from 'react-native-permissions';
// you may also import just the functions or constants that you will use from this library
import {request, PERMISSIONS} from 'react-native-permissions';

react-native-permissions for iOS devices

  • Make sure you add all wanted permissions to your app’s Podfile and run this command:
    pod install
    • CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects. Running pod install helps you to install the dependencies. You can check out CocoaPods here to read more.

→ In our case, we will add

pod 'Permission-Camera', :path => "#{permissions_path}/Camera"

to Podfile and run pod install.

  • Update the Info.plist with wanted permissions usage descriptions. You may achieve this in two ways; choose which suits you.

Option 1: Xcode

  • Open the Info section
  • Add a new line
  • Select which permission you would like from the options as a key
  • Add value to that key

→ In our case, we will select Privacy – Camera Usage Description.

Xcode Privacy Camera Usage

Option 2: Text Editor

  • Open Info.plist file
  • Copy key and string values from the following and paste that file
  • Update the string value according to your need:
<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>     
      <!-- 🚨 Keep only the permissions used in your app 🚨 -->
      <key>NSAppleMusicUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSBluetoothAlwaysUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSBluetoothPeripheralUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSCalendarsUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSCameraUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSContactsUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSFaceIDUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationAlwaysUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSLocationTemporaryUsageDescriptionDictionary</key>
      <dict>
        <key>YOUR-PURPOSE-KEY</key>
        <string>YOUR TEXT</string>
      </dict>
      <key>NSLocationWhenInUseUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSMicrophoneUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSMotionUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSPhotoLibraryUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSPhotoLibraryAddUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSRemindersUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSSpeechRecognitionUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSSiriUsageDescription</key>
      <string>YOUR TEXT</string>
      <key>NSUserTrackingUsageDescription</key>
      <string>YOUR TEXT</string>

      <!-- … -->
    </dict>
    </plist>

→ In our case, it is as follows:

<key>NSCameraUsageDescription</key>
    <string>YOUR TEXT</string>

🌞 The value section in the first option and the <string> section in the second option correspond to the text inside the alert message.

Let’s recall the Facebook camera permission alert. The description part is the text you give as the value here:

FB Camera Permission Text

→ In our case, I just gave “Camera” to the value, and here it looks like this:

RN Permission Text Body

react-native-permissions for Android

  • Add all wanted permissions to your app’s android/app/src/main/AndroidManifest.xml file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.myawesomeapp">
      <!-- 🚨 Keep only the permissions used in your app 🚨 -->
      <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
      <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
      <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
      <uses-permission android:name="android.permission.BODY_SENSORS" />
      <uses-permission android:name="android.permission.CALL_PHONE" />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />
      <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
      <uses-permission android:name="android.permission.READ_CALENDAR" />
      <uses-permission android:name="android.permission.READ_CALL_LOG" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.READ_SMS" />
      <uses-permission android:name="android.permission.RECEIVE_MMS" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.SEND_SMS" />
      <uses-permission android:name="android.permission.USE_SIP" />
      <uses-permission android:name="android.permission.WRITE_CALENDAR" />
      <uses-permission android:name="android.permission.WRITE_CALL_LOG" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
   
      <!-- … -->

</manifest>

→ In our case, we need to add only camera permission to the AndroidManifest.xml file:

<uses-permission android:name="android.permission.CAMERA" /> 

Requesting the permission: return types

request(Platform.OS === 'ios' ? PERMISSIONS.IOS.CAMERA : PERMISSIONS.ANDROID.CAMERA).then((result) => {
        setPermissionResult(result)
        console.log(result)
      });

The return types and the meanings are here:

Permission Return Types and Meanings

The flow differs by the operating system. Here, there is the flow chart for permissions for iOS and Android, which is taken from the documentation of this library.

iOS Permission FlowAndroid Permission Flow

The final product

Voila! You are ready to run your code! Basically, that’s it!

You may still encounter a few problems, like maybe your device doesn’t support that feature or the version is not valid. My advice: the first place where you check for the solution should be the documentation of the library.

While writing this post, I built an example React Native application that includes camera and microphone permissions. It shows the result of the permission and the explanation of the result.

You may play with it, see the result types, and observe when that result is returned. You may first approve it, then change the permission in Settings, open the application, and see what happens. Work with it to understand better!

You may also use the sample for testing while you are coding for specific occasions. Other than playing with the sample, you can check out the source code, and if you are having trouble with anything, you can compare it with mine!

RN Permissions Demo App

When I was about to finish my example project, I found out zoontek also made an example app for this just like mine but including every permission! You can check out zoontek’s example application here.

Key points for configuring permissions 👩🏻‍💻

✨ Permission appearance

Bear in mind that if you answer a permission request, it won’t ask for that permission again. If you want it to appear again, delete and install the app.

If you only want to change the result, you may change it on the settings of your device.

In iOS, the user must explicitly grant permission for each app to access the camera and microphone. Before your app can use the capture system for the first time, the operating system shows an alert asking the user to grant your app access to the camera. They remember the user’s response to this alert, so it doesn’t reappear each time you access a user’s camera.

The user can change permission settings for your app in Settings > Privacy in iOS, or
Settings > Apps > “Your App Name” > Permissions in Android.

✨ Android 11 permission updates

In the Android ecosystem, there have been changes that come with Android 11:

  • If your application requests permission related to camera, microphone, or location, the permission dialog includes the “Only this time” option. If it is selected, your app is granted permission for one time. It is called “one-time permission.” The second time the app is opened, the permission dialog comes up again
  • If your application hasn’t been used for a few months, the system automatically resets the sensitive runtime permissions that the user had granted for the app

To learn more, go check out Android 11’s updates.

✨ iOS 14.5: App Tracking Transparency

For iOS 14.5, iPadOS 14.5, and tvOS 14.5 and newer, developers are required to ask users for their permission to track them across apps and websites owned by other companies. One of the best features of this library is that it is up-to-date. You may add an AppTrackingTransparency (ATT) prompt and request by using react-native-permissions. Remember, only iOS devices version 14.5 or newer are able to request this.

When to ask permissions for the best user experience 👩🏻‍🎨

Asking for permissions in the onboarding of the application or asking them at the specific time that you need is still a user experience debate. There is not an answer; there are opinions.

What I would suggest is asking when you need it. As a user, seeing all the permissions in the onboarding scares me, and most of the time I don’t give the full permissions. As I said before, this is open to debate. Choose what suits you.

Conclusion

We have covered the concept of permissions and how we can get them in React Native by using react-native-permissions. I gave you the key points you may need in your permission journeys, such as the Android 11 and iOS 14.5 changes. You can find my example project in this GitHub repository.

I hope you have enjoyed this article and your users give the full permissions to get benefit from your application features! If you have any feedback, feel free to reach out. Until next time, take care! ☘️

References

 

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Irem Karaoglu Mobile App Developer. Experienced in React Native, learning iOS and game development these days.

Leave a Reply