Runtime Permission In React Native

Video Demo:

There are two type of permissions: Normal and Dangerous permission.
Normal permission are like Internet permission, network permission etc and Dangerous permission contain the private data of users like contact details, gallery etc. Before Android version 6 these permissions are showed while installing the application but there is not method to change these permission during running app. But now in latest version permission system has been changed and now user can deny these permission in running app.

DOWNLOAD SOURCE CODE FROM BELOW

permissions android react native example

Step 1->
To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with RunTimePermission:
react-native init RunTimePermission

Now add permission in your AndroidManifest.xml file:
Path: android->src->AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.runtimepermissions">


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


<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" />

        </intent-filter>

      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

    </application>


</manifest>

Now you can start work on your React js classes

App.js

import React, {Component} from 'react';
import { StyleSheet, Text, View,StatusBar,Button} from 'react-native';
import { runTimePermissions } from './functions/runPermissions';
export default class App extends Component {


async btnCamera(){
    await runTimePermissions()
  }


render() {
    return (
      <View style={styles.container}>
       <StatusBar backgroundColor='#FF7043'></StatusBar>

       <View style={styles.bar}>
        <Text style={styles.txt}>Run Time Permissions</Text>
       </View>


<View style={styles.btncontainer}>
        <Button color='#FF5722' title='CAMERA' onPress={this.btnCamera.bind(this)}></Button>
       </View>


</View>
    );

  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },


bar:{
    backgroundColor:'#FF5722',
    height: 50,    
    justifyContent: 'center'
  },




btncontainer:{
    flex:1,
    backgroundColor: 'white',
    justifyContent: 'center',
    padding:10

  },


txt:{
    color: 'white',
    textAlign:'center',
    
  },


button: {
    backgroundColor: '#00aeef',
    borderColor: 'red',
    borderWidth: 5,
    borderRadius: 15,
    color: 'black'       
 }

});

runPermission.js

import {PermissionsAndroid} from 'react-native'


export async function runTimePermissions() {
    const grant= await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA
    )


if(grant==PermissionsAndroid.RESULTS.GRANTED){
        alert('Run time permissions granted')
    }else{
        alert('Run time permissions denied')
    }
    
}