react-native-timacare 3.1.38 → 3.1.40

package/src/screens/camera/index.tsx

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