react-native-timacare 3.3.10 → 3.3.12

package/lib/commonjs/RNTimacare.js

@@ -1,2 +1,2 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RNTimacare=RNTimacare;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _navigation=require("./navigation");var _reactNative=require("react-native");var _AppStore=_interopRequireDefault(require("./AppStore"));var _reactNativeFbsdkNext=require("react-native-fbsdk-next");var _jsxFileName="/Users/tima/Documents/Tima/tima-care-v2-sdk/src/RNTimacare.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}function RNTimacare(props){(0,_react.useEffect)(function(){if(_reactNative.Platform.OS==='android'){_reactNativeFbsdkNext.Settings.initializeSDK();}_AppStore.default.getDeviceId();_AppStore.default.getPublicIp();_AppStore.default.getAppId();_AppStore.default.getDevicePayload();},[]);return _react.default.createElement(_navigation.PrimaryNavigator,(0,_extends2.default)({},props,{__self:this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:10}}));}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RNTimacare=RNTimacare;var _react=_interopRequireWildcard(require("react"));var _navigation=require("./navigation");var _reactNative=require("react-native");var _AppStore=_interopRequireDefault(require("./AppStore"));var _reactNativeFbsdkNext=require("react-native-fbsdk-next");var _jsxFileName="/Users/tima/Documents/Tima/tima-care-v2-sdk/src/RNTimacare.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}function RNTimacare(){(0,_react.useEffect)(function(){if(_reactNative.Platform.OS==='android'){_reactNativeFbsdkNext.Settings.initializeSDK();}_AppStore.default.getDeviceId();_AppStore.default.getPublicIp();_AppStore.default.getAppId();_AppStore.default.getDevicePayload();},[]);return _react.default.createElement(_navigation.PrimaryNavigator,{__self:this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:10}});}
 //# sourceMappingURL=RNTimacare.js.map

package/lib/commonjs/RNTimacare.js.flow

