Camera access permissions (React Native app only)

This page describes the necessary modifications to app permission manifest, necessary to make React Native integration work correctly.

Requirements

react-native >= 0.63
react-native-permissions >= 3.0.6
react-native-webview >= 11.15

Install necessary libraries:

yarn add react-native-permissions react-native-webview

Declaration of necesary access to camera

For operating the camera access should be granted to LIQA.

Start a component where LIQA should be integrated. WebView technology must be imported here. Add following lines in this component:

import { WebView } from 'react-native-webview';
import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Dimensions } from 'react-native';

Set the state of the component for conditional rendering of the Webview. Firstly the application should get the rights to the media, and only then the webview should be rendered.

const [webviewRenderAvailable, setWebviewRenderAvailable] = useState(false);

iOS

React Native, component with webview:

request(PERMISSIONS.IOS.CAMERA)
    .then((statuses) => {
        /* 
            RESULTS.GRANTED -- The permission is granted;
            RESULTS.BLOCKED -- The permission is denied and not requestable anymore;
            RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
            RESULTS.DENIED -- The permission has not been requested / is denied but requestable;
            RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
        */
        if (statuses[PERMISSIONS.IOS.CAMERA] == RESULTS.GRANTED) {
            setWebviewRenderAvailable(true);
        });
        
    });

Add this line to your ios/Podfile:

target 'YourAwesomeProject' do
  # Check permissions for camera

  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'RNPermissions', :path => '../node_modules/react-native-permissions'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"

end

Update your Info.plist with wanted permissions usage descriptions:

<?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>

  <!-- ... -->

  <key>NSCameraUsageDescription</key>
  <string>Camera Access</string>

  <!-- ... -->

</dict>
</plist>

Then run

npm i && cd ios && pod install

Build & test the app.

Android

React Native, component with webview:

request(PERMISSIONS.ANDROID.CAMERA)
    .then((result) => {
        /* 
            RESULTS.GRANTED -- The permission is granted;
            RESULTS.BLOCKED -- The permission is denied and not requestable anymore;
            RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
            RESULTS.DENIED -- The permission has not been requested / is denied but requestable;
            RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
        */
        if (result == RESULTS.GRANTED) {
            setWebviewRenderAvailable(true);
        }
    });

Add the following lines to android/settings.gradle

include ':react-native-permissions'
project(':react-native-permissions').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-permissions/android')

Add the implementation line to the dependencies in android/app/build.gradle

dependencies {
  // ...
  implementation project(':react-native-permissions')
}

Add the import and link the package in MainApplication.java:

import com.zoontek.rnpermissions.RNPermissionsPackage; // <- add the RNPermissionsPackage import

public class MainApplication extends Application implements ReactApplication {

  // ...

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    /* ... */
    /*   React-native 0.60 and above supports auto-linking. */ 
    /*   I commented out my packages because they are no longer needed. */
    // packages.add(new RNPermissionsPackage());
    return packages;
  }

  // ...
}

Add all permissions to your app android/app/src/main/AndroidManifest.xml file:

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

  <!-- ... -->

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature android:name="android.hardware.camera" android:required="true" />
  <uses-feature android:name="android.hardware.camera.front" android:required="true" />

  <!-- ... -->

</manifest>

Build & test the app.

Now permissions are setup. You can return to main API page Initialization & Start