react-native-timacare 3.3.27 → 3.3.29

package/src/screens/mrz-scanner/index.tsx

@@ -12,7 +12,11 @@ import {
   NativeModules,
 } from 'react-native';
 import { StackActions, useNavigation } from '@react-navigation/native';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 import TextRecognition from '@react-native-ml-kit/text-recognition';
 import {
   openSettings,
@@ -39,6 +43,10 @@ const MRZScanner = (props: any) => {
   const [mrzData, setMrzData] = useState('');
   const [passPermission, setPassPermission] = useState(false);
   const cameraRef = useRef(null);
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
 
   const requestPermissions = () => {
     request(
@@ -224,20 +232,27 @@ const MRZScanner = (props: any) => {
 
   const takePicture = async () => {
     if (cameraRef.current) {
-      const options = { quality: 0.8, base64: true };
-      const data = await cameraRef.current.takePictureAsync(options);
-      await handleTextRecognition(data.uri);
+      const data = await cameraRef.current.takePhoto({
+        qualityPrioritization: 'speed',
+      });
+      await handleTextRecognition('file://' + data.path);
     }
   };
 
   return (
     <View style={styles.container}>
-      <RNCamera
-        ref={cameraRef}
-        style={styles.camera}
-        type={RNCamera.Constants.Type.back}
-        captureAudio={false}
-      ></RNCamera>
+      {passPermission && device ? (
+        <VisionCamera
+          ref={cameraRef}
+          style={styles.camera}
+          device={device}
+          isActive={true}
+          photo={true}
+          format={format}
+        />
+      ) : (
+        <View style={styles.camera} />
+      )}
       <View style={styles.overlay}>
         <View style={styles.overlayTop} />
         <View style={styles.overlayCenter}>

package/src/screens/toan-trinh-so/OCR.tsx

@@ -24,7 +24,11 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 import Modal from 'react-native-modal';
 import LinearGradient from 'react-native-linear-gradient';
 import {
@@ -65,6 +69,10 @@ export const OCR = observer(function OCR(props: any) {
   const [passPermission, setPassPermission] = useState(false);
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const myCamera = useRef(null);
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
 
   const requestPermissions = () => {
     request(
@@ -176,15 +184,6 @@ export const OCR = observer(function OCR(props: any) {
     loadIntro();
   }, []);
 
-  useEffect(() => {
-    const unsubscribe = navigation.addListener('blur', () => {
-      // khi màn hình mất focus (chuyển sang màn hình khác)
-      myCamera.current?.pausePreview(); // hoặc stopRecording nếu đang quay
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-
   const saveDataNfc = async (body) => {
     try {
       const response = await Api.getInstance().saveNfcInfo({
@@ -285,39 +284,34 @@ export const OCR = observer(function OCR(props: any) {
 
   const scanNfc = async () => {
     if (myCamera.current) {
-      const options = { quality: 0.8, base64: true };
-      const data = await myCamera.current.takePictureAsync(options);
-      await handleTextRecognition(data.uri);
+      const data = await myCamera.current.takePhoto({
+        qualityPrioritization: 'speed',
+      });
+      await handleTextRecognition('file://' + data.path);
     }
   };
 
   const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
     setTaking(true);
-    const options = {
-      // width: 720,
-      base64: true,
-      pauseAfterCapture: true,
-      fixOrientation: false,
-      forceUpOrientation: false,
-      orientation: RNCamera.Constants.Orientation.portrait,
-      quality: 0.9,
-      pictureSize: '1280x720',
-    };
-    const data = await myCamera.current.takePictureAsync(options);
+    const data = await myCamera.current.takePhoto({
+      qualityPrioritization: 'quality',
+    });
+    const uri = 'file://' + data.path;
     setTaking(false);
     if (props?.route?.params?.front && !props.route?.params?.callback) {
       navigation.push(ScreenNames.TTSNationalIDFront, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     } else if (!props?.route?.params?.front && !props.route?.params?.callback) {
       navigation.push(ScreenNames.TTSNationalIDBack, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     } else {
       navigation.goBack();
-      props.route?.params?.callback(data?.uri);
+      props.route?.params?.callback(uri);
     }
   };
 
@@ -518,20 +512,22 @@ export const OCR = observer(function OCR(props: any) {
             },
           ]}
         >
-          <RNCamera
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={{
-              width: Dimensions.get('window').width,
-              height: 260,
-              overflow: 'hidden',
-            }}
-            maxZoom={1}
-          >
-            {({ camera, status, recordAudioPermissionStatus }) => {
-              if (status !== 'READY') return <ActivityIndicator />;
-            }}
-          </RNCamera>
+          {device ? (
+            <VisionCamera
+              ref={myCamera}
+              style={{
+                width: Dimensions.get('window').width,
+                height: 260,
+                overflow: 'hidden',
+              }}
+              device={device}
+              isActive={true}
+              photo={true}
+              format={format}
+            />
+          ) : (
+            <ActivityIndicator />
+          )}
           <TouchableOpacity
             onPress={() => {
               pickImageFromGallery();
@@ -554,7 +550,7 @@ export const OCR = observer(function OCR(props: any) {
             </MText>
           </TouchableOpacity>
 
-          <View style={styles.buttonContainer}>
+          <View style={[styles.buttonContainer, { bottom: insets.bottom }]}>
             <MText
               style={{
                 color: 'white',
@@ -577,12 +573,16 @@ export const OCR = observer(function OCR(props: any) {
         </View>
       ) : passPermission && type === 'nfc' && shouldRenderCamera ? (
         <>
-          <RNCamera
-            ref={myCamera}
-            style={styles.camera}
-            type={RNCamera.Constants.Type.back}
-            captureAudio={false}
-          ></RNCamera>
+          {device ? (
+            <VisionCamera
+              ref={myCamera}
+              style={styles.camera}
+              device={device}
+              isActive={true}
+              photo={true}
+              format={format}
+            />
+          ) : null}
           <View style={styles.overlay}>
             <View style={styles.overlayTop} />
             <View style={styles.overlayCenter}>
@@ -887,7 +887,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    bottom: 40,
     left: 0,
     right: 0,
     zIndex: 1000,

package/src/screens/toan-trinh-so/RegisterCamera.tsx

@@ -19,7 +19,11 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
@@ -44,6 +48,10 @@ export default function RegisterCamera(props: any) {
   const [passPermission, setPassPermission] = useState(false);
 
   const myCamera = useRef(null);
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
 
   const requestPermissions = () => {
     request(
@@ -155,27 +163,24 @@ export default function RegisterCamera(props: any) {
   }, [isFocused]);
 
   const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
     setTaking(true);
-    const options = {
-      // width: 720,
-      pauseAfterCapture: true,
-      fixOrientation: false,
-      forceUpOrientation: false,
-      orientation: RNCamera.Constants.Orientation.portrait,
-    };
-    const data = await myCamera.current.takePictureAsync(options);
+    const data = await myCamera.current.takePhoto({
+      qualityPrioritization: 'quality',
+    });
+    const uri = 'file://' + data.path;
     setTaking(false);
     if (props?.route?.params?.front) {
       navigation.push(ScreenNames.VehicleRegistration, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     } else if (props.route?.params?.callback) {
       navigation.goBack();
-      props.route?.params?.callback(data?.uri);
+      props.route?.params?.callback(uri);
     } else {
       navigation.push(ScreenNames.RegisterBack, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     }
@@ -278,27 +283,21 @@ export default function RegisterCamera(props: any) {
                 : 'Mặt trước Đăng kiểm xe'}
             </MText>
           </View>
-          <RNCamera
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={{
-              width: Dimensions.get('window').width,
-              height: (Dimensions.get('window').width * 4) / 3.1,
-            }}
-            maxZoom={1}
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-            quality={0.8}
-            pictureSize="1280x720"
-          >
-            {({ camera, status, recordAudioPermissionStatus }) => {
-              if (status !== 'READY') return <ActivityIndicator />;
-            }}
-          </RNCamera>
+          {device ? (
+            <VisionCamera
+              ref={myCamera}
+              style={{
+                width: Dimensions.get('window').width,
+                height: (Dimensions.get('window').width * 4) / 3.1,
+              }}
+              device={device}
+              isActive={true}
+              photo={true}
+              format={format}
+            />
+          ) : (
+            <ActivityIndicator />
+          )}
           <View
             style={{
               position: 'absolute',

package/src/screens/toan-trinh-so/TTSSelfie.tsx

@@ -1,12 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  ActivityIndicator,
-  Alert,
-  Dimensions,
-  Platform,
-  View,
-} from 'react-native';
+import { Alert, Dimensions, Platform, View } from 'react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
   request,
@@ -14,7 +8,6 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
 import { MText } from '../../components/MText';
 import MButton from '../../components/MButton';
 import { commonStyles } from '../CommonStyles';
@@ -25,6 +18,11 @@ import { ScreenNames } from '../../navigation';
 import appStore from '../../AppStore';
 import { logEvent, logEventFb } from '../../utils';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 
 export default function TTSSelfie(props: any) {
   const insets = useSafeAreaInsets();
@@ -34,9 +32,13 @@ export default function TTSSelfie(props: any) {
   const [taking, setTaking] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [passPermission, setPassPermission] = useState(false);
-
+  const device = useCameraDevice('front');
   const myCamera = useRef(null);
 
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 1280 } },
+  ]);
+
   const requestPermissions = () => {
     request(
       Platform.OS === 'ios'
@@ -152,25 +154,21 @@ export default function TTSSelfie(props: any) {
   }, [isFocused]);
 
   const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
     setTaking(true);
-    const options = {
-      width: 720,
-      pauseAfterCapture: true,
-      fixOrientation: false,
-      forceUpOrientation: false,
-      orientation: RNCamera.Constants.Orientation.portrait,
-    };
-    const data = await myCamera.current.takePictureAsync(options);
+    const data = await myCamera.current.takePhoto({
+      qualityPrioritization: 'speed',
+    });
     setTaking(false);
-    if (data.uri) {
+    if (data) {
       setIsLoading(true);
       const formData = new FormData();
       formData.append('LoanBriefId', props?.route?.params?.loan?.id);
       formData.append('TypeDocumentId', 125); // Anh selfie
       formData.append('image', {
-        uri: data.uri,
+        uri: 'file://' + data.path,
         type: 'image/jpg',
-        name: 'image.jpg',
+        name: 'selfie.jpg',
       });
       const response = await Api.getInstance().uploadImageAutoDE(formData);
       setIsLoading(false);
@@ -246,27 +244,18 @@ export default function TTSSelfie(props: any) {
               Xác thực khuôn mặt
             </MText>
           </View>
-          <RNCamera
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
+
+          <Camera
             style={{
               width: Dimensions.get('window').width,
               height: (Dimensions.get('window').width * 4) / 3.1,
             }}
-            type={RNCamera.Constants.Type.front}
-            maxZoom={1}
-            captureAudio={false}
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-          >
-            {({ camera, status, recordAudioPermissionStatus }) => {
-              if (status !== 'READY') return <ActivityIndicator />;
-            }}
-          </RNCamera>
+            ref={myCamera}
+            device={device}
+            isActive={true}
+            photo={true}
+            format={format}
+          />
 
           <View
             style={{

package/src/screens/toan-trinh-so/VehicleCamera.tsx

@@ -29,7 +29,11 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 import { commonStyles } from '../CommonStyles';
 import { ScreenNames } from '../../navigation';
 import { load, OCR_V2, save } from '../../utils/storage';
@@ -64,30 +68,30 @@ export default function VehicleCamera(props: any) {
   const [passPermission, setPassPermission] = useState(false);
 
   const myCamera = useRef(null);
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
 
   const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
     setTaking(true);
-    const options = {
-      // width: 720,
-      base64: true,
-      pauseAfterCapture: true,
-      fixOrientation: false,
-      forceUpOrientation: false,
-      orientation: RNCamera.Constants.Orientation.portrait,
-    };
-    const data = await myCamera.current.takePictureAsync(options);
+    const data = await myCamera.current.takePhoto({
+      qualityPrioritization: 'quality',
+    });
+    const uri = 'file://' + data.path;
     setTaking(false);
     if (props?.route?.params?.front) {
       navigation.push(ScreenNames.VehicleRegistrationFront, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     } else if (props.route?.params?.callback) {
       navigation.goBack();
-      props.route?.params?.callback(data?.uri);
+      props.route?.params?.callback(uri);
     } else {
       navigation.push(ScreenNames.VehicleRegistrationBack, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     }
@@ -257,73 +261,68 @@ export default function VehicleCamera(props: any) {
     >
       {passPermission && shouldRenderCamera ? (
         <View style={{ flex: 1 }}>
-          <RNCamera
-            key={cameraKey}
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={{
-              flex: 1,
-            }}
-            maxZoom={1}
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-            quality={0.9}
-            pictureSize="1280x720"
-          >
-            <View style={$overlay}>
-              <View style={$darkOverlayTop} />
-              <View style={$overlayRow}>
-                <View style={$darkOverlaySide} />
-                <View style={$frameBorder}>
-                  <Corner
-                    style={{
-                      top: 0,
-                      left: 0,
-                      borderTopWidth: CORNER_WIDTH,
-                      borderLeftWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      top: 0,
-                      right: 0,
-                      borderTopWidth: CORNER_WIDTH,
-                      borderRightWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      bottom: 0,
-                      left: 0,
-                      borderBottomWidth: CORNER_WIDTH,
-                      borderLeftWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      bottom: 0,
-                      right: 0,
-                      borderBottomWidth: CORNER_WIDTH,
-                      borderRightWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-                </View>
-                <View style={$darkOverlaySide} />
+          {device ? (
+            <VisionCamera
+              key={cameraKey}
+              ref={myCamera}
+              style={{
+                flex: 1,
+              }}
+              device={device}
+              isActive={true}
+              photo={true}
+              format={format}
+            />
+          ) : null}
+          <View style={$overlay}>
+            <View style={$darkOverlayTop} />
+            <View style={$overlayRow}>
+              <View style={$darkOverlaySide} />
+              <View style={$frameBorder}>
+                <Corner
+                  style={{
+                    top: 0,
+                    left: 0,
+                    borderTopWidth: CORNER_WIDTH,
+                    borderLeftWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    top: 0,
+                    right: 0,
+                    borderTopWidth: CORNER_WIDTH,
+                    borderRightWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    bottom: 0,
+                    left: 0,
+                    borderBottomWidth: CORNER_WIDTH,
+                    borderLeftWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    bottom: 0,
+                    right: 0,
+                    borderBottomWidth: CORNER_WIDTH,
+                    borderRightWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
               </View>
-              <View style={$darkOverlayBottom} />
+              <View style={$darkOverlaySide} />
             </View>
-          </RNCamera>
+            <View style={$darkOverlayBottom} />
+          </View>
 
           <View
             style={{