@@ -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/lib/commonjs/RNTimacare.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_navigation","_reactNative","_AppStore","_interopRequireDefault","_reactNativeFbsdkNext","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","RNTimacare","props","useEffect","Platform","OS","Settings","initializeSDK","appStore","getDeviceId","getPublicIp","getAppId","getDevicePayload","createElement","PrimaryNavigator","_extends2","__self","__source","fileName","lineNumber","columnNumber"],"sourceRoot":"../../src","sources":["RNTimacare.tsx"],"mappings":"0PACA,IAAAA,MAAA,CAAAC,uBAAA,CAAAC,OAAA,WACA,IAAAC,WAAA,CAAAD,OAAA,iBACA,IAAAE,YAAA,CAAAF,OAAA,iBACA,IAAAG,SAAA,CAAAC,sBAAA,CAAAJ,OAAA,gBACA,IAAAK,qBAAA,CAAAL,OAAA,4BAAmD,IAAAM,YAAA,2EAAAC,yBAAAC,CAAA,wBAAAC,OAAA,iBAAAC,CAAA,KAAAD,OAAA,GAAAE,CAAA,KAAAF,OAAA,UAAAF,wBAAA,UAAAA,yBAAAC,CAAA,SAAAA,CAAA,CAAAG,CAAA,CAAAD,CAAA,IAAAF,CAAA,YAAAT,wBAAAS,CAAA,CAAAE,CAAA,MAAAA,CAAA,EAAAF,CAAA,EAAAA,CAAA,CAAAI,UAAA,QAAAJ,CAAA,WAAAA,CAAA,mBAAAA,CAAA,qBAAAA,CAAA,QAAAK,OAAA,CAAAL,CAAA,MAAAG,CAAA,CAAAJ,wBAAA,CAAAG,CAAA,KAAAC,CAAA,EAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,SAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,MAAAQ,CAAA,EAAAC,SAAA,OAAAC,CAAA,CAAAC,MAAA,CAAAC,cAAA,EAAAD,MAAA,CAAAE,wBAAA,SAAAC,CAAA,IAAAd,CAAA,gBAAAc,CAAA,EAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,CAAAc,CAAA,OAAAI,CAAA,CAAAR,CAAA,CAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,CAAAc,CAAA,OAAAI,CAAA,GAAAA,CAAA,CAAAX,GAAA,EAAAW,CAAA,CAAAC,GAAA,EAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,CAAAM,CAAA,CAAAI,CAAA,EAAAV,CAAA,CAAAM,CAAA,EAAAd,CAAA,CAAAc,CAAA,UAAAN,CAAA,CAAAH,OAAA,CAAAL,CAAA,CAAAG,CAAA,EAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,CAAAQ,CAAA,EAAAA,CAAA,EAE5C,QAAS,CAAAY,UAAUA,CAACC,KAAK,CAAE,CAChC,GAAAC,gBAAS,EAAC,UAAM,CACd,GAAIC,qBAAQ,CAACC,EAAE,GAAK,SAAS,CAAE,CAC7BC,8BAAQ,CAACC,aAAa,CAAC,CAAC,CAC1B,CACAC,iBAAQ,CAACC,WAAW,CAAC,CAAC,CACtBD,iBAAQ,CAACE,WAAW,CAAC,CAAC,CACtBF,iBAAQ,CAACG,QAAQ,CAAC,CAAC,CACnBH,iBAAQ,CAACI,gBAAgB,CAAC,CAAC,CAC7B,CAAC,CAAE,EAAE,CAAC,CACN,MAAO,CAAAzC,MAAA,CAAAe,OAAA,CAAA2B,aAAA,CAACvC,WAAA,CAAAwC,gBAAgB,IAAAC,SAAA,CAAA7B,OAAA,KAAKgB,KAAK,EAAAc,MAAA,MAAAC,QAAA,EAAAC,QAAA,CAAAvC,YAAA,CAAAwC,UAAA,IAAAC,YAAA,MAAG,CAAC,CACxC"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_navigation","_reactNative","_AppStore","_interopRequireDefault","_reactNativeFbsdkNext","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","RNTimacare","useEffect","Platform","OS","Settings","initializeSDK","appStore","getDeviceId","getPublicIp","getAppId","getDevicePayload","createElement","PrimaryNavigator","__self","__source","fileName","lineNumber","columnNumber"],"sourceRoot":"../../src","sources":["RNTimacare.tsx"],"mappings":"0KACA,IAAAA,MAAA,CAAAC,uBAAA,CAAAC,OAAA,WACA,IAAAC,WAAA,CAAAD,OAAA,iBACA,IAAAE,YAAA,CAAAF,OAAA,iBACA,IAAAG,SAAA,CAAAC,sBAAA,CAAAJ,OAAA,gBACA,IAAAK,qBAAA,CAAAL,OAAA,4BAAmD,IAAAM,YAAA,2EAAAC,yBAAAC,CAAA,wBAAAC,OAAA,iBAAAC,CAAA,KAAAD,OAAA,GAAAE,CAAA,KAAAF,OAAA,UAAAF,wBAAA,UAAAA,yBAAAC,CAAA,SAAAA,CAAA,CAAAG,CAAA,CAAAD,CAAA,IAAAF,CAAA,YAAAT,wBAAAS,CAAA,CAAAE,CAAA,MAAAA,CAAA,EAAAF,CAAA,EAAAA,CAAA,CAAAI,UAAA,QAAAJ,CAAA,WAAAA,CAAA,mBAAAA,CAAA,qBAAAA,CAAA,QAAAK,OAAA,CAAAL,CAAA,MAAAG,CAAA,CAAAJ,wBAAA,CAAAG,CAAA,KAAAC,CAAA,EAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,SAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,MAAAQ,CAAA,EAAAC,SAAA,OAAAC,CAAA,CAAAC,MAAA,CAAAC,cAAA,EAAAD,MAAA,CAAAE,wBAAA,SAAAC,CAAA,IAAAd,CAAA,gBAAAc,CAAA,EAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,CAAAc,CAAA,OAAAI,CAAA,CAAAR,CAAA,CAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,CAAAc,CAAA,OAAAI,CAAA,GAAAA,CAAA,CAAAX,GAAA,EAAAW,CAAA,CAAAC,GAAA,EAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,CAAAM,CAAA,CAAAI,CAAA,EAAAV,CAAA,CAAAM,CAAA,EAAAd,CAAA,CAAAc,CAAA,UAAAN,CAAA,CAAAH,OAAA,CAAAL,CAAA,CAAAG,CAAA,EAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,CAAAQ,CAAA,EAAAA,CAAA,EAE5C,QAAS,CAAAY,UAAUA,CAAA,CAAG,CAC3B,GAAAC,gBAAS,EAAC,UAAM,CACd,GAAIC,qBAAQ,CAACC,EAAE,GAAK,SAAS,CAAE,CAC7BC,8BAAQ,CAACC,aAAa,CAAC,CAAC,CAC1B,CACAC,iBAAQ,CAACC,WAAW,CAAC,CAAC,CACtBD,iBAAQ,CAACE,WAAW,CAAC,CAAC,CACtBF,iBAAQ,CAACG,QAAQ,CAAC,CAAC,CACnBH,iBAAQ,CAACI,gBAAgB,CAAC,CAAC,CAC7B,CAAC,CAAE,EAAE,CAAC,CACN,MAAO,CAAAxC,MAAA,CAAAe,OAAA,CAAA0B,aAAA,CAACtC,WAAA,CAAAuC,gBAAgB,EAAAC,MAAA,MAAAC,QAAA,EAAAC,QAAA,CAAArC,YAAA,CAAAsC,UAAA,IAAAC,YAAA,KAAE,CAAC,CAC7B"}

