Stack Overflow Asked by xtealer on December 18, 2021
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;
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP