react-native-timacare 3.3.17 → 3.3.18

package/src/screens/toan-trinh-so/RegisterCamera.tsx

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
@@ -6,17 +6,13 @@ import {
   Image,
   ImageStyle,
   Platform,
-  SafeAreaView,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
+  Alert,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -27,12 +23,7 @@ import { RNCamera } from 'react-native-camera';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  CloseIcon,
-  IconBackWhite,
-  TakePhotoSvg,
-  TimaSmall,
-} from '../../assets/icons';
+import { CloseIcon, TakePhotoSvg, TimaSmall } from '../../assets/icons';
 import MButton from '../../components/MButton';
 import { commonStyles } from '../CommonStyles';
 import { load, OCR_V3, save } from '../../utils/storage';
@@ -41,8 +32,10 @@ import DeviceInfo from 'react-native-device-info';
 import ImagePicker from 'react-native-image-crop-picker';
 import { IconUpload } from '../../assets/svgs';
 import { launchImageLibrary } from 'react-native-image-picker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function RegisterCamera(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
@@ -252,7 +245,7 @@ export default function RegisterCamera(props: any) {
           <View
             style={{
               marginVertical: 16,
-              marginTop: DeviceInfo.hasNotch() ? 70 : 8,
+              marginTop: insets.top + 16,
             }}
           >
             <TouchableOpacity
@@ -305,48 +298,39 @@ export default function RegisterCamera(props: any) {
             {({ camera, status, recordAudioPermissionStatus }) => {
               if (status !== 'READY') return <ActivityIndicator />;
             }}
-            <View
-              style={{
-                alignItems: 'center',
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                right: 0,
-              }}
-            >
-              <TouchableOpacity
-                onPress={() => {
-                  pickImageFromGallery();
-                }}
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 8,
-                  marginTop: 16,
-                }}
-              >
-                <IconUpload />
-                <MText
-                  style={{
-                    color: 'white',
-                    fontSize: 12,
-                  }}
-                >
-                  Tải ảnh từ thư viện
-                </MText>
-              </TouchableOpacity>
-            </View>
           </RNCamera>
           <View
             style={{
               position: 'absolute',
-              bottom: DeviceInfo.hasNotch() ? 16 : 8,
+              bottom: insets.bottom,
               left: 0,
               right: 0,
             }}
           >
             {!taking && (
               <>
+                <View style={{ alignItems: 'center', marginBottom: 8 }}>
+                  <TouchableOpacity
+                    onPress={() => {
+                      pickImageFromGallery();
+                    }}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}
+                  >
+                    <IconUpload />
+                    <MText
+                      style={{
+                        color: 'white',
+                        fontSize: 12,
+                      }}
+                    >
+                      Tải ảnh từ thư viện
+                    </MText>
+                  </TouchableOpacity>
+                </View>
                 <MText
                   style={{
                     color: 'white',

package/src/screens/toan-trinh-so/TTSSelfie.tsx

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
@@ -7,11 +7,7 @@ import {
   Platform,
   View,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -26,11 +22,12 @@ import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
 import Loading from '../../components/Loading';
 import { Api } from '../../services/api';
 import { ScreenNames } from '../../navigation';
-import DeviceInfo from 'react-native-device-info';
 import appStore from '../../AppStore';
 import { logEvent, logEventFb } from '../../utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function TTSSelfie(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
@@ -221,7 +218,7 @@ export default function TTSSelfie(props: any) {
               flexDirection: 'row',
               alignItems: 'center',
               justifyContent: 'center',
-              marginTop: DeviceInfo.hasNotch() ? 70 : 16,
+              marginTop: insets.top + 16,
             }}
           >
             <MButton

package/src/screens/toan-trinh-so/VehicleCamera.tsx

@@ -1,23 +1,18 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  ActivityIndicator,
+  Alert,
   Dimensions,
   Image,
   ImageStyle,
   Platform,
-  SafeAreaView,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
@@ -41,14 +36,14 @@ import { load, OCR_V2, save } from '../../utils/storage';
 import { IconUpload } from '../../assets/svgs';
 import ImagePicker from 'react-native-image-crop-picker';
 import { launchImageLibrary } from 'react-native-image-picker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+const { width: screenWidth } = 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 VehicleCamera(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [cameraKey, setCameraKey] = useState(0);
 
@@ -276,15 +271,14 @@ export default function VehicleCamera(props: any) {
               buttonPositive: 'Ok',
               buttonNegative: 'Cancel',
             }}
-            quality={0.8}
+            quality={0.9}
             pictureSize="1280x720"
           >
             <View style={$overlay}>
               <View style={$darkOverlayTop} />
-              <View style={$row}>
+              <View style={$overlayRow}>
                 <View style={$darkOverlaySide} />
                 <View style={$frameBorder}>
-                  {/* Top Left */}
                   <Corner
                     style={{
                       top: 0,
@@ -295,7 +289,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Top Right */}
                   <Corner
                     style={{
                       top: 0,
@@ -306,7 +299,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Bottom Left */}
                   <Corner
                     style={{
                       bottom: 0,
@@ -317,7 +309,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Bottom Right */}
                   <Corner
                     style={{
                       bottom: 0,
@@ -394,7 +385,7 @@ export default function VehicleCamera(props: any) {
               </>
             )}
           </View>
-          <SafeAreaView
+          <View
             style={[
               commonStyles.fill,
               { position: 'absolute', width: '100%', height: '100%' },
@@ -404,7 +395,7 @@ export default function VehicleCamera(props: any) {
               style={[
                 commonStyles.row,
                 commonStyles.alignCenter,
-                { paddingVertical: 16 },
+                { paddingVertical: 16, marginTop: insets.top },
               ]}
             >
               <MButton
@@ -436,7 +427,7 @@ export default function VehicleCamera(props: any) {
             >
               {title}
             </MText>
-          </SafeAreaView>
+          </View>
         </View>
       ) : (
         <View></View>
@@ -592,17 +583,17 @@ const $overlay: ViewStyle = {
 
 const $darkOverlayTop: ViewStyle = {
   width: '100%',
-  height: (screenHeight - frameHeight) / 2,
+  flex: 1,
   backgroundColor: overlayColor,
 };
 
 const $darkOverlayBottom: ViewStyle = {
   width: '100%',
-  height: (screenHeight - frameHeight) / 2,
+  flex: 1,
   backgroundColor: overlayColor,
 };
 const $darkOverlaySide: ViewStyle = {
-  width: (screenWidth - frameWidth) / 2,
+  flex: 1,
   height: frameHeight,
   backgroundColor: overlayColor,
 };
@@ -611,6 +602,13 @@ const $frameBorder: ViewStyle = {
   height: frameHeight,
 };
 
+const $overlayRow: ViewStyle = {
+  width: '100%',
+  height: frameHeight,
+  flexDirection: 'row',
+  alignItems: 'center',
+};
+
 const $row: ViewStyle = {
   flexDirection: 'row',
   alignItems: 'center',