react-native-timacare 3.3.10 → 3.3.12

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -9,111 +9,48 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+} 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';
+import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
 
 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;
+
+const getImageSize = (
+  uri: string
+): Promise<{ width: number; height: number }> =>
+  new Promise((resolve, reject) => {
+    Image.getSize(
+      uri,
+      (width, height) => resolve({ width, height }),
+      (err) => reject(err)
+    );
+  });
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
 export default function CCCDCameraScreen(props) {
+  const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const camera = useRef(null);
   const device = useCameraDevice('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;
-      }
-    });
-  };
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const [previewLayout, setPreviewLayout] = useState({
+    width: screenWidth,
+    height: screenHeight,
+  });
 
   useEffect(() => {
-    requestPermissions();
-  }, []);
+    if (!hasPermission) requestPermission();
+  }, [hasPermission, requestPermission]);
 
   const takePicture = async () => {
     if (camera.current == null) return;
@@ -122,79 +59,199 @@ export default function CCCDCameraScreen(props) {
       skipMetadata: true,
     });
 
-    Image.getSize(`file://${photo.path}`, async (width, height) => {
-      const previewHeight = (screenWidth * 4) / 3; // Tỷ lệ khung preview camera
+    try {
+      const imageUri = `file://${photo.path}`;
+      const { width, height } = await getImageSize(imageUri);
+      const previewWidth = previewLayout.width || screenWidth;
+      const previewHeight = previewLayout.height || screenHeight;
+
+      const frameWidth = previewWidth * 0.85;
+      const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
+      const frameX = (previewWidth - frameWidth) / 2;
+      const frameY = (previewHeight - frameHeight) / 2;
+
+      // Tính scale dựa trên `resizeMode="cover"` mặc định của Vision Camera phủ kín màn hình
+      const scale = Math.max(previewWidth / width, previewHeight / height);
+
+      // Kích thước của ảnh nếu được hiển thị và zoom lên để cover màn hình
+      const renderedWidth = width * scale;
+      const renderedHeight = height * scale;
+
+      // Độ phân giải của các phần bị tràn ra khỏi màn hình (do cover)
+      const offsetX = (renderedWidth - previewWidth) / 2;
+      const offsetY = (renderedHeight - previewHeight) / 2;
+
+      // Tính tọa độ vùng cần crop trên ảnh gốc dựa vào toạ độ của khung UI
+      const cropX = (frameX + offsetX) / scale;
+      const cropY = (frameY + offsetY) / scale;
+      const cropWidth = frameWidth / scale;
+      const cropHeight = frameHeight / scale;
 
-      // Tính scale giữa ảnh thật và khung preview
-      const scaleX = width / screenWidth;
-      const scaleY = height / previewHeight;
+      const cropXInt = Math.floor(clamp(cropX, 0, Math.max(0, width - 1)));
+      const cropYInt = Math.floor(clamp(cropY, 0, Math.max(0, height - 1)));
+      const cropWidthInt = Math.floor(
+        clamp(cropWidth, 1, Math.max(1, width - cropXInt))
+      );
+      const cropHeightInt = Math.floor(
+        clamp(cropHeight, 1, Math.max(1, height - cropYInt))
+      );
 
-      // Tính tọa độ vùng cần crop trên ảnh gốc
       const cropData = {
         offset: {
-          x: frameLeft * scaleX,
-          y: frameTop * scaleY,
+          x: cropXInt,
+          y: cropYInt,
         },
         size: {
-          width: frameWidth * scaleX,
-          height: frameHeight * scaleY,
+          width: cropWidthInt,
+          height: cropHeightInt,
         },
-        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);
+      const result = await RNImageManipulator.manipulate(
+        imageUri,
+        [
+          {
+            crop: {
+              originX: cropXInt,
+              originY: cropYInt,
+              width: cropWidthInt,
+              height: cropHeightInt,
+            },
+          },
+        ],
+        { format: 'jpg', compress: 1 }
+      );
+      setCameraActive(false);
+      navigation.goBack();
+
+      if (props.route?.params?.callback) {
+        props.route.params.callback(result?.uri);
       }
-    });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
-  if (!device || !passPermission)
+  if (!device || !hasPermission)
     return <View style={{ flex: 1, backgroundColor: '#000' }} />;
+
+  const frameWidth = previewLayout.width * 0.85;
+  const frameHeight = frameWidth * 0.63;
+  const frameX = (previewLayout.width - frameWidth) / 2;
+  const frameY = (previewLayout.height - frameHeight) / 2;
+
   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>
+    <View
+      style={$container}
+      onLayout={(e) => {
+        const { width, height } = e.nativeEvent.layout;
+        if (width > 0 && height > 0) setPreviewLayout({ width, height });
+      }}
+    >
       <Camera
-        style={styles.camera}
+        style={{ flex: 1 }}
         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 style={$overlay} pointerEvents="none">
+        <View style={[$darkOverlayTop, { height: frameY }]} />
+        <View style={$row}>
+          <View
+            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
+          />
+          <View
+            style={[$frameBorder, { width: frameWidth, height: frameHeight }]}
+          >
+            {/* Top Left */}
+            <Corner
+              style={{
+                top: 0,
+                left: 0,
+                borderTopWidth: CORNER_WIDTH,
+                borderLeftWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Top Right */}
+            <Corner
+              style={{
+                top: 0,
+                right: 0,
+                borderTopWidth: CORNER_WIDTH,
+                borderRightWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Bottom Left */}
+            <Corner
+              style={{
+                bottom: 0,
+                left: 0,
+                borderBottomWidth: CORNER_WIDTH,
+                borderLeftWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Bottom Right */}
+            <Corner
+              style={{
+                bottom: 0,
+                right: 0,
+                borderBottomWidth: CORNER_WIDTH,
+                borderRightWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+          </View>
+          <View
+            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
+          />
         </View>
-        <View style={styles.darkOverlayBottom} />
+        <View style={[$darkOverlayBottom, { height: frameY }]} />
+      </View>
+      <View style={[$back, { top: insets.top + 16 }]}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          style={{
+            position: 'absolute',
+            left: 0,
+            width: 48,
+            height: 48,
+            zIndex: 1000,
+            alignItems: 'center',
+          }}
+        >
+          <IconBackWhite />
+        </TouchableOpacity>
+        <MText
+          style={{
+            textAlign: 'center',
+            zIndex: 10,
+            color: '#FFFFFF',
+            fontSize: 16,
+          }}
+        >
+          {props?.route?.params?.front
+            ? 'Chụp CMND/ CCCD mặt trước'
+            : 'Chụp CMND/ CCCD mặt sau'}
+        </MText>
       </View>
-      <View style={styles.captureButton}>
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 24 + insets.bottom,
+          alignSelf: 'center',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <MText
           style={{
             color: '#fff',
@@ -214,59 +271,59 @@ export default function CCCDCameraScreen(props) {
   );
 }
 
+const CORNER_SIZE = 20;
+const CORNER_WIDTH = 2;
+const BORDER_COLOR = '#FDFDFD';
+
+const Corner = ({ style }: { style: ViewStyle }) => (
+  <View
+    style={[
+      style,
+      {
+        position: 'absolute',
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+      },
+    ]}
+  />
+);
+
 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,
-  },
-});
+const $back: ViewStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+};
+
+const $overlay: ViewStyle = {
+  ...StyleSheet.absoluteFillObject,
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const $container: ViewStyle = {
+  flex: 1,
+  backgroundColor: '#000',
+};
+
+const $row: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+};
+
+const $darkOverlayTop: ViewStyle = {
+  width: '100%',
+  backgroundColor: overlayColor,
+};
+
+const $darkOverlayBottom: ViewStyle = {
+  width: '100%',
+  backgroundColor: overlayColor,
+};
+const $darkOverlaySide: ViewStyle = {
+  backgroundColor: overlayColor,
+};
+const $frameBorder: ViewStyle = {
+  // borderColor: '#FDFDFD',
+  // borderWidth: 2,
+};

package/src/screens/nationalID/index.tsx

@@ -57,6 +57,7 @@ const logoView: ImageStyle = {
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 const frameWidth = screenWidth * 0.85;
 const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
+const frameAspectRatio = frameWidth / frameHeight;
 
 export const NationalID = observer(function NationalID(props: any) {
   const navigation = useNavigation();
@@ -99,7 +100,7 @@ export const NationalID = observer(function NationalID(props: any) {
       (data) => {
         if (data === 1) {
           navigation.push(ScreenNames.CCCDCameraScreen, {
-            front: false,
+            front: true,
             callback: (photo) => {
               setPhoto(photo);
             },
@@ -163,7 +164,7 @@ export const NationalID = observer(function NationalID(props: any) {
               <View
                 style={{
                   width: '100%',
-                  height: frameHeight,
+                  aspectRatio: frameAspectRatio,
                   borderWidth: 8,
                   borderRadius: 6,
                   borderColor: '#FFFFFF',
@@ -179,6 +180,7 @@ export const NationalID = observer(function NationalID(props: any) {
                   style={{
                     width: '100%',
                     height: '100%',
+                    resizeMode: 'cover',
                   }}
                 />
               </View>

package/src/screens/nationalIDBack/index.tsx

@@ -42,6 +42,7 @@ const logoView: ImageStyle = {
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 const frameWidth = screenWidth * 0.85;
 const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
+const frameAspectRatio = frameWidth / frameHeight;
 
 export const NationalIDBack = observer(function NationalIDBack(props: any) {
   const navigation = useNavigation();
@@ -143,7 +144,7 @@ export const NationalIDBack = observer(function NationalIDBack(props: any) {
               <View
                 style={{
                   width: '100%',
-                  height: frameHeight,
+                  aspectRatio: frameAspectRatio,
                   borderWidth: 8,
                   borderRadius: 6,
                   borderColor: '#FFFFFF',
@@ -159,6 +160,7 @@ export const NationalIDBack = observer(function NationalIDBack(props: any) {
                   style={{
                     width: '100%',
                     height: '100%',
+                    resizeMode: 'cover',
                   }}
                 />
               </View>