chore(Cross): [IOAPPX-357] Upgrade @gorhom/bottom-sheet library

package.json

@@ -56,7 +56,8 @@
     "@babel/plugin-transform-private-methods": "^7.25.9",
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@gorhom/bottom-sheet": "^4.1.5",
+    "@babel/plugin-transform-regenerator": "^7.18.6",
+    "@gorhom/bottom-sheet": "^5.1.1",
     "@pagopa/io-app-design-system": "4.6.1",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",

patches/patches.md

@@ -12,16 +12,6 @@ Created on **16/03/2024**
 #### Reason:
 - Make PDF annotations on iOS read-only to align with Android behaviour.
 
-### react-native-vision-camera+2.15.4
-Created on **24/07/2023** 
-FIXME: remove this patch after this [PR](https://github.com/mrousavy/react-native-vision-camera/pull/1666) has been merged and a new vision camera version has been released.
-
-Updated on **01/10/2023** 
-FIXME: Fixed in the v2 branch [here](https://github.com/mrousavy/react-native-vision-camera/issues/1840#issuecomment-1741734963). Remove this patch when `v2.16.2` has been released.
-
-#### Reason:
-- This patch going to remove all codes related to `colorSpace` to fix an issue on iOS 17.0.2 that cause the crash on camera load
-
 ### react-native-device-info+8.3.3
 Created on **15/12/2021**
 

ts/components/screens/PinCreation/usePinValidationBottomSheet.tsx

@@ -4,7 +4,7 @@ import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import I18n from "../../../i18n";
 import { BulletList } from "../../BulletList";
-import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 
 const BottomSheetContent = memo(() => {
   const { bottom } = useSafeAreaInsets();
@@ -33,7 +33,7 @@ const BottomSheetContent = memo(() => {
 });
 
 export default () =>
-  useIOBottomSheetAutoresizableModal({
+  useIOBottomSheetModal({
     title: I18n.t("onboarding.pin.policy.title"),
     component: <BottomSheetContent />
   });

ts/features/barcode/hooks/useIOBarcodeFileReader.tsx

@@ -18,7 +18,7 @@ import {
   ImageLibraryOptions
 } from "react-native-image-picker";
 import I18n from "../../../i18n";
-import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import {
   BarcodeAnalyticsFlow,
   trackBarcodeFileUpload,
@@ -262,7 +262,7 @@ const useIOBarcodeFileReader = ({
     </View>
   );
 
-  const filePickerModal = useIOBottomSheetAutoresizableModal({
+  const filePickerModal = useIOBottomSheetModal({
     component: filePickerModalComponent,
     title: "",
     onDismiss: () => setFilePickerVisible(false)

ts/features/barcode/screens/BarcodeScanScreen.tsx

@@ -19,7 +19,7 @@ import {
 import { useIOSelector } from "../../../store/hooks";
 import { barcodesScannerConfigSelector } from "../../../store/reducers/backendStatus/remoteConfig";
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
-import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { IdPayPaymentRoutes } from "../../idpay/payment/navigation/routes";
 import { PaymentsCheckoutRoutes } from "../../payments/checkout/navigation/routes";
 import * as analytics from "../analytics";
@@ -217,7 +217,7 @@ const BarcodeScanScreen = () => {
     </View>
   );
 
-  const manualInputModal = useIOBottomSheetAutoresizableModal({
+  const manualInputModal = useIOBottomSheetModal({
     component: manualInputModalComponent,
     title: ""
   });

ts/features/bonus/cgn/components/detail/eyca/EycaInformationComponent.tsx

@@ -1,7 +1,7 @@
 import { ButtonOutline, IOToast, VSpacer } from "@pagopa/io-app-design-system";
 import IOMarkdown from "../../../../../../components/IOMarkdown";
 import I18n from "../../../../../../i18n";
-import { useIOBottomSheetAutoresizableModal } from "../../../../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../../../../utils/hooks/bottomSheet";
 import { openWebUrl } from "../../../../../../utils/url";
 import { EYCA_WEBSITE_BASE_URL } from "../../../utils/constants";
 
@@ -29,7 +29,7 @@ const EycaInformationComponent: React.FunctionComponent = () => (
 );
 
 export const useEycaInformationBottomSheet = () =>
-  useIOBottomSheetAutoresizableModal({
+  useIOBottomSheetModal({
     component: <EycaInformationComponent />,
     title: I18n.t("bonus.cgn.detail.status.eycaBottomSheetTitle")
   });

ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx

@@ -20,7 +20,7 @@ import I18n from "../../../../../i18n";
 import { IOStackNavigationProp } from "../../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../../store/hooks";
 import { isDesignSystemEnabledSelector } from "../../../../../store/reducers/persistedPreferences";
-import { useIOBottomSheetAutoresizableModal } from "../../../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../../../utils/hooks/bottomSheet";
 import { CgnDetailsParamsList } from "../../navigation/params";
 import CGN_ROUTES from "../../navigation/routes";
 import { cgnCategories } from "../../store/actions/categories";
@@ -40,8 +40,7 @@ export const CgnMerchantCategoriesListScreen = () => {
       IOStackNavigationProp<CgnDetailsParamsList, "CGN_MERCHANTS_CATEGORIES">
     >();
 
-  const { present, bottomSheet } = useIOBottomSheetAutoresizableModal({
-    fullScreen: true,
+  const { present, bottomSheet } = useIOBottomSheetModal({
     title: I18n.t("bonus.cgn.merchantsList.categoriesList.bottomSheet.title"),
     component: (
       <View style={{ paddingBottom: insets.bottom }}>

ts/features/bonus/cgn/screens/merchants/__tests__/__snapshots__/CgnMerchantsCategoriesSelectionScreen.test.tsx.snap

@@ -814,25 +814,16 @@ exports[`CgnMerchantsCategoriesSelectionScreen should render correctly 1`] = `
                               }
                             >
                               <Modal
-                                accessibilityPositionChangeAnnouncement=""
                                 accessible={false}
                                 backdropComponent={[Function]}
                                 enableDismissOnClose={true}
+                                enableDynamicSizing={true}
                                 footerComponent={[Function]}
                                 handleComponent={[Function]}
-                                handleComponentAccessibility={
-                                  {
-                                    "accessible": false,
-                                  }
-                                }
                                 hardwareAccelerated={false}
                                 importantForAccessibility="yes"
+                                maxDynamicContentSize={1334}
                                 onDismiss={[Function]}
-                                snapPoints={
-                                  [
-                                    10,
-                                  ]
-                                }
                                 style={
                                   {
                                     "borderCurve": "continuous",
@@ -844,46 +835,49 @@ exports[`CgnMerchantsCategoriesSelectionScreen should render correctly 1`] = `
                                 visible={true}
                               >
                                 <RCTScrollView
+                                  overScrollMode="never"
                                   style={
                                     {
-                                      "flex": 1,
                                       "paddingHorizontal": 24,
                                     }
                                   }
                                 >
                                   <View>
                                     <View
-                                      onLayout={[Function]}
+                                      style={
+                                        {
+                                          "paddingBottom": 0,
+                                        }
+                                      }
                                     >
-                                      <View
+                                      <Text
+                                        allowFontScaling={true}
+                                        dynamicTypeRamp="body"
+                                        maxFontSizeMultiplier={1.5}
                                         style={
-                                          {
-                                            "paddingBottom": 0,
-                                          }
+                                          [
+                                            {},
+                                            {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Sans Pro",
+                                              "fontSize": 16,
+                                              "fontStyle": "normal",
+                                              "fontWeight": "400",
+                                              "lineHeight": 24,
+                                            },
+                                          ]
                                         }
                                       >
-                                        <Text
-                                          allowFontScaling={true}
-                                          dynamicTypeRamp="body"
-                                          maxFontSizeMultiplier={1.5}
-                                          style={
-                                            [
-                                              {},
-                                              {
-                                                "color": "#555C70",
-                                                "fontFamily": "Titillium Sans Pro",
-                                                "fontSize": 16,
-                                                "fontStyle": "normal",
-                                                "fontWeight": "400",
-                                                "lineHeight": 24,
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          To facilitate your search and improve your experience, we have organized the categories according to frequency of use. This information is not tied to your profile, but is based on aggregate data from all users who use Carta Giovani Nazionale and have consented to data processing.
-                                        </Text>
-                                      </View>
+                                        To facilitate your search and improve your experience, we have organized the categories according to frequency of use. This information is not tied to your profile, but is based on aggregate data from all users who use Carta Giovani Nazionale and have consented to data processing.
+                                      </Text>
                                     </View>
+                                    <View
+                                      style={
+                                        {
+                                          "height": 0,
+                                        }
+                                      }
+                                    />
                                   </View>
                                 </RCTScrollView>
                               </Modal>

ts/features/cie/__tests__/__snapshots__/wizards.test.tsx.snap

@@ -809,9 +809,9 @@ exports[`CiePinWizard Should match the snapshot 1`] = `
         </View>
       </View>
       <RCTScrollView
+        overScrollMode="never"
         style={
           {
-            "flex": 1,
             "paddingHorizontal": 24,
           }
         }
@@ -1156,6 +1156,13 @@ exports[`CiePinWizard Should match the snapshot 1`] = `
               </Text>
             </View>
           </View>
+          <View
+            style={
+              {
+                "height": undefined,
+              }
+            }
+          />
         </View>
       </RCTScrollView>
     </View>