chore: [IOBP-466] Add gallery permission request in barcode scan scre…

…en for iOS devices (#5334) ⚠️ Depends on #5313 ## Short description This PR adds the image gallery permission request in barcode scan screen for iOS devices ## List of changes proposed in this pull request - Added `react-native-permissions` package - Added `react-native-permissions` configuration in `Podfile` - Updated `@pagopa/io-app-design-system` to v 1.19.0 - Removed `react-native` and `@types/react-native` patches for Android media permissions, now being managed by `react-native-permissions` library - Replaced permission request functions in `ts/utils/permissions.ts` with new implementation using `react-native-permissions` - Renamed `AndroidMediaPermissionRequestScreen ` to `GalleryPermissionInstructionsScreen`, which now displays instructions for both Android and iOS devices ## How to test Check the following with a fresh install on both iOS and Android devices: - navigate to the barcode scan screen and tap on **Upload > Upload image**, a prompt should be shown to request gallery permissions. If permissions are denied, a screen with instructions is shown - navigate to the **Profile > Preferences** section, tap on **Preferred Calendar**, a prompt should be shown to request calendar permissions ## Preview https://github.com/pagopa/io-app/assets/6160324/2ec97018-261a-4323-91d8-15a194841773 --------- Co-authored-by: Martino Cesari Tomba <[email protected]> Co-authored-by: Andrea Piai <[email protected]> Co-authored-by: Alessandro Izzo <[email protected]>
pagopa · Jan 17, 2024 · 12c22e8 · 12c22e8
1 parent a09a4e5
commit 12c22e8
Show file tree

Hide file tree

Showing 21 changed files with 278 additions and 231 deletions.
diff --git a/ios/Podfile b/ios/Podfile
@@ -1,8 +1,16 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+require_relative '../node_modules/react-native-permissions/scripts/setup'
+
 platform :ios, '12.4'
 install! 'cocoapods', :deterministic_uuids => false
 
+# Required by react-native-permissions
+# https://github.com/zoontek/react-native-permissions?tab=readme-ov-file#ios
+setup_permissions([
+  'PhotoLibrary', # Required for Gallery read permission
+])
+
 production = ENV["PRODUCTION"] == "1"
 # This env is used to check whether
 # we are in a CI environment or not.

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -502,6 +502,8 @@ PODS:
     - React
   - RNKeychain (4.0.5):
     - React
+  - RNPermissions (4.0.0):
+    - React-Core
   - RNQrGenerator (1.4.0):
     - React
     - ZXingObjC
@@ -680,6 +682,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNI18n (from `../node_modules/react-native-i18n`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
+  - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNQrGenerator (from `../node_modules/rn-qr-generator`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -877,6 +880,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-i18n"
   RNKeychain:
     :path: "../node_modules/react-native-keychain"
+  RNPermissions:
+    :path: "../node_modules/react-native-permissions"
   RNQrGenerator:
     :path: "../node_modules/rn-qr-generator"
   RNReactNativeHapticFeedback:
@@ -998,6 +1003,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: dec4645026e7401a0899f2846d864403478ff6a5
   RNI18n: e2f7e76389fcc6e84f2c8733ea89b92502351fd8
   RNKeychain: 840f8e6f13be0576202aefcdffd26a4f54bfe7b5
+  RNPermissions: b3d9d00889e37cc184d365ab04bb7a3f20811b1c
   RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
   RNReactNativeHapticFeedback: 6d24decfa94e037c2ecc312407d2a057b7933f10
   RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
@@ -1024,6 +1030,6 @@ SPEC CHECKSUMS:
   ZendeskSupportSDK: 92e6f9d334e81e9186f8a17583862350460a5393
   ZXingObjC: fdbb269f25dd2032da343e06f10224d62f537bdb
 
-PODFILE CHECKSUM: 0d78c2a7f58353c7eed2163b7e3b3747b00ff101
+PODFILE CHECKSUM: 4a1130da2ee9cd7365bb5a5290feaed31a6bd470
 
 COCOAPODS: 1.12.1
diff --git a/jestSetup.js b/jestSetup.js
@@ -99,3 +99,7 @@ jest.mock("@gorhom/bottom-sheet", () => {
 jest.mock("react-native-device-info", () => mockRNDeviceInfo);
 
 jest.mock("react-native-pdf", () => jest.fn());
+
+jest.mock("react-native-permissions", () =>
+  require("react-native-permissions/mock")
+);
diff --git a/locales/de/index.yml b/locales/de/index.yml
@@ -2415,15 +2415,16 @@ transaction:
       iuv: "IUV"
       subject: "Zahlungsgrund"
 permissionRequest:
-  media:
+  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:
-      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"
+      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"
     cta: "Öffne Einstellungen"
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3966,15 +3966,20 @@ transaction:
       iuv: IUV
       subject: Oggetto del pagamento
 permissionRequest:
-  media:
+  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:
-      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
+      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
diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3966,15 +3966,20 @@ transaction:
       iuv: IUV
       subject: Oggetto del pagamento
 permissionRequest:
-  media:
+  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:
-      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
+      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
diff --git a/package.json b/package.json
@@ -187,6 +187,7 @@
     "react-native-modal-datetime-picker": "^10.2.0",
     "react-native-pdf": "^6.4.0",
     "react-native-pdf-thumbnail": "^1.2.1",
+    "react-native-permissions": "^4.0.0",
     "react-native-popup-menu": "^0.15.11",
     "react-native-progress-circle": "^2.1.0",
     "react-native-push-notification": "^8.1.1",

diff --git a/patches/@types+react-native+0.69.6.patch b/patches/@types+react-native+0.69.6.patch
@@ -1,19 +1,18 @@
 diff --git a/node_modules/@types/react-native/index.d.ts b/node_modules/@types/react-native/index.d.ts
-index bf4b3d6..c7b5ce3 100755
+index bf4b3d6..a54a72b 100755
 --- a/node_modules/@types/react-native/index.d.ts
 +++ b/node_modules/@types/react-native/index.d.ts
-@@ -7723,7 +7723,9 @@ export type Permission =
+@@ -7723,7 +7723,8 @@ export type Permission =
      | 'android.permission.WRITE_EXTERNAL_STORAGE'
      | 'android.permission.BLUETOOTH_CONNECT'
      | 'android.permission.BLUETOOTH_SCAN'
 -    | 'android.permission.BLUETOOTH_ADVERTISE';
 +    | 'android.permission.BLUETOOTH_ADVERTISE'
-+    | 'android.permission.POST_NOTIFICATIONS'
-+    | 'android.permission.READ_MEDIA_IMAGES';
++    | 'android.permission.POST_NOTIFICATIONS';
 
  export type PermissionStatus = 'granted' | 'denied' | 'never_ask_again';
 
-@@ -8370,6 +8372,10 @@ export interface UIManagerStatic {
+@@ -8370,6 +8371,10 @@ export interface UIManagerStatic {
       * commandArgs - Args of the native method that we can pass from JS to native.
       */
      dispatchViewManagerCommand: (reactTag: number | null, commandID: number | string, commandArgs?: Array<any>) => void;

diff --git a/patches/patches.md b/patches/patches.md
@@ -26,22 +26,12 @@ Created on **19/07/2023**
 #### Reason:
 - This patch is going to add a missing POST_NOTIFICATIONS permission (Android 13) (remove this patch after updating to version 71 of React Native).
 
-Updated on **12/12/2023**
-
-#### Reason:
-- Added READ_MEDIA_IMAGES permission (Android 33+) (remove this patch after updating to version 71 of React Native).
-
 ### @types/react-native+0.69.9
 Created on **19/07/2023**
 
 #### Reason:
 - Missing POST_NOTIFICATIONS permission type (remove this patch after updating to version 71 of React Native).
 
-Updated on **12/12/2023**
-
-#### Reason:
-- Missing READ_MEDIA_IMAGES permission type (remove this patch after updating to version 71 of React Native).
-
 ### @types/react-native+0.69.6
 Created on **30/08/2022**
 

diff --git a/patches/react-native+0.69.9.patch b/patches/react-native+0.69.9.patch
@@ -1,34 +1,26 @@
 diff --git a/node_modules/react-native/Libraries/.DS_Store b/node_modules/react-native/Libraries/.DS_Store
 new file mode 100644
-index 0000000..26ba7a3
-Binary files /dev/null and b/node_modules/react-native/Libraries/.DS_Store differ
+index 0000000..e69de29
 diff --git a/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js b/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
-index 227af12..7a1abc4 100644
+index 227af12..2c59500 100644
 --- a/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
 +++ b/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
-@@ -68,6 +68,8 @@ const PERMISSIONS = Object.freeze({
+@@ -68,6 +68,7 @@ const PERMISSIONS = Object.freeze({
    ANSWER_PHONE_CALLS: 'android.permission.ANSWER_PHONE_CALLS',
    READ_PHONE_NUMBERS: 'android.permission.READ_PHONE_NUMBERS',
    UWB_RANGING: 'android.permission.UWB_RANGING',
-+  POST_NOTIFICATIONS: 'android.permission.POST_NOTIFICATIONS',
-+  READ_MEDIA_IMAGES: 'android.permission.READ_MEDIA_IMAGES'
++  POST_NOTIFICATIONS: 'android.permission.POST_NOTIFICATIONS'
  });
 
  /**
-@@ -93,11 +95,13 @@ class PermissionsAndroid {
+@@ -93,6 +94,7 @@ class PermissionsAndroid {
      CALL_PHONE: string,
      CAMERA: string,
      GET_ACCOUNTS: string,
 +    POST_NOTIFICATIONS: string,
      PROCESS_OUTGOING_CALLS: string,
      READ_CALENDAR: string,
      READ_CALL_LOG: string,
-     READ_CONTACTS: string,
-     READ_EXTERNAL_STORAGE: string,
-+    READ_MEDIA_IMAGES: string,
-     READ_PHONE_NUMBERS: string,
-     READ_PHONE_STATE: string,
-     READ_SMS: string,
 diff --git a/node_modules/react-native/React/AccessibilityResources/it.lproj/Localizable.strings b/node_modules/react-native/React/AccessibilityResources/it.lproj/Localizable.strings
 new file mode 100644
 index 0000000..00a9a38

diff --git a/ts/features/barcode/hooks/useIOBarcodeFileReader.tsx b/ts/features/barcode/hooks/useIOBarcodeFileReader.tsx
@@ -7,7 +7,7 @@ import * as T from "fp-ts/lib/Task";
 import * as TE from "fp-ts/lib/TaskEither";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
-import { Alert, Linking, Platform, View } from "react-native";
+import { Alert, Linking, View } from "react-native";
 import DocumentPicker, {
   DocumentPickerOptions,
   DocumentPickerResponse,
@@ -22,7 +22,7 @@ import {
 } from "../../../navigation/params/AppParamsList";
 import ROUTES from "../../../navigation/routes";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
-import { requestIOAndroidMediaPermission } from "../../../utils/permission";
+import { requestMediaPermission } from "../../../utils/permission";
 import {
   BarcodeAnalyticsFlow,
   trackBarcodeFileUpload,
@@ -173,12 +173,10 @@ const useIOBarcodeFileReader = ({
   };
 
   const showImagePicker = async () => {
-    if (Platform.OS === "android") {
-      const permissionGranted = await requestIOAndroidMediaPermission();
-      if (!permissionGranted) {
-        navigation.navigate(ROUTES.ANDROID_MEDIA_PERMISSIONS);
-        return;
-      }
+    const permissionGranted = await requestMediaPermission();
+    if (!permissionGranted) {
+      navigation.navigate(ROUTES.GALLERY_PERMISSION_INSTRUCTIONS);
+      return;
     }
 
     setIsLoading(true);

diff --git a/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx b/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx
@@ -3,12 +3,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { Text as NBButtonText } from "native-base";
 import React from "react";
-import {
-  Alert,
-  Dimensions,
-  PermissionsAndroid,
-  StyleSheet
-} from "react-native";
+import { Alert, Dimensions, StyleSheet } from "react-native";
 import { Calendar } from "react-native-calendar-events";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
@@ -36,7 +31,7 @@ import {
   saveCalendarEvent,
   searchEventInCalendar
 } from "../../../../utils/calendar";
-import { requestIOAndroidPermission } from "../../../../utils/permission";
+import { requestWriteCalendarPermission } from "../../../../utils/permission";
 import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity";
 import { withLightModalContext } from "../../../../components/helpers/withLightModalContext";
 import SelectCalendarModal from "../../../../components/SelectCalendarModal";
@@ -248,14 +243,11 @@ class CalendarEventButton extends React.PureComponent<Props, State> {
       return;
     }
 
-    await requestIOAndroidPermission(
-      PermissionsAndroid.PERMISSIONS.WRITE_CALENDAR,
-      {
-        title: I18n.t("permissionRationale.calendar.title"),
-        message: I18n.t("permissionRationale.calendar.message"),
-        buttonPositive: I18n.t("global.buttons.choose")
-      }
-    );
+    await requestWriteCalendarPermission({
+      title: I18n.t("permissionRationale.calendar.title"),
+      message: I18n.t("permissionRationale.calendar.message"),
+      buttonPositive: I18n.t("global.buttons.choose")
+    });
 
     // Check the authorization status
     void checkAndRequestPermission()

diff --git a/ts/navigation/AuthenticatedStackNavigator.tsx b/ts/navigation/AuthenticatedStackNavigator.tsx
@@ -64,7 +64,7 @@ import {
 } from "../features/walletV3/transaction/navigation/navigator";
 import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
 import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
-import { AndroidMediaPermissionRequestScreen } from "../screens/misc/AndroidMediaPermissionRequestScreen";
+import { GalleryPermissionInstructionsScreen } from "../screens/misc/GalleryPermissionInstructionsScreen";
 import { useIOSelector } from "../store/hooks";
 import {
   isCdcEnabledSelector,
@@ -156,8 +156,8 @@ const AuthenticatedStackNavigator = () => {
       />
 
       <Stack.Screen
-        name={ROUTES.ANDROID_MEDIA_PERMISSIONS}
-        component={AndroidMediaPermissionRequestScreen}
+        name={ROUTES.GALLERY_PERMISSION_INSTRUCTIONS}
+        component={GalleryPermissionInstructionsScreen}
         options={{
           gestureEnabled: isGestureEnabled
         }}

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

diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
@@ -117,7 +117,7 @@ const ROUTES = {
   BARCODE_SCAN: "BARCODE_SCAN",
 
   // Misc
-  ANDROID_MEDIA_PERMISSIONS: "ANDROID_MEDIA_PERMISSIONS",
+  GALLERY_PERMISSION_INSTRUCTIONS: "GALLERY_PERMISSION_INSTRUCTIONS",
 
   // Developer Mode
   DESIGN_SYSTEM: "DESIGN_SYSTEM",