react-native-timacare 3.3.28 → 3.3.30

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);
     }
   };
 
@@ -403,91 +397,7 @@ export const OCR = observer(function OCR(props: any) {
         >
           <IconBackWhite />
         </TouchableOpacity>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 2,
-            borderRadius: 4,
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-          }}
-        >
-          {/* <TouchableOpacity
-            style={{}}
-            onPress={() => {
-              setType('passport');
-            }}
-          >
-            <LinearGradient
-              colors={
-                type === 'passport'
-                  ? ['#FF8E4F', '#EF592E']
-                  : ['black', 'black']
-              }
-              style={{
-                height: 28,
-                paddingHorizontal: 8,
-                borderRadius: 4,
-                width: 100,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <Cam2Svg />
-              <MText
-                style={{
-                  color: 'white',
-                  fontSize: 12,
-                  fontWeight: 'bold',
-                  marginLeft: 5,
-                }}
-              >
-                Chụp 2 mặt
-              </MText>
-            </LinearGradient>
-          </TouchableOpacity> */}
-          {/* <View
-            style={{
-              backgroundColor: 'white',
-              width: 1,
-              borderRadius: 10,
-              height: 20,
-              marginHorizontal: 8,
-            }}
-          ></View> */}
-          {/* <TouchableOpacity
-            style={{}}
-            onPress={() => {
-              setType('nfc');
-            }}
-          >
-            <LinearGradient
-              colors={
-                type === 'nfc' ? ['#FF8E4F', '#EF592E'] : ['black', 'black']
-              }
-              style={{
-                height: 28,
-                paddingHorizontal: 8,
-                borderRadius: 4,
-                width: 100,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <ChipSvg />
-              <MText
-                style={{
-                  color: 'white',
-                  fontSize: 12,
-                  fontWeight: 'bold',
-                  marginLeft: 5,
-                }}
-              >
-                NFC
-              </MText>
-            </LinearGradient>
-          </TouchableOpacity> */}
-        </View>
+
         <MText
           style={{
             color: 'white',
@@ -518,20 +428,20 @@ 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 ? (
+            <View style={styles.passportCameraFrame}>
+              <VisionCamera
+                ref={myCamera}
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={true}
+                photo={true}
+                format={format}
+              />
+            </View>
+          ) : (
+            <ActivityIndicator />
+          )}
           <TouchableOpacity
             onPress={() => {
               pickImageFromGallery();
@@ -539,7 +449,6 @@ export const OCR = observer(function OCR(props: any) {
             style={{
               flexDirection: 'row',
               alignItems: 'center',
-              gap: 8,
               marginTop: 16,
             }}
           >
@@ -548,13 +457,14 @@ export const OCR = observer(function OCR(props: any) {
               style={{
                 color: 'white',
                 fontSize: 12,
+                marginLeft: 8,
               }}
             >
               Tải ảnh từ thư viện
             </MText>
           </TouchableOpacity>
 
-          <View style={styles.buttonContainer}>
+          <View style={[styles.buttonContainer, { bottom: insets.bottom }]}>
             <MText
               style={{
                 color: 'white',
@@ -577,12 +487,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}>
@@ -592,7 +506,9 @@ export const OCR = observer(function OCR(props: any) {
             </View>
             <View style={styles.overlayBottom} />
           </View>
-          <View style={styles.buttonContainer}>
+          <View
+            style={[styles.buttonContainer, { bottom: insets.bottom + 24 }]}
+          >
             <MText
               style={{
                 color: 'white',
@@ -881,13 +797,18 @@ const styles = StyleSheet.create({
   camera: {
     flex: 1,
   },
+  passportCameraFrame: {
+    width: Dimensions.get('window').width,
+    height: 260,
+    overflow: 'hidden',
+    backgroundColor: 'black',
+  },
   buttonContainer: {
     flex: 0,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    bottom: 40,
     left: 0,
     right: 0,
     zIndex: 1000,

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

@@ -2,15 +2,16 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  Dimensions,
   Image,
   ImageStyle,
   Platform,
+  StyleSheet,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
   Alert,
+  useWindowDimensions,
 } from 'react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
@@ -19,7 +20,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';
@@ -37,6 +42,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 export default function RegisterCamera(props: any) {
   const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const cameraHeight = (screenWidth * 4) / 3.1;
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
   const [showModal, setShowModal] = useState(false);
@@ -44,6 +51,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 +166,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,
       });
     }
@@ -235,28 +243,18 @@ export default function RegisterCamera(props: any) {
           style={[
             commonStyles.fill,
             {
-              width: Dimensions.get('window').width,
-              height: Dimensions.get('window').height,
-              // alignItems: 'center',
+              width: screenWidth,
+              height: screenHeight,
               zIndex: 1000,
             },
           ]}
         >
-          <View
-            style={{
-              marginVertical: 16,
-              marginTop: insets.top + 16,
-            }}
-          >
+          <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
             <TouchableOpacity
               onPress={() => {
                 navigation.goBack();
               }}
-              style={{
-                position: 'absolute',
-                left: 16,
-                zIndex: 100000,
-              }}
+              style={[styles.backButton, { top: insets.top + 16 }]}
             >
               <MText
                 style={{
@@ -278,27 +276,29 @@ 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 ? (
+            <View
+              style={[
+                styles.cameraFrame,
+                {
+                  width: screenWidth,
+                  height: cameraHeight,
+                  marginTop: insets.top + 64,
+                },
+              ]}
+            >
+              <VisionCamera
+                ref={myCamera}
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={true}
+                photo={true}
+                format={format}
+              />
+            </View>
+          ) : (
+            <ActivityIndicator />
+          )}
           <View
             style={{
               position: 'absolute',
@@ -317,7 +317,6 @@ export default function RegisterCamera(props: any) {
                     style={{
                       flexDirection: 'row',
                       alignItems: 'center',
-                      gap: 8,
                     }}
                   >
                     <IconUpload />
@@ -325,6 +324,7 @@ export default function RegisterCamera(props: any) {
                       style={{
                         color: 'white',
                         fontSize: 12,
+                        marginLeft: 8,
                       }}
                     >
                       Tải ảnh từ thư viện
@@ -344,7 +344,7 @@ export default function RegisterCamera(props: any) {
                 <View
                   style={{
                     alignItems: 'center',
-                    marginVertical: DeviceInfo.hasNotch() ? 24 : 16,
+                    marginTop: 16,
                   }}
                 >
                   <MButton
@@ -552,3 +552,23 @@ const $container: ViewStyle = {
   borderTopRightRadius: 26,
   borderTopLeftRadius: 26,
 };
+
+const styles = StyleSheet.create({
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    paddingBottom: 16,
+  },
+  backButton: {
+    position: 'absolute',
+    left: 16,
+    zIndex: 100000,
+  },
+  cameraFrame: {
+    overflow: 'hidden',
+    backgroundColor: 'black',
+  },
+});

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={{