react-native-timacare 3.3.11 → 3.3.12

package/lib/module/screens/uploadVideo/videoStore.js

@@ -1,2 +1,2 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _initializerDefineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _applyDecoratedDescriptor2=_interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));var _initializerWarningHelper2=_interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));var _mobx=require("mobx");var _reactNative=require("react-native");var _api=require("../../services/api");var _class,_descriptor;var Store=(_class=function(){function Store(){(0,_classCallCheck2.default)(this,Store);(0,_initializerDefineProperty2.default)(this,"isLoading",_descriptor,this);}(0,_createClass2.default)(Store,[{key:"uploadVideo",value:function uploadVideo(loanID,body,onSuccess,onError){var response;return _regenerator.default.async(function uploadVideo$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;this.isLoading=true;_context.next=4;return _regenerator.default.awrap(_api.Api.getInstance().uploadVideo(loanID,body));case 4:response=_context.sent;console.log(response);this.isLoading=false;if(response.kind==='ok'){if(response.data.meta.errorCode===200){if(onSuccess)onSuccess();}else{_reactNative.Alert.alert('Thông báo',response.data.meta.errorMessage);if(onError)onError();}}else{this.isLoading=false;_reactNative.Alert.alert('Thông báo','Lỗi đã xảy ra. Vui lòng thực hiện lại');if(onError)onError();}_context.next=14;break;case 10:_context.prev=10;_context.t0=_context["catch"](0);console.log(_context.t0);if(onError)onError();case 14:case"end":return _context.stop();}},null,this,[[0,10]],Promise);}}]);return Store;}(),(_descriptor=(0,_applyDecoratedDescriptor2.default)(_class.prototype,"isLoading",[_mobx.observable],{configurable:true,enumerable:true,writable:true,initializer:function initializer(){return false;}}),(0,_applyDecoratedDescriptor2.default)(_class.prototype,"uploadVideo",[_mobx.action],Object.getOwnPropertyDescriptor(_class.prototype,"uploadVideo"),_class.prototype)),_class);var videoStore=new Store();var _default=exports.default=videoStore;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _initializerDefineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _applyDecoratedDescriptor2=_interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));var _initializerWarningHelper2=_interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));var _mobx=require("mobx");var _reactNative=require("react-native");var _api=require("../../services/api");var _class,_descriptor;var Store=(_class=function(){function Store(){(0,_classCallCheck2.default)(this,Store);(0,_initializerDefineProperty2.default)(this,"isLoading",_descriptor,this);}(0,_createClass2.default)(Store,[{key:"uploadVideo",value:function uploadVideo(loanID,body,onSuccess,onError){var response;return _regenerator.default.async(function uploadVideo$(_context){while(1)switch(_context.prev=_context.next){case 0:this.isLoading=true;_context.prev=1;_context.next=4;return _regenerator.default.awrap(_api.Api.getInstance().uploadVideo(loanID,body));case 4:response=_context.sent;if(response.kind==='ok'){if(response.data.meta.errorCode===200){if(onSuccess)onSuccess();}else{_reactNative.Alert.alert('Thông báo',response.data.meta.errorMessage);if(onError)onError();}}else{_reactNative.Alert.alert('Thông báo','Lỗi đã xảy ra. Vui lòng thực hiện lại');if(onError)onError();}_context.next=13;break;case 8:_context.prev=8;_context.t0=_context["catch"](1);console.log(_context.t0);_reactNative.Alert.alert('Thông báo','Lỗi đã xảy ra. Vui lòng thực hiện lại');if(onError)onError();case 13:_context.prev=13;this.isLoading=false;return _context.finish(13);case 16:case"end":return _context.stop();}},null,this,[[1,8,13,16]],Promise);}}]);return Store;}(),(_descriptor=(0,_applyDecoratedDescriptor2.default)(_class.prototype,"isLoading",[_mobx.observable],{configurable:true,enumerable:true,writable:true,initializer:function initializer(){return false;}}),(0,_applyDecoratedDescriptor2.default)(_class.prototype,"uploadVideo",[_mobx.action],Object.getOwnPropertyDescriptor(_class.prototype,"uploadVideo"),_class.prototype)),_class);var videoStore=new Store();var _default=exports.default=videoStore;
 //# sourceMappingURL=videoStore.js.map

