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);

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.

Last updated