Android application has its own secure infrastructure to make application user feel that he is completely secure from any threat and also he can manage to give some of his own data as his own permissions. Here comes the new android’s Dangerous runtime permissions request group in which the application developer directly ask the application user for his permission before accessing his personal data like Device Location, Access Camera, Access device storage, Access device Contacts etc. In this tutorial we would going to make a React Native Runtime PermissionsAndroid Request Android Example Tutorial. We would use react native’s own PermissionsAndroid component to implement all the runtime permissions in android. So let’s get started .
Note: These permissions would only work in device which has android operating system grater than Marshmallow or has Marshmallow 6.0 API Level 23. Below API Level 23 it will automatically grant all the permissions. Here is the list of all available permissions in Android.
Contents in this project React Native Runtime PermissionsAndroid Request Android Example Tutorial:
1. The first step is to add the permission itself in AndroidManifest.xml file, So open YourReactNativeProject-> android -> app -> src -> main -> AndroidManifest.xml file. We are creating this example with device location permission so we are adding the device location permission known as ACCESS_FINE_LOCATION in our AndroidManifest.xml file. You have to add your own permission here.
|
1
|
<uses–permission android:name=“android.permission.ACCESS_FINE_LOCATION”/>
|
2. Now we need to specify android:minSdkVersion and android:targetSdkVersion in our AndroidManifest.xml . This step is very important.
|
1
2
3
|
<uses–sdk android:minSdkVersion=“16”
android:targetSdkVersion=“23”
/>
|
Code of AndroidManifest.xml file after adding above all codes:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
package=“com.newproject”>
<uses–permission android:name=“android.permission.INTERNET” />
<uses–permission android:name=“android.permission.SYSTEM_ALERT_WINDOW”/>
<uses–permission android:name=“android.permission.ACCESS_FINE_LOCATION”/>
<uses–sdk android:minSdkVersion=“16”
android:targetSdkVersion=“23”
/>
<application
android:name=“.MainApplication”
android:label=“@string/app_name”
android:icon=“@mipmap/ic_launcher”
android:allowBackup=“false”
android:theme=“@style/AppTheme”>
<activity
android:name=“.MainActivity”
android:label=“@string/app_name”
android:configChanges=“keyboard|keyboardHidden|orientation|screenSize”
android:windowSoftInputMode=“adjustResize”>
<intent–filter>
<action android:name=“android.intent.action.MAIN” />
<category android:name=“android.intent.category.LAUNCHER” />
<action android:name=“android.intent.action.DOWNLOAD_COMPLETE”/>
</intent–filter>
</activity>
<activity android:name=“com.facebook.react.devsupport.DevSettingsActivity” />
</application>
</manifest>
|
3. Open YourReactNativeProject -> android -> app -> build.gradle file and find targetSdkVersion and set its to 23 like targetSdkVersion 23 in default Config block.
4. Open your project’s App.js file and import Platform, StyleSheet, View, PermissionsAndroid, Text and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from ‘react-native’;
|
5. Create a Async function name as request_location_runtime_permission() with export syntax out of your main class. This function has its own body and defined individually out the main class body, This function is used to request runtime permission.
|
1
2
3
4
5
6
|
export async function request_location_runtime_permission() {
}
|
6. Create the try and catch block to handle the exception generated runtime and then we need to request the runtime permission. As you can see in below code we have make a constant named as granted which would store the result after enabling and disabling the result.
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION : Used to access the runtime permission, You need to define your own permission here and most important thing is the same permission you need to add in AndroidManifest.xml file.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
export async function request_location_runtime_permission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
‘title’: ‘ReactNativeCode Location Permission’,
‘message’: ‘ReactNativeCode App needs access to your location ‘
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert(“Location Permission Granted.”);
}
else {
Alert.alert(“Location Permission Not Granted”);
}
} catch (err) {
console.warn(err)
}
}
|
7. Create main export View class named as App . This is our main class and we would call the above permissions functions inside this class. As you can see in below class code we are calling the request_location_runtime_permission() inside the componentDidMount() function. we need to make the componentDidMount() async to use the async function and to call the async function we have to use await keyword.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
export default class App extends Component {
async componentDidMount() {
await request_location_runtime_permission()
}
render() {
return (
<View style={styles.MainContainer}>
<Text>React Native Runtime Permission Request</Text>
</View>
);
}
}
|
8. Code for Style CSS.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
margin: 20
}
});
|
9. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from ‘react-native’;
export async function request_location_runtime_permission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
‘title’: ‘ReactNativeCode Location Permission’,
‘message’: ‘ReactNativeCode App needs access to your location ‘
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert(“Location Permission Granted.”);
}
else {
Alert.alert(“Location Permission Not Granted”);
}
} catch (err) {
console.warn(err)
}
}
export default class App extends Component {
async componentDidMount() {
await request_location_runtime_permission()
}
render() {
return (
<View style={styles.MainContainer}>
<Text>React Native Runtime Permission Request</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
margin: 20
}
});
|
Screenshots:
Also Read :
React Native Flip Image Card View Horizontally Using Animation Android iOS Example Tutorial
React Native Typing Text Animation iOS Android Example Tutorial
System UI isn’t responding Android Emulator React Native Error Solution
React Native Check Text Input is Empty or Not Android iOS Tutorial
Create Simple Splash Screen in React Native Android iOS App Tutorial
