chore: [IOPLT-787] Upgrade react-native-image-picker to fix android p…

…olicy issue (#6482) > [!note] > This PR depends on #6348 ## Short description This PR upgrades `react-native-image-picker` to 7.2.2 in order to fix the new google play policy on the `READ_MEDIA_IMAGES` permission ## List of changes proposed in this pull request - Upgrade image picker library to latest available ## How to test Check the pick of an image on Barcode screen on both OS to check everything's fine --------- Co-authored-by: LazyAfternoons <[email protected]> Co-authored-by: Damiano Plebani <[email protected]> Co-authored-by: LazyAfternoons <[email protected]>
pagopa · Jan 8, 2025 · 3467298 · 3467298
1 parent 8ed401c
commit 3467298
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 230 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -209,6 +209,9 @@ dependencies {
     implementation "androidx.constraintlayout:constraintlayout:2.1.4"
     // Specifing this avoid :app:checkDebugDuplicateClasses failure
     implementation "com.google.guava:guava:27.0.1-android"
+    // Required by react-native-image-picker because we target a minSdkVersion < 30. In can be removed when we target minSdkVersion >= 30.
+    // https://github.com/react-native-image-picker/react-native-image-picker?tab=readme-ov-file#android-1
+    implementation("androidx.activity:activity:1.9.+")
 }
 
 // Add the following line to the bottom of the file:

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -40,9 +40,6 @@
   <!-- Required for local notifications -->
   <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
 
-    <!-- Media permission for Android API Level 33+-->
-  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
-
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:usesCleartextTraffic="true" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:requestLegacyExternalStorage="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:largeHeap="true">
 
     <!-- START Required by react-native-push-notification -->
@@ -130,6 +127,19 @@
         <data android:host="continua.io.pagopa.it" />
       </intent-filter>
     </activity>
+
+    <!-- Trigger Google Play services to install the backported photo picker module. -->
+    <!-- This is needed by react-native-image-picker because we target a minSdkVersion < 30. In can be removed when we target minSdkVersion >= 30. 
+    https://developer.android.com/training/data-storage/shared/photopicker#device-availability -->
+    <service android:name="com.google.android.gms.metadata.ModuleDependencies"
+            android:enabled="false"
+            android:exported="false"
+            tools:ignore="MissingClass">
+      <intent-filter>
+          <action android:name="com.google.android.gms.metadata.MODULE_DEPENDENCIES" />
+      </intent-filter>
+      <meta-data android:name="photopicker_activity:0:required" android:value="" />
+    </service>
   </application>
 
 </manifest>
diff --git a/android/settings.gradle b/android/settings.gradle
@@ -14,8 +14,6 @@ include ':react-native-share'
 project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
 include ':react-native-lewin-qrcode'
 project(':react-native-lewin-qrcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lewin-qrcode/android')
-include ':react-native-image-picker'
-project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
 include ':react-native-flag-secure-android'
 project(':react-native-flag-secure-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-flag-secure-android/android')
 include ':react-native-fs'

diff --git a/ios/ItaliaApp.xcodeproj/project.pbxproj b/ios/ItaliaApp.xcodeproj/project.pbxproj
@@ -537,6 +537,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/lottie-ios/LottiePrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/lottie-react-native/Lottie_React_Native_Privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-image-picker/RNImagePickerPrivacyInfo.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -550,6 +551,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/LottiePrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Lottie_React_Native_Privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImagePickerPrivacyInfo.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -605,6 +607,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/lottie-ios/LottiePrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/lottie-react-native/Lottie_React_Native_Privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-image-picker/RNImagePickerPrivacyInfo.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -618,6 +621,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/LottiePrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Lottie_React_Native_Privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImagePickerPrivacyInfo.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1444,8 +1444,27 @@ PODS:
     - React
   - react-native-get-random-values (1.11.0):
     - React-Core
-  - react-native-image-picker (4.10.3):
+  - react-native-image-picker (7.2.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-netinfo (11.4.1):
     - React-Core
   - react-native-notifications-utils (0.3.0):
@@ -2482,7 +2501,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: a2e1577d26b9758ef3092e66f5d67f6e8c7454d9
   react-native-fingerprint-scanner: 91bf6825709dd7bd3abc4588a4772eb097a2b2d8
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
-  react-native-image-picker: 1f5318beec2ebed6695454ffb9bea8c4152f1598
+  react-native-image-picker: 130fad649d07e4eec8faaed361d3bba570e1e5ff
   react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
   react-native-notifications-utils: 2684eeb23e47ea5d892b151c28ae07840d1448d1
   react-native-pager-view: 8bd7d72d1c260ef565952ac617ab6e492c457894

diff --git a/locales/de/index.yml b/locales/de/index.yml
@@ -3219,24 +3219,6 @@ transaction:
       subject: "Zahlungsgrund"
       noticeCode: "Kodex der Zahlungsmitteilung"
       taxCode: "Steuernummer Körperschaft"
-permissionRequest:
-  gallery:
-    title: "Erlaube IO den Zugriff auf deine Fotos"
-    subtitle: "Dazu musst du die Rechte in den Einstellungen deines Geräts ändern."
-    caption: "So geht's:"
-    step: "Schritt {{step}}"
-    steps:
-      android:
-        1: "Geh zu 'Einstellungen'"
-        2: "Wähle 'Apps'"
-        3: "Wähle 'IO'"
-        4: "Wähle den Punkt App-Berechtigungen"
-        5: "Lass den Zugriff auf Dateien und Medien zu"
-      ios:
-        1: "Geh zu 'Einstellungen'"
-        2: "Wähle 'IO'"
-        3: "Wähle 'Fotos' und erlaube den Zugriff"
-    cta: "Öffne Einstellungen"
 FIMS:
   updateApp:
     header: "Aktualisiere die App, um fortzufahren"

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -4189,24 +4189,6 @@ transaction:
       subject: Oggetto del pagamento
       noticeCode: Codice avviso
       taxCode: Codice Fiscale Ente
-permissionRequest:
-  gallery:
-    title: Consenti a IO di accedere alle tue foto
-    subtitle: Per farlo, devi modificare le preferenze nelle impostazioni di sistema del tuo dispositivo.
-    caption: "Ecco come:"
-    step: Step {{step}}
-    steps:
-      android:
-        1: Vai su “Impostazioni”
-        2: Seleziona “Applicazioni”
-        3: Seleziona “IO”
-        4: Seleziona la voce relativa alle autorizzazioni
-        5: Consenti l’accesso a file e media
-      ios:
-        1: Vai su “Impostazioni”
-        2: Seleziona “IO”
-        3: Seleziona “Foto” e consenti l’accesso
-    cta: Apri Impostazioni
 FIMS:
   updateApp:
     header: "Aggiorna l’app per proseguire"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -4189,24 +4189,6 @@ transaction:
       subject: Oggetto del pagamento
       noticeCode: Codice avviso
       taxCode: Codice Fiscale Ente
-permissionRequest:
-  gallery:
-    title: Consenti a IO di accedere alle tue foto
-    subtitle: Per farlo, devi modificare le preferenze nelle impostazioni di sistema del tuo dispositivo.
-    caption: "Ecco come:"
-    step: Step {{step}}
-    steps:
-      android:
-        1: Vai su “Impostazioni”
-        2: Seleziona “Applicazioni”
-        3: Seleziona “IO”
-        4: Seleziona la voce relativa alle autorizzazioni
-        5: Consenti l’accesso a file e media
-      ios:
-        1: Vai su “Impostazioni”
-        2: Seleziona “IO”
-        3: Seleziona “Foto” e consenti l’accesso
-    cta: Apri Impostazioni
 FIMS:
   updateApp:
     header: "Aggiorna l’app per proseguire"

diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-i18n": "^2.0.15",
     "react-native-image-pan-zoom": "^2.1.11",
-    "react-native-image-picker": "4.10.3",
+    "react-native-image-picker": "7.2.3",
     "react-native-keychain": "^4.0.5",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-markdown-display": "^7.0.2",

diff --git a/ts/features/barcode/hooks/useIOBarcodeFileReader.tsx b/ts/features/barcode/hooks/useIOBarcodeFileReader.tsx
@@ -1,5 +1,4 @@
 import { Divider, ListItemNav, VSpacer } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
 import * as A from "fp-ts/lib/Array";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
@@ -13,16 +12,13 @@ import DocumentPicker, {
   DocumentPickerResponse,
   types
 } from "react-native-document-picker";
-import * as ImagePicker from "react-native-image-picker";
-import { ImageLibraryOptions } from "react-native-image-picker";
-import I18n from "../../../i18n";
 import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../navigation/params/AppParamsList";
-import ROUTES from "../../../navigation/routes";
+  launchImageLibrary,
+  ImagePickerResponse,
+  ImageLibraryOptions
+} from "react-native-image-picker";
+import I18n from "../../../i18n";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
-import { requestMediaPermission } from "../../../utils/permission";
 import {
   BarcodeAnalyticsFlow,
   trackBarcodeFileUpload,
@@ -115,7 +111,6 @@ const useIOBarcodeFileReader = ({
 }: IOBarcodeFileReaderConfiguration): IOBarcodeFileReader => {
   const [isFilePickerVisible, setFilePickerVisible] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
   const handleBarcodeSuccess = (barcodes: Array<IOBarcode>) => {
     setIsLoading(false);
@@ -130,7 +125,7 @@ const useIOBarcodeFileReader = ({
   /**
    * Handles the selected image from the image picker and pass the asset to the {@link qrCodeFromImageTask} task
    */
-  const onImageSelected = async (response: ImagePicker.ImagePickerResponse) => {
+  const onImageSelected = async (response: ImagePickerResponse) => {
     if (response.didCancel) {
       setIsLoading(false);
       return;
@@ -173,15 +168,9 @@ const useIOBarcodeFileReader = ({
   };
 
   const showImagePicker = async () => {
-    const permissionGranted = await requestMediaPermission();
-    if (!permissionGranted) {
-      navigation.navigate(ROUTES.GALLERY_PERMISSION_INSTRUCTIONS);
-      return;
-    }
-
     setIsLoading(true);
 
-    void ImagePicker.launchImageLibrary(imageLibraryOptions, onImageSelected);
+    void launchImageLibrary(imageLibraryOptions, onImageSelected);
   };
 
   /**

diff --git a/ts/navigation/AuthenticatedStackNavigator.tsx b/ts/navigation/AuthenticatedStackNavigator.tsx
@@ -49,7 +49,6 @@ import ServicesNavigator from "../features/services/common/navigation/navigator"
 import { SERVICES_ROUTES } from "../features/services/common/navigation/routes";
 import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
 import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
-import { GalleryPermissionInstructionsScreen } from "../screens/misc/GalleryPermissionInstructionsScreen";
 import { PaymentsReceiptRoutes } from "../features/payments/receipts/navigation/routes";
 import { PaymentsReceiptNavigator } from "../features/payments/receipts/navigation/navigator";
 import { useIOSelector } from "../store/hooks";
@@ -188,14 +187,6 @@ const AuthenticatedStackNavigator = () => {
         }}
       />
 
-      <Stack.Screen
-        name={ROUTES.GALLERY_PERMISSION_INSTRUCTIONS}
-        component={GalleryPermissionInstructionsScreen}
-        options={{
-          gestureEnabled: isGestureEnabled
-        }}
-      />
-
       {cgnEnabled && (
         <Stack.Screen
           name={CGN_ROUTES.ACTIVATION.MAIN}

diff --git a/ts/navigation/params/AppParamsList.ts b/ts/navigation/params/AppParamsList.ts
@@ -81,8 +81,6 @@ export type AppParamsList = {
 
   [ROUTES.BARCODE_SCAN]: undefined;
 
-  [ROUTES.GALLERY_PERMISSION_INSTRUCTIONS]: undefined;
-
   [CGN_ROUTES.ACTIVATION.MAIN]: NavigatorScreenParams<CgnActivationParamsList>;
   [CGN_ROUTES.DETAILS.MAIN]: NavigatorScreenParams<CgnDetailsParamsList>;
   [CGN_ROUTES.EYCA.ACTIVATION

diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
@@ -103,9 +103,6 @@ const ROUTES = {
   // Barcode scan
   BARCODE_SCAN: "BARCODE_SCAN",
 
-  // Misc
-  GALLERY_PERMISSION_INSTRUCTIONS: "GALLERY_PERMISSION_INSTRUCTIONS",
-
   // Developer Mode
   DESIGN_SYSTEM: "DESIGN_SYSTEM",
   CGN_LANDING_PLAYGROUND: "CGN_LANDING_PLAYGROUND",