package/lib/module/screens/uploadVideo/videoStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","_reactNative","_api","_class","_descriptor","Store","_classCallCheck2","default","_initializerDefineProperty2","_createClass2","key","value","uploadVideo","loanID","body","onSuccess","onError","response","_regenerator","async","uploadVideo$","_context","prev","next","isLoading","awrap","Api","getInstance","sent","console","log","kind","data","meta","errorCode","Alert","alert","errorMessage","t0","stop","Promise","_applyDecoratedDescriptor2","prototype","observable","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","videoStore","_default","exports"],"sourceRoot":"../../../../src","sources":["screens/uploadVideo/videoStore.tsx"],"mappings":"81BACA,IAAAA,KAAA,CAAAC,OAAA,SACA,IAAAC,YAAA,CAAAD,OAAA,iBACA,IAAAE,IAAA,CAAAF,OAAA,uBAAyC,IAAAG,MAAA,CAAAC,WAAA,IAEnC,CAAAC,KAAK,EAAAF,MAAA,qBAAAE,MAAA,KAAAC,gBAAA,CAAAC,OAAA,OAAAF,KAAA,KAAAG,2BAAA,CAAAD,OAAA,mBAAAH,WAAA,WAAAK,aAAA,CAAAF,OAAA,EAAAF,KAAA,GAAAK,GAAA,eAAAC,KAAA,CAGT,SAAAC,YACkBC,MAAM,CAAEC,IAAI,CAAEC,SAAU,CAAEC,OAAO,MAAAC,QAAA,QAAAC,YAAA,CAAAX,OAAA,CAAAY,KAAA,UAAAC,aAAAC,QAAA,iBAAAA,QAAA,CAAAC,IAAA,CAAAD,QAAA,CAAAE,IAAA,SAAAF,QAAA,CAAAC,IAAA,GAE/C,IAAI,CAACE,SAAS,CAAG,IAAI,CAACH,QAAA,CAAAE,IAAA,UAAAL,YAAA,CAAAX,OAAA,CAAAkB,KAAA,CACCC,QAAG,CAACC,WAAW,CAAC,CAAC,CAACf,WAAW,CAACC,MAAM,CAAEC,IAAI,CAAC,SAA5DG,QAAQ,CAAAI,QAAA,CAAAO,IAAA,CACdC,OAAO,CAACC,GAAG,CAACb,QAAQ,CAAC,CACrB,IAAI,CAACO,SAAS,CAAG,KAAK,CACtB,GAAIP,QAAQ,CAACc,IAAI,GAAK,IAAI,CAAE,CAC1B,GAAId,QAAQ,CAACe,IAAI,CAACC,IAAI,CAACC,SAAS,GAAK,GAAG,CAAE,CACxC,GAAInB,SAAS,CAAEA,SAAS,CAAC,CAAC,CAC5B,CAAC,IAAM,CACLoB,kBAAK,CAACC,KAAK,CAAC,WAAW,CAAEnB,QAAQ,CAACe,IAAI,CAACC,IAAI,CAACI,YAAY,CAAC,CACzD,GAAIrB,OAAO,CAAEA,OAAO,CAAC,CAAC,CACxB,CACF,CAAC,IAAM,CACL,IAAI,CAACQ,SAAS,CAAG,KAAK,CACtBW,kBAAK,CAACC,KAAK,CAAC,WAAW,CAAE,uCAAuC,CAAC,CACjE,GAAIpB,OAAO,CAAEA,OAAO,CAAC,CAAC,CACxB,CAACK,QAAA,CAAAE,IAAA,kBAAAF,QAAA,CAAAC,IAAA,IAAAD,QAAA,CAAAiB,EAAA,CAAAjB,QAAA,aAEDQ,OAAO,CAACC,GAAG,CAAAT,QAAA,CAAAiB,EAAM,CAAC,CAClB,GAAItB,OAAO,CAAEA,OAAO,CAAC,CAAC,CAAC,yBAAAK,QAAA,CAAAkB,IAAA,yBAAAC,OAAA,GAE1B,WAAAnC,KAAA,MAAAD,WAAA,IAAAqC,0BAAA,CAAAlC,OAAA,EAAAJ,MAAA,CAAAuC,SAAA,cAzBAC,gBAAU,GAAAC,YAAA,MAAAC,UAAA,MAAAC,QAAA,MAAAC,WAAA,UAAAA,YAAA,QAAa,MAAK,QAAAN,0BAAA,CAAAlC,OAAA,EAAAJ,MAAA,CAAAuC,SAAA,gBAE5BM,YAAM,EAAAC,MAAA,CAAAC,wBAAA,CAAA/C,MAAA,CAAAuC,SAAA,gBAAAvC,MAAA,CAAAuC,SAAA,GAAAvC,MAAA,EA0BT,GAAM,CAAAgD,UAAU,CAAG,GAAI,CAAA9C,KAAK,CAAC,CAAC,CAAC,IAAA+C,QAAA,CAAAC,OAAA,CAAA9C,OAAA,CAChB4C,UAAU"}
+{"version":3,"names":["_mobx","require","_reactNative","_api","_class","_descriptor","Store","_classCallCheck2","default","_initializerDefineProperty2","_createClass2","key","value","uploadVideo","loanID","body","onSuccess","onError","response","_regenerator","async","uploadVideo$","_context","prev","next","isLoading","awrap","Api","getInstance","sent","kind","data","meta","errorCode","Alert","alert","errorMessage","t0","console","log","finish","stop","Promise","_applyDecoratedDescriptor2","prototype","observable","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","videoStore","_default","exports"],"sourceRoot":"../../../../src","sources":["screens/uploadVideo/videoStore.tsx"],"mappings":"81BACA,IAAAA,KAAA,CAAAC,OAAA,SACA,IAAAC,YAAA,CAAAD,OAAA,iBACA,IAAAE,IAAA,CAAAF,OAAA,uBAAyC,IAAAG,MAAA,CAAAC,WAAA,IAEnC,CAAAC,KAAK,EAAAF,MAAA,qBAAAE,MAAA,KAAAC,gBAAA,CAAAC,OAAA,OAAAF,KAAA,KAAAG,2BAAA,CAAAD,OAAA,mBAAAH,WAAA,WAAAK,aAAA,CAAAF,OAAA,EAAAF,KAAA,GAAAK,GAAA,eAAAC,KAAA,CAGT,SAAAC,YACkBC,MAAM,CAAEC,IAAI,CAAEC,SAAU,CAAEC,OAAO,MAAAC,QAAA,QAAAC,YAAA,CAAAX,OAAA,CAAAY,KAAA,UAAAC,aAAAC,QAAA,iBAAAA,QAAA,CAAAC,IAAA,CAAAD,QAAA,CAAAE,IAAA,SACjD,IAAI,CAACC,SAAS,CAAG,IAAI,CAACH,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA,UAAAL,YAAA,CAAAX,OAAA,CAAAkB,KAAA,CAEGC,QAAG,CAACC,WAAW,CAAC,CAAC,CAACf,WAAW,CAACC,MAAM,CAAEC,IAAI,CAAC,SAA5DG,QAAQ,CAAAI,QAAA,CAAAO,IAAA,CACd,GAAIX,QAAQ,CAACY,IAAI,GAAK,IAAI,CAAE,CAC1B,GAAIZ,QAAQ,CAACa,IAAI,CAACC,IAAI,CAACC,SAAS,GAAK,GAAG,CAAE,CACxC,GAAIjB,SAAS,CAAEA,SAAS,CAAC,CAAC,CAC5B,CAAC,IAAM,CACLkB,kBAAK,CAACC,KAAK,CAAC,WAAW,CAAEjB,QAAQ,CAACa,IAAI,CAACC,IAAI,CAACI,YAAY,CAAC,CACzD,GAAInB,OAAO,CAAEA,OAAO,CAAC,CAAC,CACxB,CACF,CAAC,IAAM,CACLiB,kBAAK,CAACC,KAAK,CAAC,WAAW,CAAE,uCAAuC,CAAC,CACjE,GAAIlB,OAAO,CAAEA,OAAO,CAAC,CAAC,CACxB,CAACK,QAAA,CAAAE,IAAA,iBAAAF,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAe,EAAA,CAAAf,QAAA,aAEDgB,OAAO,CAACC,GAAG,CAAAjB,QAAA,CAAAe,EAAM,CAAC,CAClBH,kBAAK,CAACC,KAAK,CAAC,WAAW,CAAE,uCAAuC,CAAC,CACjE,GAAIlB,OAAO,CAAEA,OAAO,CAAC,CAAC,CAAC,QAAAK,QAAA,CAAAC,IAAA,IAEvB,IAAI,CAACE,SAAS,CAAG,KAAK,CAAC,OAAAH,QAAA,CAAAkB,MAAA,8BAAAlB,QAAA,CAAAmB,IAAA,8BAAAC,OAAA,GAE1B,WAAApC,KAAA,MAAAD,WAAA,IAAAsC,0BAAA,CAAAnC,OAAA,EAAAJ,MAAA,CAAAwC,SAAA,cAzBAC,gBAAU,GAAAC,YAAA,MAAAC,UAAA,MAAAC,QAAA,MAAAC,WAAA,UAAAA,YAAA,QAAa,MAAK,QAAAN,0BAAA,CAAAnC,OAAA,EAAAJ,MAAA,CAAAwC,SAAA,gBAE5BM,YAAM,EAAAC,MAAA,CAAAC,wBAAA,CAAAhD,MAAA,CAAAwC,SAAA,gBAAAxC,MAAA,CAAAwC,SAAA,GAAAxC,MAAA,EA0BT,GAAM,CAAAiD,UAAU,CAAG,GAAI,CAAA/C,KAAK,CAAC,CAAC,CAAC,IAAAgD,QAAA,CAAAC,OAAA,CAAA/C,OAAA,CAChB6C,UAAU"}