package/lib/commonjs/screens/camera/CCCDCameraScreen.js

@@ -1,2 +1,2 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=CCCDCameraScreen;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeVisionCamera=require("react-native-vision-camera");var _icons=require("../../assets/icons");var _MText=require("../../components/MText");var _imageEditor=_interopRequireDefault(require("@react-native-community/image-editor"));var _native=require("@react-navigation/native");var _reactNativeDeviceInfo=_interopRequireDefault(require("react-native-device-info"));var _reactNativePermissions=require("react-native-permissions");var _jsxFileName="/Users/tima/Documents/Tima/tima-care-v2-sdk/src/screens/camera/CCCDCameraScreen.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var _Dimensions$get=_reactNative.Dimensions.get('window'),screenWidth=_Dimensions$get.width,screenHeight=_Dimensions$get.height;var frameWidth=screenWidth*0.85;var frameHeight=frameWidth*0.63;var frameLeft=(screenWidth-frameWidth)/2;var frameTop=(screenWidth*4/3-frameHeight)/2;function CCCDCameraScreen(props){var navigation=(0,_native.useNavigation)();var camera=(0,_react.useRef)(null);var device=(0,_reactNativeVisionCamera.useCameraDevice)('back');var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),cameraActive=_useState2[0],setCameraActive=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),passPermission=_useState4[0],setPassPermission=_useState4[1];var requestPermissions=function requestPermissions(){(0,_reactNativePermissions.request)(_reactNative.Platform.OS==='ios'?_reactNativePermissions.PERMISSIONS.IOS.CAMERA:_reactNativePermissions.PERMISSIONS.ANDROID.CAMERA).then(function(result){switch(result){case _reactNativePermissions.RESULTS.UNAVAILABLE:console.log('This feature is not available (on this device / in this context)');_reactNative.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 _reactNativePermissions.RESULTS.DENIED:console.log('The permission has not been requested / is denied but requestable');_reactNative.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:function onPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{requestPermissions();}}}]);break;case _reactNativePermissions.RESULTS.LIMITED:console.log('The permission is limited: some actions are possible');_reactNative.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:function onPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{requestPermissions();}}}]);break;case _reactNativePermissions.RESULTS.GRANTED:console.log('The permission is granted');setPassPermission(true);break;case _reactNativePermissions.RESULTS.BLOCKED:console.log('The permission is denied and not requestable anymore');_reactNative.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;}});};(0,_react.useEffect)(function(){requestPermissions();},[]);var takePicture=function _callee2(){var photo;return _regenerator.default.async(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:if(!(camera.current==null)){_context2.next=2;break;}return _context2.abrupt("return");case 2:_context2.next=4;return _regenerator.default.awrap(camera.current.takePhoto({skipMetadata:true}));case 4:photo=_context2.sent;_reactNative.Image.getSize("file://"+photo.path,function _callee(width,height){var previewHeight,scaleX,scaleY,cropData,croppedUri;return _regenerator.default.async(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:previewHeight=screenWidth*4/3;scaleX=width/screenWidth;scaleY=height/previewHeight;cropData={offset:{x:frameLeft*scaleX,y:frameTop*scaleY},size:{width:frameWidth*scaleX,height:frameHeight*scaleY},displaySize:{width:frameWidth*scaleX,height:frameHeight*scaleY},resizeMode:'contain'};_context.prev=4;_context.next=7;return _regenerator.default.awrap(_imageEditor.default.cropImage("file://"+photo.path,cropData));case 7:croppedUri=_context.sent;setCameraActive(false);navigation.goBack();if(props.route.params.callback){props.route.params.callback(croppedUri.uri);}_context.next=16;break;case 13:_context.prev=13;_context.t0=_context["catch"](4);console.error(_context.t0);case 16:case"end":return _context.stop();}},null,null,[[4,13]],Promise);});case 6:case"end":return _context2.stop();}},null,null,null,Promise);};if(!device||!passPermission)return _react.default.createElement(_reactNative.View,{style:{flex:1,backgroundColor:'#000'},__self:this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:12}});return _react.default.createElement(_reactNative.View,{style:styles.container,__self:this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:styles.topContainer,__self:this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){navigation.goBack();},style:[{width:48,height:48,zIndex:1000,alignItems:'center'}],__self:this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:9}},_react.default.createElement(_icons.IconBackWhite,{__self:this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:11}}))),_react.default.createElement(_reactNativeVisionCamera.Camera,{style:styles.camera,device:device,isActive:cameraActive,photo:true,ref:camera,__self:this,__source:{fileName:_jsxFileName,lineNumber:181,columnNumber:7}}),_react.default.createElement(_reactNative.View,{style:styles.overlay,__self:this,__source:{fileName:_jsxFileName,lineNumber:188,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:styles.darkOverlayTop,__self:this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:9}}),_react.default.createElement(_reactNative.View,{style:styles.row,__self:this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:styles.darkOverlaySide,__self:this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:11}}),_react.default.createElement(_reactNative.View,{style:styles.frameBorder,__self:this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:11}}),_react.default.createElement(_reactNative.View,{style:styles.darkOverlaySide,__self:this,__source:{fileName:_jsxFileName,lineNumber:193,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:styles.darkOverlayBottom,__self:this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:9}})),_react.default.createElement(_reactNative.View,{style:styles.captureButton,__self:this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:7}},_react.default.createElement(_MText.MText,{style:{color:'#fff',marginBottom:16,textAlign:'center',paddingHorizontal:24},__self:this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:9}},"Vui l\xF2ng \u0111\u1EB7t gi\u1EA5y t\u1EDD n\u1EB1m v\u1EEBa khung h\xECnh ch\u1EEF nh\u1EADt, ch\u1EE5p \u0111\u1EE7 \xE1nh s\xE1ng v\xE0 r\xF5 n\xE9t."),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:takePicture,__self:this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:9}},_react.default.createElement(_icons.TakePhotoSvg,{__self:this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:11}}))));}var overlayColor='rgba(22, 22, 22, 0.7)';var styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:'#000'},camera:{flex:1},overlay:(0,_extends2.default)({},_reactNative.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:_reactNativeDeviceInfo.default.hasNotch()?60:24},textContainer:{position:'absolute',top:_reactNativeDeviceInfo.default.hasNotch()?60:24}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=CCCDCameraScreen;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeVisionCamera=require("react-native-vision-camera");var _icons=require("../../assets/icons");var _MText=require("../../components/MText");var _native=require("@react-navigation/native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _reactNativeImageManipulator=_interopRequireDefault(require("@oguzhnatly/react-native-image-manipulator"));var _jsxFileName="/Users/tima/Documents/Tima/tima-care-v2-sdk/src/screens/camera/CCCDCameraScreen.tsx",_this=this;function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var _Dimensions$get=_reactNative.Dimensions.get('window'),screenWidth=_Dimensions$get.width,screenHeight=_Dimensions$get.height;var getImageSize=function getImageSize(uri){return new Promise(function(resolve,reject){_reactNative.Image.getSize(uri,function(width,height){return resolve({width:width,height:height});},function(err){return reject(err);});});};var clamp=function clamp(value,min,max){return Math.min(Math.max(value,min),max);};function CCCDCameraScreen(props){var _props$route2,_props$route2$params;var insets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();var navigation=(0,_native.useNavigation)();var camera=(0,_react.useRef)(null);var device=(0,_reactNativeVisionCamera.useCameraDevice)('back');var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),cameraActive=_useState2[0],setCameraActive=_useState2[1];var _useCameraPermission=(0,_reactNativeVisionCamera.useCameraPermission)(),hasPermission=_useCameraPermission.hasPermission,requestPermission=_useCameraPermission.requestPermission;var _useState3=(0,_react.useState)({width:screenWidth,height:screenHeight}),_useState4=(0,_slicedToArray2.default)(_useState3,2),previewLayout=_useState4[0],setPreviewLayout=_useState4[1];(0,_react.useEffect)(function(){if(!hasPermission)requestPermission();},[hasPermission,requestPermission]);var takePicture=function _callee(){var photo,_props$route,_props$route$params,imageUri,_await$getImageSize,width,height,previewWidth,previewHeight,_frameWidth,_frameHeight,_frameX,_frameY,scale,renderedWidth,renderedHeight,offsetX,offsetY,cropX,cropY,cropWidth,cropHeight,cropXInt,cropYInt,cropWidthInt,cropHeightInt,cropData,result;return _regenerator.default.async(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(camera.current==null)){_context.next=2;break;}return _context.abrupt("return");case 2:_context.next=4;return _regenerator.default.awrap(camera.current.takePhoto({skipMetadata:true}));case 4:photo=_context.sent;_context.prev=5;imageUri="file://"+photo.path;_context.next=9;return _regenerator.default.awrap(getImageSize(imageUri));case 9:_await$getImageSize=_context.sent;width=_await$getImageSize.width;height=_await$getImageSize.height;previewWidth=previewLayout.width||screenWidth;previewHeight=previewLayout.height||screenHeight;_frameWidth=previewWidth*0.85;_frameHeight=_frameWidth*0.63;_frameX=(previewWidth-_frameWidth)/2;_frameY=(previewHeight-_frameHeight)/2;scale=Math.max(previewWidth/width,previewHeight/height);renderedWidth=width*scale;renderedHeight=height*scale;offsetX=(renderedWidth-previewWidth)/2;offsetY=(renderedHeight-previewHeight)/2;cropX=(_frameX+offsetX)/scale;cropY=(_frameY+offsetY)/scale;cropWidth=_frameWidth/scale;cropHeight=_frameHeight/scale;cropXInt=Math.floor(clamp(cropX,0,Math.max(0,width-1)));cropYInt=Math.floor(clamp(cropY,0,Math.max(0,height-1)));cropWidthInt=Math.floor(clamp(cropWidth,1,Math.max(1,width-cropXInt)));cropHeightInt=Math.floor(clamp(cropHeight,1,Math.max(1,height-cropYInt)));cropData={offset:{x:cropXInt,y:cropYInt},size:{width:cropWidthInt,height:cropHeightInt}};_context.next=34;return _regenerator.default.awrap(_reactNativeImageManipulator.default.manipulate(imageUri,[{crop:{originX:cropXInt,originY:cropYInt,width:cropWidthInt,height:cropHeightInt}}],{format:'jpg',compress:1}));case 34:result=_context.sent;setCameraActive(false);navigation.goBack();if((_props$route=props.route)!=null&&(_props$route$params=_props$route.params)!=null&&_props$route$params.callback){props.route.params.callback(result==null?void 0:result.uri);}_context.next=43;break;case 40:_context.prev=40;_context.t0=_context["catch"](5);console.error(_context.t0);case 43:case"end":return _context.stop();}},null,null,[[5,40]],Promise);};if(!device||!hasPermission)return _react.default.createElement(_reactNative.View,{style:{flex:1,backgroundColor:'#000'},__self:this,__source:{fileName:_jsxFileName,lineNumber:136,columnNumber:12}});var frameWidth=previewLayout.width*0.85;var frameHeight=frameWidth*0.63;var frameX=(previewLayout.width-frameWidth)/2;var frameY=(previewLayout.height-frameHeight)/2;return _react.default.createElement(_reactNative.View,{style:$container,onLayout:function onLayout(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;if(width>0&&height>0)setPreviewLayout({width:width,height:height});},__self:this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:5}},_react.default.createElement(_reactNativeVisionCamera.Camera,{style:{flex:1},device:device,isActive:cameraActive,photo:true,ref:camera,__self:this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:7}}),_react.default.createElement(_reactNative.View,{style:$overlay,pointerEvents:"none",__self:this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:[$darkOverlayTop,{height:frameY}],__self:this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:9}}),_react.default.createElement(_reactNative.View,{style:$row,__self:this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[$darkOverlaySide,{width:frameX,height:frameHeight}],__self:this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:11}}),_react.default.createElement(_reactNative.View,{style:[$frameBorder,{width:frameWidth,height:frameHeight}],__self:this,__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:11}},_react.default.createElement(Corner,{style:{top:0,left:0,borderTopWidth:CORNER_WIDTH,borderLeftWidth:CORNER_WIDTH,borderColor:BORDER_COLOR},__self:this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:13}}),_react.default.createElement(Corner,{style:{top:0,right:0,borderTopWidth:CORNER_WIDTH,borderRightWidth:CORNER_WIDTH,borderColor:BORDER_COLOR},__self:this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:13}}),_react.default.createElement(Corner,{style:{bottom:0,left:0,borderBottomWidth:CORNER_WIDTH,borderLeftWidth:CORNER_WIDTH,borderColor:BORDER_COLOR},__self:this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:13}}),_react.default.createElement(Corner,{style:{bottom:0,right:0,borderBottomWidth:CORNER_WIDTH,borderRightWidth:CORNER_WIDTH,borderColor:BORDER_COLOR},__self:this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:13}})),_react.default.createElement(_reactNative.View,{style:[$darkOverlaySide,{width:frameX,height:frameHeight}],__self:this,__source:{fileName:_jsxFileName,lineNumber:211,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:[$darkOverlayBottom,{height:frameY}],__self:this,__source:{fileName:_jsxFileName,lineNumber:215,columnNumber:9}})),_react.default.createElement(_reactNative.View,{style:[$back,{top:insets.top+16}],__self:this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){navigation.goBack();},style:{position:'absolute',left:0,width:48,height:48,zIndex:1000,alignItems:'center'},__self:this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:9}},_react.default.createElement(_icons.IconBackWhite,{__self:this,__source:{fileName:_jsxFileName,lineNumber:231,columnNumber:11}})),_react.default.createElement(_MText.MText,{style:{textAlign:'center',zIndex:10,color:'#FFFFFF',fontSize:16},__self:this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:9}},props!=null&&(_props$route2=props.route)!=null&&(_props$route2$params=_props$route2.params)!=null&&_props$route2$params.front?'Chụp CMND/ CCCD mặt trước':'Chụp CMND/ CCCD mặt sau')),_react.default.createElement(_reactNative.View,{style:{position:'absolute',bottom:24+insets.bottom,alignSelf:'center',flexDirection:'column',alignItems:'center'},__self:this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:7}},_react.default.createElement(_MText.MText,{style:{color:'#fff',marginBottom:16,textAlign:'center',paddingHorizontal:24},__self:this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:9}},"Vui l\xF2ng \u0111\u1EB7t gi\u1EA5y t\u1EDD n\u1EB1m v\u1EEBa khung h\xECnh ch\u1EEF nh\u1EADt, ch\u1EE5p \u0111\u1EE7 \xE1nh s\xE1ng v\xE0 r\xF5 n\xE9t."),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:takePicture,__self:this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:9}},_react.default.createElement(_icons.TakePhotoSvg,{__self:this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:11}}))));}var CORNER_SIZE=20;var CORNER_WIDTH=2;var BORDER_COLOR='#FDFDFD';var Corner=function Corner(_ref){var style=_ref.style;return _react.default.createElement(_reactNative.View,{style:[style,{position:'absolute',width:CORNER_SIZE,height:CORNER_SIZE}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:3}});};var overlayColor='rgba(22, 22, 22, 0.7)';var $back={position:'absolute',left:0,right:0};var $overlay=(0,_extends2.default)({},_reactNative.StyleSheet.absoluteFillObject,{justifyContent:'center',alignItems:'center'});var $container={flex:1,backgroundColor:'#000'};var $row={flexDirection:'row',alignItems:'center'};var $darkOverlayTop={width:'100%',backgroundColor:overlayColor};var $darkOverlayBottom={width:'100%',backgroundColor:overlayColor};var $darkOverlaySide={backgroundColor:overlayColor};var $frameBorder={};
 //# sourceMappingURL=CCCDCameraScreen.js.map

package/lib/commonjs/screens/camera/CCCDCameraScreen.js.flow

@@ -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,
+};