react-native-timacare 3.1.38 → 3.1.39

package/src/navigation/primary-navigator.tsx

@@ -75,6 +75,7 @@ import TTSSignLoan from '../screens/toan-trinh-so/TTSSignLoan';
 import TTSOTP from '../screens/toan-trinh-so/TTSOTP';
 import RegisterBack from '../screens/toan-trinh-so/RegisterBack';
 import { Api } from '../services/api';
+import CCCDCameraScreen from '../screens/camera/CCCDCameraScreen';
 
 export const ScreenNames = {
   Splash: 'Splash',
@@ -148,6 +149,7 @@ export const ScreenNames = {
   TTSSignLoan: 'TTSSignLoan',
   TTSOTP: 'TTSOTP',
   RegisterBack: 'RegisterBack',
+  CCCDCameraScreen: 'CCCDCameraScreen',
 };
 
 const Stack = createNativeStackNavigator();
@@ -309,6 +311,10 @@ export function PrimaryNavigator(props) {
       <Stack.Screen name={ScreenNames.TTSSignLoan} component={TTSSignLoan} />
       <Stack.Screen name={ScreenNames.TTSOTP} component={TTSOTP} />
       <Stack.Screen name={ScreenNames.RegisterBack} component={RegisterBack} />
+      <Stack.Screen
+        name={ScreenNames.CCCDCameraScreen}
+        component={CCCDCameraScreen}
+      />
     </Stack.Navigator>
   );
 }

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -0,0 +1,273 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Dimensions,
+  Image,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Camera, useCameraDevices } from 'react-native-vision-camera';
+import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import ImageEditor from '@react-native-community/image-editor';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import DeviceInfo from 'react-native-device-info';
+import {
+  request,
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+} from 'react-native-permissions';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+const frameWidth = screenWidth * 0.85;
+const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
+const frameLeft = (screenWidth - frameWidth) / 2;
+const frameTop = ((screenWidth * 4) / 3 - frameHeight) / 2;
+export default function CCCDCameraScreen(props) {
+  const navigation = useNavigation();
+  const camera = useRef(null);
+  const devices = useCameraDevices();
+  const device = devices.back;
+  const [cameraActive, setCameraActive] = useState(true);
+  const [passPermission, setPassPermission] = useState(false);
+
+  const requestPermissions = () => {
+    request(
+      Platform.OS === 'ios'
+        ? PERMISSIONS.IOS.CAMERA
+        : PERMISSIONS.ANDROID.CAMERA
+    ).then((result) => {
+      switch (result) {
+        case RESULTS.UNAVAILABLE:
+          console.log(
+            'This feature is not available (on this device / in this context)'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            [{ text: 'Đồng ý' }]
+          );
+          break;
+        case RESULTS.DENIED:
+          console.log(
+            'The permission has not been requested / is denied but requestable'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.LIMITED:
+          console.log('The permission is limited: some actions are possible');
+          Alert.alert(
+            'Thông báo',
+            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.GRANTED:
+          console.log('The permission is granted');
+          setPassPermission(true);
+          break;
+        case RESULTS.BLOCKED:
+          console.log('The permission is denied and not requestable anymore');
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+              },
+            ]
+          );
+          break;
+      }
+    });
+  };
+
+  useEffect(() => {
+    requestPermissions();
+  }, []);
+
+  const takePicture = async () => {
+    if (camera.current == null) return;
+
+    const photo = await camera.current.takePhoto({
+      skipMetadata: true,
+    });
+
+    Image.getSize(`file://${photo.path}`, async (width, height) => {
+      const previewHeight = (screenWidth * 4) / 3; // Tỷ lệ khung preview camera
+
+      // Tính scale giữa ảnh thật và khung preview
+      const scaleX = width / screenWidth;
+      const scaleY = height / previewHeight;
+
+      // Tính tọa độ vùng cần crop trên ảnh gốc
+      const cropData = {
+        offset: {
+          x: frameLeft * scaleX,
+          y: frameTop * scaleY,
+        },
+        size: {
+          width: frameWidth * scaleX,
+          height: frameHeight * scaleY,
+        },
+        displaySize: {
+          width: frameWidth * scaleX,
+          height: frameHeight * scaleY,
+        },
+        resizeMode: 'contain',
+      };
+
+      try {
+        const croppedUri = await ImageEditor.cropImage(
+          `file://${photo.path}`,
+          cropData
+        );
+        setCameraActive(false);
+        navigation.goBack();
+        if (props.route.params.callback) {
+          props.route.params.callback(croppedUri.uri);
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  };
+
+  if (!device || !passPermission)
+    return <View style={{ flex: 1, backgroundColor: '#000' }} />;
+  return (
+    <View style={styles.container}>
+      <View style={styles.topContainer}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          style={[
+            { width: 48, height: 48, zIndex: 1000, alignItems: 'center' },
+          ]}
+        >
+          <IconBackWhite />
+        </TouchableOpacity>
+      </View>
+      <Camera
+        style={styles.camera}
+        device={device}
+        isActive={cameraActive}
+        photo={true}
+        ref={camera}
+      />
+      <View style={styles.overlay}>
+        <View style={styles.darkOverlayTop} />
+        <View style={styles.row}>
+          <View style={styles.darkOverlaySide} />
+          <View style={styles.frameBorder} />
+          <View style={styles.darkOverlaySide} />
+        </View>
+        <View style={styles.darkOverlayBottom} />
+      </View>
+      <View style={styles.captureButton}>
+        <MText
+          style={{
+            color: '#fff',
+            marginBottom: 16,
+            textAlign: 'center',
+            paddingHorizontal: 24,
+          }}
+        >
+          Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật, chụp đủ ánh sáng và
+          rõ nét.
+        </MText>
+        <TouchableOpacity onPress={takePicture}>
+          <TakePhotoSvg />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const overlayColor = 'rgba(22, 22, 22, 0.7)';
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#000' },
+  camera: { flex: 1 },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  frameBorder: {
+    width: frameWidth,
+    height: frameHeight,
+    borderColor: '#FDFDFD',
+    borderWidth: 2,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  darkOverlayTop: {
+    width: '100%',
+    height: (screenHeight - frameHeight) / 2,
+    backgroundColor: overlayColor,
+  },
+  darkOverlayBottom: {
+    width: '100%',
+    height: (screenHeight - frameHeight) / 2,
+    backgroundColor: overlayColor,
+  },
+  darkOverlaySide: {
+    width: (screenWidth - frameWidth) / 2,
+    height: frameHeight,
+    backgroundColor: overlayColor,
+  },
+  captureContainer: {
+    position: 'absolute',
+    bottom: 40,
+    width: '100%',
+    alignItems: 'center',
+  },
+  captureButton: {
+    position: 'absolute',
+    bottom: 30,
+    alignSelf: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  topContainer: {
+    position: 'absolute',
+    top: DeviceInfo.hasNotch() ? 60 : 24,
+  },
+  textContainer: {
+    position: 'absolute',
+    top: DeviceInfo.hasNotch() ? 60 : 24,
+  },
+});

package/src/screens/camera/index.tsx

@@ -10,13 +10,16 @@ import {
   Platform,
   SafeAreaView,
   ScrollView,
-  StyleSheet,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import {
+  CommonActions,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
 import { observer } from 'mobx-react-lite';
 import { commonStyles } from '../CommonStyles';
 import MButton from '../../components/MButton';
@@ -46,15 +49,11 @@ import { MText } from '../../components/MText';
 import Modal from 'react-native-modal';
 import LinearGradient from 'react-native-linear-gradient';
 
-const screenWidth = Dimensions.get('window').width;
-const screenHeight = Dimensions.get('window').height;
-
-const frameWidth = screenWidth * 0.85;
-const frameHeight = screenWidth * 0.54;
-
 const cameraStore = new Store();
 export const Camera = observer(function Camera(props: any) {
   const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const [passPermission, setPassPermission] = useState(false);
   const [flash, setFlash] = useState(false);
   const [front, setFront] = useState(props.route.params.front);
@@ -67,14 +66,17 @@ export const Camera = observer(function Camera(props: any) {
   const takePhoto = async () => {
     setTaking(true);
     const options = {
+      width: 720,
       base64: true,
+      pauseAfterCapture: true,
       fixOrientation: false,
       forceUpOrientation: false,
       orientation: RNCamera.Constants.Orientation.portrait,
-      skipProcessing: true,
     };
     const data = await myCamera.current.takePictureAsync(options);
+
     setTaking(false);
+    //  eslint-disable-next-line
     navigation.goBack();
     if (props.route.params.callback) {
       props.route.params.callback(data.uri);
@@ -189,12 +191,26 @@ export const Camera = observer(function Camera(props: any) {
     }
   };
 
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isFocused) {
+      // Delay mounting camera to give Android time to release the previous one
+      timeout = setTimeout(() => {
+        setShouldRenderCamera(true);
+      }, 500); // thử 300ms–500ms nếu cần
+    } else {
+      setShouldRenderCamera(false);
+    }
+
+    return () => clearTimeout(timeout);
+  }, [isFocused]);
+
   return (
     <View
       style={[commonStyles.fill, { backgroundColor: 'black' }]}
       pointerEvents={'box-none'}
     >
-      {passPermission && (
+      {passPermission && shouldRenderCamera && (
         <View
           style={[
             commonStyles.alignCenter,
@@ -210,15 +226,12 @@ export const Camera = observer(function Camera(props: any) {
           <RNCamera
             ref={myCamera}
             defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={
-              props.route.params.selfie
-                ? {
-                    width: Dimensions.get('window').width,
-                    height: (Dimensions.get('window').width * 4) / 3.1,
-                  }
-                : StyleSheet.absoluteFillObject
-            }
+            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
@@ -229,64 +242,22 @@ export const Camera = observer(function Camera(props: any) {
                 ? 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 />;
             }}
-            {!props.route.params.selfie && (
-              <View
-                style={{
-                  ...StyleSheet.absoluteFillObject,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <View
-                  style={{
-                    width: '100%',
-                    height: (screenHeight - frameHeight) / 2,
-                    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-                  }}
-                />
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <View
-                    style={{
-                      width: (screenWidth - frameWidth) / 2,
-                      height: frameHeight,
-                      backgroundColor: 'rgba(0, 0, 0, 0.6)',
-                    }}
-                  />
-                  <View
-                    style={{
-                      width: frameWidth,
-                      height: frameHeight,
-                      borderColor: '#FDFDFD',
-                      borderWidth: 2,
-                      borderRadius: 6,
-                    }}
-                  />
-                  <View
-                    style={{
-                      width: (screenWidth - frameWidth) / 2,
-                      height: frameHeight,
-                      backgroundColor: 'rgba(0, 0, 0, 0.6)',
-                    }}
-                  />
-                </View>
-                <View
-                  style={{
-                    width: '100%',
-                    height: (screenHeight - frameHeight) / 2,
-                    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-                  }}
-                />
-              </View>
-            )}
           </RNCamera>
         </View>
       )}
@@ -331,7 +302,7 @@ export const Camera = observer(function Camera(props: any) {
                 {
                   color: 'white',
                   textAlign: 'center',
-
+                  backgroundColor: '#00000099',
                   paddingVertical: 12,
                 },
               ]}
@@ -356,7 +327,21 @@ export const Camera = observer(function Camera(props: any) {
               sáng đủ rõ nét khuôn mặt
             </MText>
           )}
-
+          {/* {(Platform.OS === 'ios' ? false : !cameraStore.isFace) && selfie && (
+            <MText
+              style={[
+                commonStyles.textNormal,
+                {
+                  color: 'white',
+                  textAlign: 'center',
+                  backgroundColor: '#00000099',
+                  paddingVertical: 12,
+                },
+              ]}
+            >
+              Vui lòng hướng khuôn mặt vào máy ảnh
+            </MText>
+          )} */}
           {taking ? (
             <View
               style={[
@@ -374,10 +359,6 @@ export const Camera = observer(function Camera(props: any) {
                 commonStyles.alignCenter,
                 commonStyles.justifyCenter,
                 {
-                  flex: 0,
-
-                  paddingHorizontal: 20,
-                  alignSelf: 'center',
                   margin: 24,
                 },
               ]}