chore(Cross): [IOAPPX-414] Add NativeStackNavigator to the Design S…

…ystem section (#6340)
pagopa · Dec 3, 2024 · ac9c2bd · ac9c2bd
1 parent 0b3b8e3
commit ac9c2bd
Show file tree

Hide file tree

Showing 80 changed files with 571 additions and 71 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -626,7 +626,7 @@ PODS:
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
     - ReactCommon/turbomodule/core
-  - RNScreens (3.31.1):
+  - RNScreens (3.35.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
     - React-RCTImage
@@ -1129,7 +1129,7 @@ SPEC CHECKSUMS:
   RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
   RNReactNativeHapticFeedback: 6d24decfa94e037c2ecc312407d2a057b7933f10
   RNReanimated: c2027c397233801d4aceb7375e000ac87ec2e67d
-  RNScreens: b8d370282cdeae9df85dd5eab20c88eb5181243b
+  RNScreens: 2fc874a2605e88dedf43204a79fad1d2da4abfbe
   RNSentry: 3e667c2c6ea5d35ea292c7f262c6b44e43842cc1
   RNShare: 0fad69ae2d71de9d1f7b9a43acf876886a6cb99c
   RNStoreReview: 31dbfd0dac2eea9675f0b84f1dd3261c2110c337

diff --git a/package.json b/package.json
@@ -130,6 +130,7 @@
     "@react-navigation/bottom-tabs": "6.5.11",
     "@react-navigation/material-top-tabs": "6.6.5",
     "@react-navigation/native": "6.1.9",
+    "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "6.3.20",
     "@redux-saga/testing-utils": "^1.1.3",
     "@sentry/react-native": "^5.32.0",
@@ -196,7 +197,7 @@
     "react-native-responsive-screen": "^1.4.1",
     "react-native-safe-area-context": "^4.10.4",
     "react-native-screen-brightness": "^2.0.0-alpha",
-    "react-native-screens": "^3.31.1",
+    "react-native-screens": "^3.35.0",
     "react-native-share": "^10.2.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-store-review": "^0.4.3",

diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -801,6 +802,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -1398,6 +1400,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -1992,6 +1995,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewCentredContent.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -1130,6 +1131,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -2281,6 +2283,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -3321,6 +3324,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -4141,6 +4145,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -5186,6 +5191,7 @@ exports[`IOScrollViewCentredContent should match snapshot, with     description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -6120,6 +6126,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -7023,6 +7030,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -8151,6 +8159,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -9168,6 +9177,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -9965,6 +9975,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -10987,6 +10998,7 @@ exports[`IOScrollViewCentredContent should match snapshot, without  description,
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/IOScrollViewWithListItems.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`IOScrollViewWithListItems Rendering renders correctly with default prop
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -1097,6 +1098,7 @@ exports[`IOScrollViewWithListItems Rendering renders correctly without optional
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >
@@ -1732,6 +1734,7 @@ exports[`IOScrollViewWithListItems Rendering renders subtitle as array correctly
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/...nus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap b/...nus/cgn/screens/discount/___tests___/__snapshots__/CGNDiscountExpiredScreen.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`CGNDiscountExpiredScreen should render correctly 1`] = `
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/.../bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap b/.../bonus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountCodeScreen.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`CgnDiscountCodeScreen should render correctly 1`] = `
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/...onus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountDetailScreen.test.tsx.snap b/...onus/cgn/screens/discount/___tests___/__snapshots__/CgnDiscountDetailScreen.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`CgnDiscountDetailScreen should render correctly 1`] = `
               "position": "absolute",
               "right": 0,
               "top": 0,
+              "zIndex": undefined,
             }
           }
         >

diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx
@@ -1,18 +1,15 @@
 import {
-  IOVisualCostants,
+  IOColors,
   IconButton,
+  makeFontStyleObject,
   useIOExperimentalDesign,
+  useIOTheme,
   useIOThemeContext
 } from "@pagopa/io-app-design-system";
 import { ThemeProvider, useNavigation } from "@react-navigation/native";
-import {
-  StackNavigationOptions,
-  TransitionPresets,
-  createStackNavigator
-} from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
-import { Alert, Platform, View } from "react-native";
-import { makeFontStyleObject } from "../../../components/core/fonts";
+import { Alert, Platform } from "react-native";
 import HeaderFirstLevel from "../../../components/ui/HeaderFirstLevel";
 import {
   IONavigationDarkTheme,
@@ -75,43 +72,21 @@ import { DSWallet } from "../core/DSWallet";
 import { DesignSystemParamsList } from "./params";
 import DESIGN_SYSTEM_ROUTES from "./routes";
 
-const Stack = createStackNavigator<DesignSystemParamsList>();
-
-// BackButton managed through React Navigation
-const RNNBackButton = () => {
-  const navigation = useNavigation();
-  const { themeType } = useIOThemeContext();
-  return (
-    <View style={{ marginLeft: IOVisualCostants.appMarginDefault }}>
-      <IconButton
-        icon={Platform.select({
-          android: "backAndroid",
-          default: "backiOS"
-        })}
-        color={themeType === "dark" ? "contrast" : "neutral"}
-        onPress={() => {
-          navigation.goBack();
-        }}
-        accessibilityLabel={""}
-      />
-    </View>
-  );
-};
+const Stack = createNativeStackNavigator<DesignSystemParamsList>();
 
 const RNNCloseButton = () => {
   const navigation = useNavigation();
+  const { themeType } = useIOThemeContext();
 
   return (
-    <View style={{ marginRight: IOVisualCostants.appMarginDefault }}>
-      <IconButton
-        icon="closeMedium"
-        color="neutral"
-        onPress={() => {
-          navigation.goBack();
-        }}
-        accessibilityLabel={""}
-      />
-    </View>
+    <IconButton
+      icon="closeMedium"
+      color={themeType === "dark" ? "contrast" : "neutral"}
+      onPress={() => {
+        navigation.goBack();
+      }}
+      accessibilityLabel={""}
+    />
   );
 };
 
@@ -139,27 +114,25 @@ const HeaderFirstLevelComponent = () => (
   />
 );
 
-const customModalHeaderConf: StackNavigationOptions = {
-  headerLeft: () => null,
-  headerTitle: () => null,
-  headerRight: RNNCloseButton,
-  headerStyle: { height: IOVisualCostants.headerHeight },
-  headerStatusBarHeight: 0
-};
-
 export const DesignSystemNavigator = () => {
   const { isExperimental } = useIOExperimentalDesign();
   const { themeType } = useIOThemeContext();
+  const theme = useIOTheme();
 
-  const customHeaderConf: StackNavigationOptions = {
+  const customModalHeaderConf = {
+    headerRight: RNNCloseButton,
+    title: DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.title,
+    sheetCornerRadius: 24,
     headerTitleStyle: {
-      ...(isExperimental
-        ? makeFontStyleObject("Regular", false, "ReadexPro")
-        : makeFontStyleObject("Semibold", false, "TitilliumSansPro")),
-      fontSize: 14
-    },
-    headerTitleAlign: "center",
-    headerLeft: RNNBackButton
+      ...makeFontStyleObject(
+        14,
+        isExperimental ? "Titillio" : "TitilliumSansPro",
+        18,
+        isExperimental ? "Regular" : "Semibold",
+        undefined
+      ),
+      color: IOColors[theme["textHeading-default"]]
+    }
   };
 
   return (
@@ -170,13 +143,29 @@ export const DesignSystemNavigator = () => {
     >
       <Stack.Navigator
         initialRouteName={DESIGN_SYSTEM_ROUTES.MAIN.route}
-        screenOptions={customHeaderConf}
+        screenOptions={{
+          headerTintColor: IOColors[theme["interactiveElem-default"]],
+          headerTitleStyle: {
+            ...makeFontStyleObject(
+              14,
+              isExperimental ? "Titillio" : "TitilliumSansPro",
+              18,
+              isExperimental ? "Regular" : "Semibold",
+              undefined
+            ),
+            color: IOColors[theme["textHeading-default"]]
+          },
+          headerTitleAlign: "center",
+          headerBackTitleVisible: false,
+          headerShown: true,
+          autoHideHomeIndicator: true
+        }}
       >
         <Stack.Screen
           name={DESIGN_SYSTEM_ROUTES.MAIN.route}
           component={DesignSystem}
           options={{
-            headerTitle: DESIGN_SYSTEM_ROUTES.MAIN.title
+            title: DESIGN_SYSTEM_ROUTES.MAIN.title
           }}
         />
 
@@ -563,13 +552,10 @@ export const DesignSystemNavigator = () => {
 
         <Stack.Group
           screenOptions={{
-            headerMode: "screen",
-            presentation: "modal",
+            presentation: "formSheet",
             ...(Platform.OS === "ios"
               ? {
-                  gestureEnabled: isGestureEnabled,
-                  cardOverlayEnabled: true,
-                  ...TransitionPresets.ModalPresentationIOS
+                  gestureEnabled: isGestureEnabled
                 }
               : null)
           }}

diff --git a/ts/features/design-system/navigation/routes.ts b/ts/features/design-system/navigation/routes.ts
@@ -95,7 +95,7 @@ const DESIGN_SYSTEM_ROUTES = {
     },
     FULL_SCREEN_MODAL: {
       route: "DS_FULLSCR_MODAL",
-      title: "Full screen modal"
+      title: "Full screen modal (native)"
     },
     SCREEN_END_MARGIN: {
       route: "DS_SCREEN_END_MARGIN",