React Native: How To Open App Settings Page

React Native has a Linking module to manage the interaction with other applications in the device. In this article, I will explain how you can open “Application Setting Page” of the device using.

Sample Case

Before I explain how to do this, I’ll talk about an example case where we might need this:

You need to get location permission within the application from a user using an iOS operating system and you asked for permission. But user did not agree to grant this permission the first time. In this case, you cannot ask your user for location permission the second time. In this case, the only thing to do is to direct the user to the settings page of our application and make it manually allow it.

Now that we have explained our example situation, we can move on to how we can redirect our user to the “settings page of our application”.

Open App Settings Page

iOS

If our user is using an iOS operating system, we can handle the whole process with a single line of code.

import { Linking } from 'react-native'Linking.openURL('app-settings:')

When we run the above code, our user will be successfully directed to the settings page. On this page, you can view all settings related to our application.

Android

But when it comes to the Android operating system, our one-line code above unfortunately doesn’t work. In this case, we should use another way.

On the Android side, we will launch an Activity using the library called IntentLauncher. But first of all, we need the package-name of our application. We’ll go through the following ways to learn our package-name:

Finding package-name using Expo:

• First of all, we install the required package:

expo install expo-constants

• Then import the package we installed into the component we will use and define our variable named pkg.

import Constants from 'expo-constants'const pkg = Constants.manifest.releaseChannel
? Constants.manifest.android.package 
: 'host.exp.exponent'

If we are using expo application, our package name will be host.exp.exponent. If we are using the published version of our application (standalone build) then we get the package name we defined in the app.json file.

Finding package-name without using Expo:

• First of all, we install the required package:

npm install --save react-native-device-info

• Then import the package we installed into the component we will use and define our variable named pkg.

import DeviceInfo from 'react-native-device-info';const pkg = DeviceInfo.getBundleId();

Now that we know package-name of our application, we have to start an Activity using it. For this, we will use the package called IntentLauncher.

Adding the IntentLauncher library to our project using Expo:

• First of all, we install the required package:

expo install expo-intent-launcher

• Then import the package we installed into the component we will use:

import * as IntentLauncher from 'expo-intent-launcher'

To add IntentLauncher library to our project without using Expo:

• First of all, we install the required package:

npm install react-native-intent-launcher

• Then linking process:

react-native link react-native-intent-launcher

• And finally, import the package we installed into the component we will use:

import IntentLauncher, { IntentConstant } from 'react-native-intent-launcher'

We now have the pkg variable (our app’s package name) and the library we will use to start a new Activity. Now we need to start Activity.

Launching an Activity Using Expo

IntentLauncher.startActivityAsync(
  IntentLauncher.ACTION_APPLICATION_DETAILS_SETTINGS,
  { data: 'package:' + pkg }
)

Launching an Activity Without Using Expo

IntentLauncher.startActivity({
  action: 'android.settings.APPLICATION_DETAILS_SETTINGS',
  data: 'package:' + pkg
})

Now, we can direct our users who use both iOS and Android operating systems to the settings page of our application. If we look at the final version of code:

With Expo:

import Constants from 'expo-constants'
import * as IntentLauncher from 'expo-intent-launcher'const pkg = Constants.manifest.releaseChannel
? Constants.manifest.android.package 
: 'host.exp.exponent'const openAppSettings = () => {
  if (Platform.OS === 'ios') {
    Linking.openURL('app-settings:')
  } else {
    IntentLauncher.startActivityAsync(
      IntentLauncher.ACTION_APPLICATION_DETAILS_SETTINGS,
      { data: 'package:' + pkg },
    )
  }
}

Without Expo:

import DeviceInfo from 'react-native-device-info';
import IntentLauncher, { IntentConstant } from 'react-native-intent-launcher'const pkg = DeviceInfo.getBundleId();const openAppSettings = () => {
  if (Platform.OS === 'ios') {
    Linking.openURL('app-settings:')
  } else {
    IntentLauncher.startActivity({
      action: 'android.settings.APPLICATION_DETAILS_SETTINGS',
      data: 'package:' + pkg
    })
  }
}

If you have any questions or anything else please do not hesitate to get in touch. With health …, Please mention in comment.