React Native Webview (digicam, getUserMedia) double request of permissions on iOS 15

What we do?

We’re constructing a React Native software for each iOS and Android platforms. The applying has an exterior web site with digicam manipulations inside, opened by way of react-native-webview module. From our experiments we noticed that to make it work we should ask end-user the digicam permissions twice:

1. (As soon as) when person firstly open the appliance after set up on
   his/her gadget
2. (Each time) when React Native webview element is
   loaded and the getUserMedia technique is executing inside it.

Each requests present to the person popups with textual content to permit digicam entry: the primary for “application_name” and the second is for “url_inside_webview” –
image scheme

It’s a important subject for us as a result of:

1. Asking permissions (inside webview) each time person opens the app
   webview element (and it’s executing) is a foul UX.
2. We confronted a rejection on software launch to Apple Retailer throughout
   Apple overview. The remark of reviewer pointed to precisely this second
   about “asking permissions twice and each time the net element
   masses”

Technical particulars to breed the difficulty

OS: Apple iOS 15.1 and newer

React Native Dependencies:

"dependencies": {
  "react": "17.0.2",
  "react-native": "0.66.0",
  "react-native-permissions": "^3.0.6",
  "react-native-webview": "^11.14.0"
}

Setup permissions in react-native:

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
// ... //
request(PERMISSIONS.IOS.CAMERA)
    .then((statuses) => {
        if (statuses[PERMISSIONS.IOS.CAMERA] === RESULTS.GRANTED) {
            setWebviewRenderAvailable(true);
        });
    });

Configuring in ios/Podfile:

goal 'MyAwesomeProject' do
  # Examine permissions for digicam

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

finish

Replace Information.plist:

<?xml model="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist model="1.0">
<dict>

  <!-- ... -->
  <key>NSCameraUsageDescription</key>
  <string>Digicam Entry</string>
  <!-- ... -->

</dict>
</plist>

Begin webview:

import { WebView } from 'react-native-webview';
// ... //
<WebView
    scalesPageToFit={true}
    startInLoadingState
    useWebKit
    originWhitelist={['*']}
    allowsInlineMediaPlayback
    mediaPlaybackRequiresUserAction={false}
    supply={{ uri: '<entry hyperlink>' }}
    fashion={{marginTop: 1, width: widthWebview, top: heightWebview }}
    ref={webView}
    javaScriptEnabled={true}
    cacheEnabled={true}
    onMessage={onMessage}
    onLoadEnd={onLoaded}
  />

Our observations

• cacheMode props (in React Native WebView) does not assist with express
  permission request subject.

For native iOS software the persistent permissions for WKWebView appeared in iOS 15:

Ideally, we want to:

1. have a persistent permissions for exterior URL within webview for
   React Native software

2. delegate / copy permissions (to digicam) from iOS software degree
   to webview

We want to know if there any choices to attain the specified behaviour?
Is it even basically doable for an app to ask permission solely as soon as?