The current application uses the following directive in AndroidManifest.xml:
<activity
// ...
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:screenOrientation="portrait"
// ...
It's using the WebView component to display Youtube videos:
<WebView
height={webViewRoundedHeight}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={false}
useWebKit={true}
allowsFullscreenVideo={true}
/>
The problem is that when the user watches a video and changes to full screen mode, the device is still locked to portrait. iOS handles this, so it's an Android only problem.
I've tried stripping back the WebView attributes to the minimal required to allow a video to go full screen. That had no effect on rotation.
If I remove the ndroid:screenOrientation="portrait" directive from the manifest, I can rotate the video but the styling across the rest of the app is broken when the user moves to landscape mode.
The app is not using Expo and is pre-AndroidX. This seems to have prevented me from using the react-native-orientation or react-native-orientation-locker packages, as the build fails. (I've tried following instructions for installation, but after a series of increasingly obscure error messages I'm running out of time I can spend on this feature.) It also means I don't have access to the expo screen orientation package (and adding expo to the existing app looks like it could cause more time consuming issues: Converting Existing React Native Projects to Expo )
If I could get any of the orientation packages working I could in theory remove the portrait directive from the manifest file, lock the orientation in code (either in App.js or in individual screens depending on the scope of the effect), then send a message from the JS inside the web view when the user goes full screen. I could catch this in RN JS code and relax the orientation lock until the user exits full screen. However, I'm stuck trying to create a lock that I can manipulate from JS.
Alternative ideas would be most welcome.
