We rely on react-native-camera with the feature of faceDetection for our application, which we have built for iOS and Android using react-native. On iOS seems to work just fine but when testing on Android, when the device is rotated the camera view just freezes (but the app keeps running) no warning or whatsoever. The rest of processes seem to be working just fine because fast refresh still shows up when new code is saved and when pressing on the screen of the app a sound alert that we have wired up still triggers. Issue happens on Android 7.0 Tablet (Asus).
package.json
{"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ." },"dependencies": {"react": "16.13.1","react-native": "0.63.1","react-native-camera": "3.33.0", },"devDependencies": {"@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@react-native-community/eslint-config": "^1.1.0","@types/jest": "^26.0.0","@types/react": "^16.9.36","@types/react-native": "^0.62.13","@types/react-native-vector-icons": "^6.4.5","@types/react-test-renderer": "^16.9.2","babel-jest": "^25.1.0","eslint": "^7.2.0","jest": "^25.1.0","metro-react-native-babel-preset": "^0.59.0","react-native-themed-styles": "^0.0.4","react-test-renderer": "16.13.1","typescript": "^3.9.5" },"jest": {"preset": "react-native" }}**minimum example (App.js):
import { useEffect, useState } from 'react';import React, { useRef, } from 'react';import { View, useWindowDimensions } from 'react-native';import { RNCamera } from 'react-native-camera';export const useDimensionsHook = () => { /** * helpers */ const updateDeviceOrientation = (width: number, height: number): 'portrait' | 'landscape' => height >= width ? 'portrait' : 'landscape'; /* states */ const { height, width } = useWindowDimensions(); const [orientation, setOrientation] = useState(updateDeviceOrientation(width, height)); /** * Update orientation */ useEffect(() => { setOrientation(updateDeviceOrientation(width, height)); }, [height, width]); return [height, orientation, width];};const faceStates = new Map<string, string>();const TouchlessCheckingScreen = (props: any) => { /* states */ const [height, orientation, width] = useDimensionsHook(); /* refs */ const cameraRef: any = useRef(); return (<View style={{ flex: 1 }}><RNCamera ref={cameraRef} flashMode={RNCamera.Constants.FlashMode.off} autoFocus={RNCamera.Constants.AutoFocus.on} whiteBalance={RNCamera.Constants.WhiteBalance.auto} androidCameraPermissionOptions={{ title: 'Permiso para utilizar la camara', message: 'Esta app necesita su permiso para utilizar la cámara', buttonPositive: 'Ok', buttonNegative: 'Cancelar' }} style={{ position: 'absolute', height: orientation === 'portrait' ? (height <= 720 ? '60%' : '40%') : '100%', width: orientation === 'portrait' ? (width > 500 ? 510 : '100%') : width > 500 ? '50%' : '100%', alignSelf: orientation === 'portrait' ? 'center' : 'flex-start', top: orientation === 'portrait'&& height > 720 ? 60 : 0 }} type={RNCamera.Constants.Type.front} faceDetectionMode={RNCamera.Constants.FaceDetection.Mode.fast} faceDetectionLandmarks={RNCamera.Constants.FaceDetection.Landmarks.all} captureAudio={false} /></View> );};export default TouchlessCheckingScreen;