package/lib/typescript/RNTimacare.d.ts

@@ -1,2 +1,2 @@
-export declare function RNTimacare(props: any): JSX.Element;
+export declare function RNTimacare(): JSX.Element;
 //# sourceMappingURL=RNTimacare.d.ts.map

package/lib/typescript/RNTimacare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RNTimacare.d.ts","sourceRoot":"","sources":["../../src/RNTimacare.tsx"],"names":[],"mappings":"AAOA,wBAAgB,UAAU,CAAC,KAAK,KAAA,eAW/B"}
+{"version":3,"file":"RNTimacare.d.ts","sourceRoot":"","sources":["../../src/RNTimacare.tsx"],"names":[],"mappings":"AAOA,wBAAgB,UAAU,gBAWzB"}

package/lib/typescript/screens/camera/CCCDCameraScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CCCDCameraScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/camera/CCCDCameraScreen.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,KAAA,eA4G7C"}
+{"version":3,"file":"CCCDCameraScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/camera/CCCDCameraScreen.tsx"],"names":[],"mappings":"AAsCA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,KAAA,eAyO7C"}

package/lib/typescript/screens/nationalID/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/nationalID/index.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,UAAU,KAwPrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/nationalID/index.tsx"],"names":[],"mappings":"AA6DA,eAAO,MAAM,UAAU,KAyPrB,CAAC"}

