TransWikia.com

react-native-camera orientation change freeze

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;

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP