From 346729841d1bb66b1918224ff4bf7ed75cd7f870 Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Wed, 8 Jan 2025 11:10:41 +0100 Subject: [PATCH] chore: [IOPLT-787] Upgrade react-native-image-picker to fix android policy 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 Co-authored-by: Damiano Plebani Co-authored-by: LazyAfternoons --- android/app/build.gradle | 3 + android/app/src/main/AndroidManifest.xml | 16 ++- android/settings.gradle | 2 - ios/ItaliaApp.xcodeproj/project.pbxproj | 4 + ios/Podfile.lock | 23 +++- locales/de/index.yml | 18 --- locales/en/index.yml | 18 --- locales/it/index.yml | 18 --- package.json | 2 +- .../barcode/hooks/useIOBarcodeFileReader.tsx | 25 ++-- ts/navigation/AuthenticatedStackNavigator.tsx | 9 -- ts/navigation/params/AppParamsList.ts | 2 - ts/navigation/routes.ts | 3 - .../GalleryPermissionInstructionsScreen.tsx | 109 ------------------ ts/utils/permission.ts | 22 ---- yarn.lock | 10 +- 16 files changed, 54 insertions(+), 230 deletions(-) delete mode 100644 ts/screens/misc/GalleryPermissionInstructionsScreen.tsx diff --git a/android/app/build.gradle b/android/app/build.gradle index 2d82ac11ed8..1242ff6462f 100644 --- 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 index b3991fdffc9..44b21d5f4fe 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -40,9 +40,6 @@ - - - @@ -130,6 +127,19 @@ + + + + + + + + + diff --git a/android/settings.gradle b/android/settings.gradle index 586a32f5617..232922d6fee 100644 --- 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 index 46c1c7ea7f8..5de703eb6c9 100644 --- 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 index 1b9aab79456..06dde433409 100644 --- 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 index 8a179fe8536..63cabb837a2 100644 --- 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 index 703e5bca753..02c91be6510 100644 --- 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 index 283a728cec9..bb8bfbf506f 100644 --- 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 index 01fd5bc8c14..f38ed8815ae 100644 --- 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 index 16fb3bc796c..737fc87ceeb 100644 --- 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>(); const handleBarcodeSuccess = (barcodes: Array) => { 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 index 7191ba8ac12..7d262cb56f3 100644 --- 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 = () => { }} /> - - {cgnEnabled && ( ; [CGN_ROUTES.DETAILS.MAIN]: NavigatorScreenParams; [CGN_ROUTES.EYCA.ACTIVATION diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts index 0cd80806b46..bd4a849a6c8 100644 --- 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", diff --git a/ts/screens/misc/GalleryPermissionInstructionsScreen.tsx b/ts/screens/misc/GalleryPermissionInstructionsScreen.tsx deleted file mode 100644 index 6772b8789d3..00000000000 --- a/ts/screens/misc/GalleryPermissionInstructionsScreen.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { - Body, - Divider, - GradientScrollView, - H2, - ListItemHeader, - ListItemInfo, - VSpacer -} from "@pagopa/io-app-design-system"; -import { useNavigation } from "@react-navigation/native"; -import * as React from "react"; -import { Linking, Platform } from "react-native"; -import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel"; -import I18n from "../../i18n"; -import { - AppParamsList, - IOStackNavigationProp -} from "../../navigation/params/AppParamsList"; - -const GalleryPermissionInstructionsScreen = () => { - const navigation = useNavigation>(); - useHeaderSecondLevel({ title: "" }); - - const handleOpenAppSettings = async () => { - await Linking.openSettings(); - navigation.pop(); - }; - - return ( - - <> -

{I18n.t("permissionRequest.gallery.title")}

- - {I18n.t("permissionRequest.gallery.subtitle")} - - - {Platform.OS === "android" ? ( - - ) : ( - - )} - - - ); -}; - -const AndroidMediaPermissionSteps = () => ( - <> - - - - - - - - - - -); - -const IOSMediaPermissionSteps = () => ( - <> - - - - - - -); - -export { GalleryPermissionInstructionsScreen }; diff --git a/ts/utils/permission.ts b/ts/utils/permission.ts index 9f7efd946bb..89453ff290c 100644 --- a/ts/utils/permission.ts +++ b/ts/utils/permission.ts @@ -56,25 +56,3 @@ export const requestWriteCalendarPermission = async ( ios: Promise.resolve(true), default: Promise.resolve(true) }); - -/** - * Wrapper function to request permission to read images from the gallery - * @returns boolean that indicates wether the user has granted the permission or not - */ -export const requestMediaPermission = async () => { - switch (Platform.OS) { - case "android": - return requestIOPermission( - Platform.Version >= 33 - ? RNPermissions.PERMISSIONS.ANDROID.READ_MEDIA_IMAGES - : RNPermissions.PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE - ); - case "ios": - // On iOS, photo selection from the gallery is implicitly handled by the image picker. - // The picker itself prompts the user for permission to access photos, allowing them to - // select a photo that is then seamlessly passed back to the app. - return true; - default: - return false; - } -}; diff --git a/yarn.lock b/yarn.lock index c80e9c9d1bb..71d23fe4ef2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13693,7 +13693,7 @@ __metadata: 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 @@ -19007,13 +19007,13 @@ __metadata: languageName: node linkType: hard -"react-native-image-picker@npm:4.10.3": - version: 4.10.3 - resolution: "react-native-image-picker@npm:4.10.3" +"react-native-image-picker@npm:7.2.3": + version: 7.2.3 + resolution: "react-native-image-picker@npm:7.2.3" peerDependencies: react: "*" react-native: "*" - checksum: 1f1c5cae5950790cfbdab2e1f547cfe065de9949c7cf0102dec512f43889f586eed1c265e1ecbc88df106696650b3dc5bf936b862078906787aca7e9ca2f145c + checksum: 96d67516e8e1c1768c593ca1b0a507d5212d8ac5df2610ad9d6f38c188b8d0720966559867849f74b6c19d2500664ce17c907e5fa37ab72487abd363cf493e7d languageName: node linkType: hard