package/lib/typescript/screens/nationalIDBack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/nationalIDBack/index.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,cAAc,KAmPzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/nationalIDBack/index.tsx"],"names":[],"mappings":"AA8CA,eAAO,MAAM,cAAc,KAoPzB,CAAC"}

package/lib/typescript/screens/uploadVideo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/uploadVideo/index.tsx"],"names":[],"mappings":"AA6BA,eAAO,MAAM,KAAK,KAkLhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screens/uploadVideo/index.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,KAAK,KA4NhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-timacare",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "description": "SDK Tima Care",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -42,10 +42,11 @@
     "react-native-blob-util": "*",
     "@react-native-camera-roll/camera-roll": "*",
     "@react-native-async-storage/async-storage": "*",
-    "@react-native-community/image-editor": "*",
+    "@oguzhnatly/react-native-image-manipulator": "*",
     "@react-native-community/masked-view": "*",
     "@react-native-firebase/analytics": "*",
     "@react-navigation/native": "*",
+    "@react-navigation/native-stack": "*",
     "@react-native-ml-kit/text-recognition": "*",
     "@types/react-native-snap-carousel": "*",
     "@types/uuid": "*",

package/src/RNTimacare.tsx

@@ -5,7 +5,7 @@ import { Platform } from 'react-native';
 import appStore from './AppStore';
 import { Settings } from 'react-native-fbsdk-next';
 
-export function RNTimacare(props) {
+export function RNTimacare() {
   useEffect(() => {
     if (Platform.OS === 'android') {
       Settings.initializeSDK();
@@ -15,5 +15,5 @@ export function RNTimacare(props) {
     appStore.getAppId();
     appStore.getDevicePayload();
   }, []);
-  return <PrimaryNavigator {...props} />;
+  return <PrimaryNavigator />;
 }

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -16,21 +16,37 @@ import {
 } 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 { 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 { hasPermission, requestPermission } = useCameraPermission();
+  const [previewLayout, setPreviewLayout] = useState({
+    width: screenWidth,
+    height: screenHeight,
+  });
 
   useEffect(() => {
     if (!hasPermission) requestPermission();
@@ -43,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;
 
-      // Tính scale giữa ảnh thật và khung preview
-      const scaleX = width / screenWidth;
-      const scaleY = height / previewHeight;
+      // Độ 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;
+
+      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,
-        },
-        displaySize: {
-          width: frameWidth * scaleX,
-          height: frameHeight * scaleY,
+          width: cropWidthInt,
+          height: cropHeightInt,
         },
-        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 || !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={styles.captureButton}>
+      <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={{
+          position: 'absolute',
+          bottom: 24 + insets.bottom,
+          alignSelf: 'center',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <MText
           style={{
             color: '#fff',
@@ -135,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>