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

package.json

@@ -52,7 +52,8 @@
     ]
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^4.1.5",
+    "@babel/plugin-transform-regenerator": "^7.18.6",
+    "@gorhom/bottom-sheet": "^5.0.4",
     "@pagopa/io-app-design-system": "4.3.0",
     "@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

@@ -21,7 +21,7 @@ import {
   IOStackNavigationProp
 } from "../../../navigation/params/AppParamsList";
 import ROUTES from "../../../navigation/routes";
-import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { requestMediaPermission } from "../../../utils/permission";
 import {
   BarcodeAnalyticsFlow,
@@ -273,7 +273,7 @@ const useIOBarcodeFileReader = ({
     </View>
   );
 
-  const filePickerModal = useIOBottomSheetAutoresizableModal({
+  const filePickerModal = useIOBottomSheetModal({
     component: filePickerModalComponent,
     title: "",
     onDismiss: () => setFilePickerVisible(false)

ts/features/barcode/screens/BarcodeScanScreen.tsx

@@ -23,7 +23,7 @@ import {
   isIdPayEnabledSelector
 } 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";
@@ -206,7 +206,7 @@ const BarcodeScanScreen = () => {
     </View>
   );
 
-  const manualInputModal = useIOBottomSheetAutoresizableModal({
+  const manualInputModal = useIOBottomSheetModal({
     component: manualInputModalComponent,
     title: ""
   });

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ButtonOutline, VSpacer, IOToast } from "@pagopa/io-app-design-system";
 import LegacyMarkdown from "../../../../../../components/ui/Markdown/LegacyMarkdown";
 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";
 
@@ -39,7 +39,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/cie/__tests__/__snapshots__/wizards.test.tsx.snap

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

ts/features/design-system/core/DSBottomSheet.tsx

@@ -11,11 +11,7 @@ import {
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { SafeAreaView, View } from "react-native";
-import {
-  useIOBottomSheetAutoresizableModal,
-  useIOBottomSheetModal,
-  useLegacyIOBottomSheetModal
-} from "../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 import DESIGN_SYSTEM_ROUTES from "../navigation/routes";
 
@@ -29,8 +25,6 @@ export const DSBottomSheet = () => {
     dismissAutoresizableBottomSheetWithFooter();
     dismissVeryLongAutoresizableBottomSheetWithFooter();
     dismissVeryLongAutoresizableBottomSheetWithFooterFullScreen();
-    dismissLegacyBottomSheet();
-    dismissLegacyBottomSheetWithFooter();
   };
 
   const defaultFooter = (
@@ -42,7 +36,6 @@ export const DSBottomSheet = () => {
         label={"Dismiss bottom sheet"}
         onPress={handlePressDismiss}
       />
-      <VSpacer size={16} />
     </ContentWrapper>
   );
 
@@ -94,7 +87,7 @@ export const DSBottomSheet = () => {
     present: presentAutoresizableBottomSheet,
     bottomSheet: autoResizableBottomSheet,
     dismiss: dismissAutoresizableBottomSheet
-  } = useIOBottomSheetAutoresizableModal({
+  } = useIOBottomSheetModal({
     title: "Autoresizable Bottom Sheet",
     component: <BottomSheetLongContentBody />
   });
@@ -104,14 +97,11 @@ export const DSBottomSheet = () => {
     present: presentAutoresizableBottomSheetWithFooter,
     bottomSheet: autoResizableBottomSheetWithFooter,
     dismiss: dismissAutoresizableBottomSheetWithFooter
-  } = useIOBottomSheetAutoresizableModal(
-    {
-      title: "Autoresizable Bottom Sheet",
-      component: <BottomSheetLongContentBody />,
-      footer: defaultFooter
-    },
-    150
-  );
+  } = useIOBottomSheetModal({
+    title: "Autoresizable Bottom Sheet",
+    component: <BottomSheetLongContentBody />,
+    footer: defaultFooter
+  });
 
   // Static bottom sheet hook
   const {
@@ -141,53 +131,25 @@ export const DSBottomSheet = () => {
     present: presentVeryLongAutoresizableBottomSheetWithFooter,
     bottomSheet: veryLongAutoResizableBottomSheetWithFooter,
     dismiss: dismissVeryLongAutoresizableBottomSheetWithFooter
-  } = useIOBottomSheetAutoresizableModal(
-    {
-      title: "Autoresizable Bottom Sheet",
-      component: <BottomSheetVeryLongContentBody />,
-      footer: defaultFooter
-    },
-    80
-  );
+  } = useIOBottomSheetModal({
+    title: "Autoresizable Bottom Sheet",
+    component: <BottomSheetVeryLongContentBody />,
+    footer: defaultFooter
+  });
 
   const {
     present: presentVeryLongAutoresizableBottomSheetWithFooterFullScreen,
     bottomSheet: veryLongAutoResizableBottomSheetWithFooterFullScreen,
     dismiss: dismissVeryLongAutoresizableBottomSheetWithFooterFullScreen
-  } = useIOBottomSheetAutoresizableModal(
-    {
-      title: "Autoresizable Bottom Sheet, Full Screen",
-      component: (
-        <SafeAreaView>
-          <BottomSheetVeryLongContentBody />
-        </SafeAreaView>
-      ),
-      footer: defaultFooter,
-      fullScreen: true
-    },
-    80
-  );
-
-  const {
-    present: presentLegacyBottomSheet,
-    bottomSheet: legacyBottomSheet,
-    dismiss: dismissLegacyBottomSheet
-  } = useLegacyIOBottomSheetModal(
-    <BottomSheetContentBody />,
-    "Legacy Bottom Sheet",
-    250
-  );
-
-  const {
-    present: presentLegacyBottomSheetWithFooter,
-    bottomSheet: legacyBottomSheetWithFooter,
-    dismiss: dismissLegacyBottomSheetWithFooter
-  } = useLegacyIOBottomSheetModal(
-    <BottomSheetContentBody />,
-    "Legacy Bottom Sheet with footer",
-    400,
-    defaultFooter
-  );
+  } = useIOBottomSheetModal({
+    title: "Autoresizable Bottom Sheet, Full Screen",
+    component: (
+      <SafeAreaView>
+        <BottomSheetVeryLongContentBody />
+      </SafeAreaView>
+    ),
+    footer: defaultFooter
+  });
 
   const sectionTitleMargin = 16;
   const blockMargin = 48;
@@ -245,32 +207,12 @@ export const DSBottomSheet = () => {
             />
           </View>
         </VStack>
-
-        <VStack space={sectionTitleMargin}>
-          <H4 color={theme["textHeading-default"]}>Legacy</H4>
-
-          <View>
-            <ListItemNav
-              value="Legacy bottom sheet"
-              accessibilityLabel="Legacy bottom sheet"
-              onPress={presentLegacyBottomSheet}
-            />
-            <Divider />
-            <ListItemNav
-              value="Legacy bottom sheet with footer"
-              accessibilityLabel="Legacy bottom sheet with footer"
-              onPress={presentLegacyBottomSheetWithFooter}
-            />
-          </View>
-        </VStack>
         {staticBottomSheet}
         {staticBottomSheetWithFooter}
         {autoResizableBottomSheet}
         {autoResizableBottomSheetWithFooter}
         {veryLongAutoResizableBottomSheetWithFooter}
         {veryLongAutoResizableBottomSheetWithFooterFullScreen}
-        {legacyBottomSheet}
-        {legacyBottomSheetWithFooter}
       </VStack>
     </DesignSystemScreen>
   );

ts/features/idpay/code/components/IdPayInfoCieBottomSheet.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { FeatureInfo, H4, VSpacer } from "@pagopa/io-app-design-system";
 import {
   IOBottomSheetModal,
-  useIOBottomSheetAutoresizableModal
+  useIOBottomSheetModal
 } from "../../../../utils/hooks/bottomSheet";
 import I18n from "../../../../i18n";
 
@@ -32,7 +32,7 @@ const useIdPayInfoCieBottomSheet = (): IOBottomSheetModal => {
     </View>
   );
 
-  const modal = useIOBottomSheetAutoresizableModal({
+  const modal = useIOBottomSheetModal({
     component: getModalContent(),
     title: <H4>{I18n.t("idpay.initiative.cie.bottomSheet.title")}</H4>
   });

ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx

@@ -13,7 +13,7 @@ import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet";
 import { IdPayConfigurationMachineContext } from "../machine/provider";
 
 export const IbanConfigurationLanding = () => {
@@ -22,28 +22,25 @@ export const IbanConfigurationLanding = () => {
 
   const customGoBack = () => machine.send({ type: "back" });
 
-  const { bottomSheet, dismiss, present } = useIOBottomSheetAutoresizableModal(
-    {
-      title: I18n.t("idpay.configuration.iban.landing.modal.title"),
-      component: (
-        <Body>{I18n.t("idpay.configuration.iban.landing.modal.content")}</Body>
-      ),
-      footer: (
-        <ContentWrapper>
-          <ButtonSolid
-            label={I18n.t("idpay.configuration.iban.landing.modal.button")}
-            accessibilityLabel={I18n.t(
-              "idpay.configuration.iban.landing.modal.button"
-            )}
-            onPress={() => dismiss()}
-            fullWidth={true}
-          />
-          <VSpacer size={32} />
-        </ContentWrapper>
-      )
-    },
-    130
-  );
+  const { bottomSheet, dismiss, present } = useIOBottomSheetModal({
+    title: I18n.t("idpay.configuration.iban.landing.modal.title"),
+    component: (
+      <Body>{I18n.t("idpay.configuration.iban.landing.modal.content")}</Body>
+    ),
+    footer: (
+      <ContentWrapper>
+        <ButtonSolid
+          label={I18n.t("idpay.configuration.iban.landing.modal.button")}
+          accessibilityLabel={I18n.t(
+            "idpay.configuration.iban.landing.modal.button"
+          )}
+          onPress={() => dismiss()}
+          fullWidth={true}
+        />
+        <VSpacer size={32} />
+      </ContentWrapper>
+    )
+  });
 
   return (
     <BaseScreenComponent