react-native-timacare 3.3.28 → 3.3.29

package/src/screens/camera/index.tsx

@@ -30,7 +30,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 {
   CIMBBank,
   IconBackFill,
@@ -48,6 +52,7 @@ import Store from './Store';
 import { MText } from '../../components/MText';
 import Modal from 'react-native-modal';
 import LinearGradient from 'react-native-linear-gradient';
+import RNFS from 'react-native-fs';
 
 const cameraStore = new Store();
 export const Camera = observer(function Camera(props: any) {
@@ -62,27 +67,28 @@ export const Camera = observer(function Camera(props: any) {
   const [showModal, setShowModal] = useState(false);
 
   const myCamera = useRef(null);
+  const device = useCameraDevice(front ? 'front' : '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);
     //  eslint-disable-next-line
     navigation.goBack();
     if (props.route.params.callback) {
-      props.route.params.callback(data.uri);
+      props.route.params.callback(uri);
     }
     if (props.route.params.base64) {
-      props.route.params.base64(data.base64);
+      const base64 = await RNFS.readFile(data.path, 'base64');
+      props.route.params.base64(base64);
     }
   };
 
@@ -223,42 +229,22 @@ export const Camera = observer(function Camera(props: any) {
             },
           ]}
         >
-          <RNCamera
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={{
-              width: Dimensions.get('window').width,
-              height: (Dimensions.get('window').width * 4) / 3.1,
-            }}
-            maxZoom={1}
-            zoom={props.route.params.selfie ? 0 : 0.005}
-            type={
-              front
-                ? RNCamera.Constants.Type.front
-                : RNCamera.Constants.Type.back
-            }
-            flashMode={
-              flash
-                ? RNCamera.Constants.FlashMode.on
-                : RNCamera.Constants.FlashMode.off
-            }
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-            androidRecordAudioPermissionOptions={{
-              title: 'Permission to use audio recording',
-              message: 'We need your permission to use your audio',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-          >
-            {({ 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}
+              torch={flash && device.hasTorch ? 'on' : 'off'}
+            />
+          ) : (
+            <ActivityIndicator />
+          )}
         </View>
       )}
 

package/src/screens/home/DigitalTopupItem.tsx

@@ -9,7 +9,12 @@ import {
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { IconMoney2, IconQuestion, IconTick, IconTima16 } from '../../assets/svgs';
+import {
+  IconMoney2,
+  IconQuestion,
+  IconTick,
+  IconTima16,
+} from '../../assets/svgs';
 import { formatMoney } from '../../utils';
 import { MText } from '../../components/MText';
 import Modal from 'react-native-modal';
@@ -78,7 +83,7 @@ export default function DigitalTopupItem({
         setShowModalInfo(false);
         if (callback) {
           setTimeout(() => {
-            callback()
+            callback();
           }, 300);
         }
       } else {
@@ -194,11 +199,7 @@ export default function DigitalTopupItem({
           </TouchableOpacity>
           <TouchableOpacity
             style={$action}
-            disabled={
-              item?.step === 4 || item?.step === 5 
-                ? false
-                : true
-            }
+            disabled={item?.step === 4 || item?.step === 5 ? false : true}
             onPress={() => {
               if (item?.step === 4) {
                 navigation.push(ScreenNames.OCR, {
@@ -206,15 +207,15 @@ export default function DigitalTopupItem({
                   front: true,
                 });
               } else if (item?.step === 5) {
-                  navigation.push(ScreenNames.TopupLoanInfo, {
-                    loan: item,
-                  });
-              } 
+                navigation.push(ScreenNames.TopupLoanInfo, {
+                  loan: item,
+                });
+              }
             }}
           >
             {item?.step < 4 ? (
               <IconStep2Disable />
-            ) : item?.step === 4 || item?.step === 5  ? (
+            ) : item?.step === 4 || item?.step === 5 ? (
               <IconStep2 />
             ) : (
               <IconStep2Success />
@@ -227,7 +228,7 @@ export default function DigitalTopupItem({
                 color:
                   item?.step < 4
                     ? '#999999'
-                    : item?.step === 4 || item?.step === 5 
+                    : item?.step === 4 || item?.step === 5
                     ? '#EF592E'
                     : '#333333',
               }}
@@ -314,7 +315,7 @@ export default function DigitalTopupItem({
               marginTop: 16,
             }}
           >
-            <IconQuestion/>
+            <IconQuestion />
             <MText
               style={{
                 fontSize: 10,
@@ -377,7 +378,7 @@ export default function DigitalTopupItem({
                   ? 'Chờ cập nhật thông tin tài sản'
                   : item?.step === 3
                   ? `Chờ cập nhật thông tin khoản vay`
-                  : item?.step === 4 || item?.step === 5 
+                  : item?.step === 4 || item?.step === 5
                   ? `Chờ cập nhật thông tin cá nhân`
                   : item?.step === 9
                   ? `Chờ cập nhật eKYC`
@@ -389,17 +390,16 @@ export default function DigitalTopupItem({
             {item?.step <= 1 ? (
               <TouchableOpacity
                 onPress={() => {
-                  
-                    if (item?.step === 0) {
-                      navigation.push(ScreenNames.VehicleCamera, {
-                        loan: item,
-                        front: true,
-                      });
-                    } else {
-                      navigation.push(ScreenNames.AssetInformation, {
-                        loan: item,
-                      });
-                    }
+                  if (item?.step === 0) {
+                    navigation.push(ScreenNames.VehicleCamera, {
+                      loan: item,
+                      front: true,
+                    });
+                  } else {
+                    navigation.push(ScreenNames.AssetInformation, {
+                      loan: item,
+                    });
+                  }
                 }}
               >
                 <LinearGradient
@@ -452,7 +452,7 @@ export default function DigitalTopupItem({
                   </MText>
                 </LinearGradient>
               </TouchableOpacity>
-            ) : item?.step === 4 || item?.step === 5? (
+            ) : item?.step === 4 || item?.step === 5 ? (
               <TouchableOpacity
                 onPress={() => {
                   if (item?.step === 4) {
@@ -461,11 +461,9 @@ export default function DigitalTopupItem({
                       front: true,
                     });
                   } else if (item?.step === 5) {
-                    
-                      navigation.push(ScreenNames.TopupLoanInfo, {
-                        loan: item,
-                      });
-                  
+                    navigation.push(ScreenNames.TopupLoanInfo, {
+                      loan: item,
+                    });
                   }
                 }}
               >
@@ -580,7 +578,7 @@ export default function DigitalTopupItem({
                 ? 'Vui lòng cập nhật thông tin tài sản để được giải ngân sớm nhất!'
                 : item?.step === 3
                 ? `Vui lòng cập nhật thông tin khoản vay để được giải ngân sớm nhất!`
-                : item?.step === 4 || item?.step === 5 
+                : item?.step === 4 || item?.step === 5
                 ? `Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!`
                 : item?.step === 9
                 ? `Bước cuối cùng rồi, vui lòng ký hợp đồng để được giải ngân sớm nhất nhé!`

package/src/screens/liveness/index.tsx

@@ -21,7 +21,10 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+} from 'react-native-vision-camera';
 import { IconBackFill, IconEkyc } from '../../assets/icons';
 import { myLog } from '../../utils/log';
 import { MText } from '../../components/MText';
@@ -50,6 +53,7 @@ export const LiveNess = observer(function LiveNess(props: any) {
   const [flash, setFlash] = useState(false);
   const [front, setFront] = useState(true);
   const myCamera = useRef(null);
+  const device = useCameraDevice(front ? 'front' : 'back');
   const loan = props.route.params?.loan;
   const actions = [
     'Ngẩng mặt lên trong 1 giây',
@@ -195,28 +199,41 @@ export const LiveNess = observer(function LiveNess(props: any) {
   };
 
   const recordVideo = async () => {
-    if (myCamera) {
+    if (myCamera.current) {
       setRecording(true);
-      const videoFile =
-        CachesDirectoryPath + '/' + new Date().getTime() + '.mp4';
-      const options = {
-        quality: RNCamera.Constants.VideoQuality['720p'],
-        maxDuration: 13,
-        path: videoFile,
-        /** iOS only */
-        codec: 'H264',
-        fps: 30,
-      };
       startLiveNess();
-      const data = await myCamera.current.recordAsync(options);
-      if (data.uri) {
+      const data = await new Promise((resolve, reject) => {
+        let stopped = false;
+        const timeout = setTimeout(() => {
+          if (!stopped) {
+            stopped = true;
+            myCamera.current?.stopRecording();
+          }
+        }, 13000);
+        myCamera.current.startRecording({
+          videoCodec: Platform.OS === 'ios' ? 'h264' : undefined,
+          onRecordingFinished: (video) => {
+            clearTimeout(timeout);
+            resolve(video);
+          },
+          onRecordingError: (error) => {
+            clearTimeout(timeout);
+            reject(error);
+          },
+        });
+      });
+      if (data.path) {
         setRecording(false);
         const newPath =
           CachesDirectoryPath + '/' + new Date().getTime() + '.mp4';
-        await RNFS.copyFile(data.uri, newPath).then(() => {
+        await RNFS.copyFile(data.path, newPath).then(() => {
           console.log('Copied to:', newPath);
         });
-        captureFromVideo(Platform.OS === 'android' ? data?.uri : newPath);
+        captureFromVideo(
+          Platform.OS === 'android'
+            ? 'file://' + data?.path
+            : 'file://' + newPath
+        );
       } else {
         Alert.alert(
           'Thông báo',
@@ -341,49 +358,21 @@ export const LiveNess = observer(function LiveNess(props: any) {
             },
           ]}
         >
-          {passPermission && (
-            <RNCamera
+          {passPermission && device ? (
+            <VisionCamera
               ref={myCamera}
-              defaultVideoQuality={RNCamera.Constants.VideoQuality['2160p']}
               style={{
                 width: Dimensions.get('window').width,
                 height: (Dimensions.get('window').width * 4) / 3,
               }}
-              type={
-                front
-                  ? RNCamera.Constants.Type.front
-                  : RNCamera.Constants.Type.back
-              }
-              flashMode={
-                flash
-                  ? RNCamera.Constants.FlashMode.on
-                  : RNCamera.Constants.FlashMode.off
-              }
-              androidCameraPermissionOptions={{
-                title: 'Permission to use camera',
-                message: 'We need your permission to use your camera',
-                buttonPositive: 'Ok',
-                buttonNegative: 'Cancel',
-              }}
-              androidRecordAudioPermissionOptions={{
-                title: 'Permission to use audio recording',
-                message: 'We need your permission to use your audio',
-                buttonPositive: 'Ok',
-                buttonNegative: 'Cancel',
-              }}
-              // onGoogleVisionBarcodesDetected={({ barcodes }) => {
-              //   console.log(barcodes);
-              // }}
-              // onFacesDetected={handlerFace}
-            >
-              {({ camera, status, recordAudioPermissionStatus }) => {
-                if (status !== 'READY') return <ActivityIndicator />;
-                else if (status === 'READY' && livenessStore.ready === false) {
-                  // startLiveNess()
-                  console.log(status);
-                }
-              }}
-            </RNCamera>
+              device={device}
+              isActive={true}
+              video={true}
+              audio={false}
+              torch={flash && device.hasTorch ? 'on' : 'off'}
+            />
+          ) : (
+            <ActivityIndicator />
           )}
         </View>
       }

package/src/screens/liveness-v2/index.tsx

@@ -24,7 +24,10 @@ import {
 import DeviceInfo from 'react-native-device-info';
 import { IconBackWhite, IconEkyc } from '../../assets/icons';
 import { MText } from '../../components/MText';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+} from 'react-native-vision-camera';
 import livenessStore from '../liveness/LivenessStore';
 import { commonStyles } from '../CommonStyles';
 import { ScreenNames } from '../../navigation';
@@ -51,6 +54,7 @@ export const LivenessV2 = observer(function LivenessV2(props: any) {
   const interval = useRef<any>(null);
   const [passPermission, setPassPermission] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const device = useCameraDevice('front');
 
   const renderHint = (key: string) => {
     switch (key) {
@@ -356,28 +360,39 @@ export const LivenessV2 = observer(function LivenessV2(props: any) {
       livenessStore.saveLiveness(loan.id);
       return;
     }
-    if (cameraRef) {
-      const videoFile =
-        CachesDirectoryPath + '/' + new Date().getTime() + '.mp4';
-      const options = {
-        quality: RNCamera.Constants.VideoQuality['720p'],
-        maxDuration: 3,
-        path: videoFile,
-        /** iOS only */
-        codec: 'H264',
-        fps: 30,
-      };
-      const data = await cameraRef.current.recordAsync(options);
-      if (data.uri) {
+    if (cameraRef.current) {
+      const data = await new Promise((resolve, reject) => {
+        let stopped = false;
+        const timeout = setTimeout(() => {
+          if (!stopped) {
+            stopped = true;
+            cameraRef.current?.stopRecording();
+          }
+        }, 3000);
+        cameraRef.current.startRecording({
+          videoCodec: Platform.OS === 'ios' ? 'h264' : undefined,
+          onRecordingFinished: (video) => {
+            clearTimeout(timeout);
+            resolve(video);
+          },
+          onRecordingError: (error) => {
+            clearTimeout(timeout);
+            reject(error);
+          },
+        });
+      });
+      if (data.path) {
         setIsLoading(true);
         // captureFromVideo(data.uri);
         const newPath =
           CachesDirectoryPath + '/' + new Date().getTime() + '.mp4';
-        await RNFS.copyFile(data.uri, newPath).then(() => {
+        await RNFS.copyFile(data.path, newPath).then(() => {
           console.log('Copied to:', newPath);
         });
         const thump = await extractFramesFromVideo(
-          Platform.OS === 'android' ? data.uri : newPath
+          Platform.OS === 'android'
+            ? 'file://' + data.path
+            : 'file://' + newPath
         );
         if (thump.length > 0) {
           uploadLiveness(thump);
@@ -465,47 +480,36 @@ export const LivenessV2 = observer(function LivenessV2(props: any) {
       </View>
 
       <View style={styles.preview}>
-        <RNCamera
-          playSoundOnCapture={false}
-          ref={cameraRef}
-          style={StyleSheet.absoluteFill}
-          captureAudio={false}
-          type={RNCamera.Constants.Type.front}
-          androidCameraPermissionOptions={{
-            title: 'Permission to use camera',
-            message: 'We need your permission to use your camera',
-            buttonPositive: 'Ok',
-            buttonNegative: 'Cancel',
-          }}
-          androidRecordAudioPermissionOptions={{
-            title: 'Permission to use audio recording',
-            message: 'We need your permission to use your audio',
-            buttonPositive: 'Ok',
-            buttonNegative: 'Cancel',
+        {passPermission && device ? (
+          <VisionCamera
+            ref={cameraRef}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={true}
+            video={true}
+            audio={false}
+          />
+        ) : null}
+        <View
+          style={{
+            height: '100%',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
-          autoFocus="on"
         >
-          <View
+          {renderImg(livenessStore.hintAction)}
+          <MText
             style={{
-              height: '100%',
-              width: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
+              color: 'white',
+              fontSize: 16,
+              marginTop: 8,
+              fontWeight: '400',
             }}
           >
-            {renderImg(livenessStore.hintAction)}
-            <MText
-              style={{
-                color: 'white',
-                fontSize: 16,
-                marginTop: 8,
-                fontWeight: '400',
-              }}
-            >
-              {renderHint(livenessStore.hintAction)}
-            </MText>
-          </View>
-        </RNCamera>
+            {renderHint(livenessStore.hintAction)}
+          </MText>
+        </View>
       </View>
 
       <View style={styles.circularProgress}>
@@ -518,10 +522,10 @@ export const LivenessV2 = observer(function LivenessV2(props: any) {
             livenessStore.listAction.length === 3
               ? 0
               : livenessStore.listAction.length === 2
-                ? 100 / 3
-                : livenessStore.listAction.length === 1
-                  ? (2 / 3) * 100
-                  : 100
+              ? 100 / 3
+              : livenessStore.listAction.length === 1
+              ? (2 / 3) * 100
+              : 100
           }
           radius={PREVIEW_SIZE / 2}
           inActiveStrokeOpacity={0.5}

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}>