react-native-timacare 3.1.16-beta → 3.1.18-beta

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

@@ -5,6 +5,7 @@ import {
   Dimensions,
   Image,
   ImageStyle,
+  PermissionsAndroid,
   Platform,
   SafeAreaView,
   TextStyle,
@@ -12,7 +13,11 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import {
+  CommonActions,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -38,6 +43,8 @@ import ImagePicker from 'react-native-image-crop-picker';
 import { IconUpload } from '../../assets/svgs';
 
 export default function RegisterCamera(props: any) {
+  const isFocused = useIsFocused();
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
   const [showModal, setShowModal] = useState(false);
   const [taking, setTaking] = useState(false);
@@ -140,6 +147,21 @@ export default function RegisterCamera(props: any) {
     requestPermissions();
   }, []);
 
+  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]);
+
   const takePhoto = async () => {
     setTaking(true);
     const options = {
@@ -168,18 +190,40 @@ export default function RegisterCamera(props: any) {
   };
 
   const pickImageFromGallery = async () => {
+    if (Platform.OS === 'android') {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES ||
+          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+        {
+          title: 'Permission to access photos',
+          message: 'App needs access to your photos to pick images.',
+          buttonNeutral: 'Ask Me Later',
+          buttonNegative: 'Cancel',
+          buttonPositive: 'OK',
+        }
+      );
+
+      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+        console.log('Permission denied');
+        return;
+      }
+    }
     ImagePicker.openPicker({}).then((image) => {
       if (props?.route?.params?.front) {
         navigation.push(ScreenNames.VehicleRegistration, {
-          uri: image?.sourceURL,
+          uri:
+            Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
           loan: props?.route?.params?.loan,
         });
       } else if (props.route?.params?.callback) {
         navigation.goBack();
-        props.route?.params?.callback(image?.sourceURL);
+        props.route?.params?.callback(
+          Platform.OS === 'android' ? image?.path : 'file://' + image?.path
+        );
       } else {
         navigation.push(ScreenNames.RegisterBack, {
-          uri: image?.sourceURL,
+          uri:
+            Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
           loan: props?.route?.params?.loan,
         });
       }
@@ -190,7 +234,7 @@ export default function RegisterCamera(props: any) {
       style={[commonStyles.fill, { backgroundColor: 'black' }]}
       pointerEvents={'box-none'}
     >
-      {passPermission && (
+      {passPermission && shouldRenderCamera ? (
         <View
           style={[
             commonStyles.fill,
@@ -324,6 +368,8 @@ export default function RegisterCamera(props: any) {
             )}
           </View>
         </View>
+      ) : (
+        <></>
       )}
 
       <Modal

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

@@ -7,7 +7,11 @@ import {
   Platform,
   View,
 } from 'react-native';
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import {
+  CommonActions,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -25,6 +29,8 @@ import { ScreenNames } from '../../navigation';
 import DeviceInfo from 'react-native-device-info';
 
 export default function TTSSelfie(props: any) {
+  const isFocused = useIsFocused();
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
   const [taking, setTaking] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -120,6 +126,21 @@ export default function TTSSelfie(props: any) {
     requestPermissions();
   }, []);
 
+  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]);
+
   const takePhoto = async () => {
     setTaking(true);
     const options = {
@@ -163,7 +184,7 @@ export default function TTSSelfie(props: any) {
       style={{ flex: 1, backgroundColor: 'black' }}
       pointerEvents={'box-none'}
     >
-      {passPermission && (
+      {passPermission && shouldRenderCamera ? (
         <View
           style={[
             commonStyles.fill,
@@ -179,7 +200,7 @@ export default function TTSSelfie(props: any) {
               flexDirection: 'row',
               alignItems: 'center',
               justifyContent: 'center',
-              marginTop: DeviceInfo.hasNotch() ? 70 : 0,
+              marginTop: DeviceInfo.hasNotch() ? 70 : 16,
             }}
           >
             <MButton
@@ -212,6 +233,7 @@ export default function TTSSelfie(props: any) {
             }}
             type={RNCamera.Constants.Type.front}
             maxZoom={1}
+            captureAudio={false}
             androidCameraPermissionOptions={{
               title: 'Permission to use camera',
               message: 'We need your permission to use your camera',
@@ -263,7 +285,7 @@ export default function TTSSelfie(props: any) {
             )}
           </View>
         </View>
-      )}
+      ) : null}
 
       <Loading isLoading={isLoading} />
     </View>

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

@@ -5,6 +5,7 @@ import {
   Dimensions,
   Image,
   ImageStyle,
+  PermissionsAndroid,
   Platform,
   SafeAreaView,
   TextStyle,
@@ -12,7 +13,11 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import {
+  CommonActions,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
@@ -37,6 +42,8 @@ import { IconUpload } from '../../assets/svgs';
 import ImagePicker from 'react-native-image-crop-picker';
 
 export default function VehicleCamera(props: any) {
+  const isFocused = useIsFocused();
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
   const [showModal, setShowModal] = useState(false);
   const [title, setTitle] = useState(
@@ -175,19 +182,58 @@ export default function VehicleCamera(props: any) {
     loadIntro();
   }, []);
 
+  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]);
+
   const pickImageFromGallery = async () => {
+    if (Platform.OS === 'android') {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES ||
+          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+        {
+          title: 'Permission to access photos',
+          message: 'App needs access to your photos to pick images.',
+          buttonNeutral: 'Ask Me Later',
+          buttonNegative: 'Cancel',
+          buttonPositive: 'OK',
+        }
+      );
+
+      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+        console.log('Permission denied');
+        return;
+      }
+    }
     ImagePicker.openPicker({}).then((image) => {
+      console.log(image);
+
       if (props?.route?.params?.front) {
         navigation.push(ScreenNames.VehicleRegistrationFront, {
-          uri: image?.sourceURL,
+          uri:
+            Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
           loan: props?.route?.params?.loan,
         });
       } else if (props.route?.params?.callback) {
         navigation.goBack();
-        props.route?.params?.callback(image?.sourceURL);
+        props.route?.params?.callback(
+          Platform.OS === 'android' ? image?.path : 'file://' + image?.path
+        );
       } else {
         navigation.push(ScreenNames.VehicleRegistrationBack, {
-          uri: image?.sourceURL,
+          uri:
+            Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
           loan: props?.route?.params?.loan,
         });
       }
@@ -199,7 +245,7 @@ export default function VehicleCamera(props: any) {
       style={[$flex, { backgroundColor: 'black' }]}
       pointerEvents={'box-none'}
     >
-      {passPermission && (
+      {passPermission && shouldRenderCamera ? (
         <View
           style={[
             commonStyles.alignCenter,
@@ -339,6 +385,8 @@ export default function VehicleCamera(props: any) {
             </MText>
           </SafeAreaView>
         </View>
+      ) : (
+        <></>
       )}
       <Modal
         isVisible={showModal}