How to open the Settings App in React Native App

How to open the Settings App in React Native App

Ina HranovaIna Hranova 2 minutes 12 views

Share:

We will see how to open the settings app from React Native application. Opening the settings app in React Native is very easy and yes, React Native version 0.60 adds a function to the Linking API called openSettings that will open the Settings app and display the permissions. That means Linking API provides an openSettings() function which will redirect to Settings App. In this article, I will explain how you can open “Settings App” of the device using.

Let’s import Linking

import { Linking } from 'react-native'

Then add Linking API

If we’re using an iOS device, we can handle the whole process with a single line of code:

Linking.openSettings()

So we will create an example of how to add a button and clicking to open the settings app. Let’s get started.

Firstly, install React Native app via command:

npm react-native init openAppSettings

Then open the folder openAppSetting with the following command:

cd openAppSettings && npm react-native run-ios

Let’s add button

<View style={styles.container}>
    <TouchableOpacity onPress={handlePress} style = {styles.button}>
         <Text style = {styles.text}>Open Settings</Text>
     </TouchableOpacity>
</View>

Don’t forget to import

import { Button, Linking, StyleSheet, View,TouchableOpacity,Text } from "react-native";

And now we will add a function to open the Settings App

const handlePress = async () => {
// Open the custom settings if the app has one
await Linking.openSettings(); };

And the last, let add the css code

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: "center", alignItems: "center" },
    button:{backgroundColor:'#000',padding:10},
    text:{color:'#fff',fontSize:20}
});

 

And the final here is the code:

import React from "react";
import { Button, Linking, StyleSheet, View,TouchableOpacity,Text } from "react-native";

const handlePress = async () => {
       // Open the custom settings if the app has one
       await Linking.openSettings();
};


const App = () => {
 return (
     <View style={styles.container}>
         <TouchableOpacity onPress={handlePress} style = {styles.button}>
             <Text style = {styles.text}>Open Settings</Text>
         </TouchableOpacity>
     </View>
 );
};

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: "center", alignItems: "center" },
    button:{backgroundColor:'#000',padding:10},
    text:{color:'#fff',fontSize:20}
});

export default App;