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

…ystem section (#5424) > [!note] > This PR depends on #5415 > [!caution] > This PR causes some issues to the `RootModal` component, as pointed out by @shadowsheep1: #5415 (review) ## Short description This PR adds the new `NativeStackNavigator` to the Design System section. This change enables a true native modal behaviour on iOS (including _pull down to dismiss_), other than a native navigation on both platforms. ## List of changes proposed in this pull request - Use `createNativeStackNavigator` to create the native navigator - Remove previously nested navigator thanks to the new API offered by the `6.x` version - Update `react-native-screens` - Add the new `@react-navigation/native-stack` package ### Preview https://github.com/pagopa/io-app/assets/1255491/b1877c26-12d0-44d6-b728-3296e87c33c7 ## How to test Launch the local app and go to the **Design System** section --------- Co-authored-by: Cristiano Tofani <cri.tofani@gmail.com> Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it> Co-authored-by: LazyAfternoons <lazyafternoons@outlook.it> Co-authored-by: Fabio Bombardi <16268789+shadowsheep1@users.noreply.github.com> Co-authored-by: Federico Mastrini <federicomastrini93@gmail.com> Co-authored-by: Alessandro Dell'Oste <alessandro.delloste1@gmail.com>
pagopa · Apr 11, 2024 · 1c2f8c5 · 1c2f8c5
1 parent 7829b38
commit 1c2f8c5
Show file tree

Hide file tree

Showing 52 changed files with 2,078 additions and 674 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -543,8 +543,9 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (2.18.1):
+  - RNScreens (3.30.1):
     - React-Core
+    - React-RCTImage
   - RNSha256 (1.2.3):
     - React
   - RNShare (7.3.9):
@@ -1009,7 +1010,7 @@ SPEC CHECKSUMS:
   RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
   RNReactNativeHapticFeedback: 6d24decfa94e037c2ecc312407d2a057b7933f10
   RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e
-  RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNScreens: 848541d154d2a184131b34e468b10aa33008f357
   RNSha256: ab608b2185fb806185a2cc112e0474065842e085
   RNShare: 807d6f8231b8ebcf6dd839294b877342eb93d4e5
   RNSVG: 50cf2c7018e57cf5d3522d98d0a3a4dd6bf9d093

diff --git a/package.json b/package.json
@@ -112,6 +112,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.9.17",
     "@react-navigation/stack": "6.3.20",
     "@redux-saga/testing-utils": "^1.1.3",
     "@xstate/react": "^3.0.1",
@@ -175,7 +176,7 @@
     "react-native-responsive-screen": "^1.4.1",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screen-brightness": "^2.0.0-alpha",
-    "react-native-screens": "^2.18.1",
+    "react-native-screens": "^3.30.1",
     "react-native-sha256": "1.2.3",
     "react-native-share": "7.3.9",
     "react-native-splash-screen": "^3.2.0",

diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
@@ -1,22 +1,22 @@
-import * as React from "react";
-import { StyleSheet, Pressable, SafeAreaView, View, Text } from "react-native";
-import { connect } from "react-redux";
-import { useState } from "react";
-import { widthPercentageToDP } from "react-native-responsive-screen";
 import {
   HSpacer,
   IOColors,
   IOStyles,
   hexToRgba,
   makeFontStyleObject
 } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { useState } from "react";
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { widthPercentageToDP } from "react-native-responsive-screen";
+import { connect } from "react-redux";
 import { ReduxProps } from "../store/actions/types";
+import { useIOSelector } from "../store/hooks";
 import { currentRouteSelector } from "../store/reducers/navigation";
+import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import { GlobalState } from "../store/reducers/types";
 import { getAppVersion } from "../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../utils/clipboard";
-import { useIOSelector } from "../store/hooks";
-import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import PagoPATestIndicator from "./PagoPATestIndicator";
 
 type Props = ReturnType<typeof mapStateToProps> & ReduxProps;
@@ -27,6 +27,7 @@ const debugItemBorderColor = hexToRgba(IOColors.black, 0.1);
 const styles = StyleSheet.create({
   versionContainer: {
     ...StyleSheet.absoluteFillObject,
+    top: -8,
     justifyContent: "flex-start",
     alignItems: "center",
     zIndex: 1000

diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
@@ -171,19 +171,33 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
           </View>
         </View>
       </View>
-      <View
+      <RNSScreenContainer
         onLayout={[Function]}
         style={
           Object {
             "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
           activityState={2}
           collapsable={false}
           forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
             Object {
               "bottom": 0,
@@ -668,8 +682,8 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>

diff --git a/ts/features/bonus/common/screens/AvailableBonusScreen.tsx b/ts/features/bonus/common/screens/AvailableBonusScreen.tsx
@@ -17,6 +17,7 @@ import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
 import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable";
 import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
+import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
@@ -56,7 +57,6 @@ import {
   supportedAvailableBonusSelector
 } from "../store/selectors";
 import { ID_CDC_TYPE, ID_CGN_TYPE } from "../utils";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import { ServiceDetailsScreenNavigationParams } from "../../../services/screens/ServiceDetailsScreen";
 
 export type Props = ReturnType<typeof mapStateToProps> &

diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
@@ -1,16 +1,16 @@
-import { SectionList, StatusBar, View, useColorScheme } from "react-native";
-import * as React from "react";
 import {
-  useIOTheme,
   Divider,
-  VSpacer,
+  IOStyles,
+  IOVisualCostants,
   ListItemNav,
-  IOVisualCostants
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { useIONavigation } from "../../navigation/params/AppParamsList";
+import * as React from "react";
+import { SectionList, StatusBar, View, useColorScheme } from "react-native";
 import { H1 } from "../../components/core/typography/H1";
 import { LabelSmall } from "../../components/core/typography/LabelSmall";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import DESIGN_SYSTEM_ROUTES from "./navigation/routes";
 
 type SingleSectionProps = {

diff --git a/ts/features/design-system/core/DSNumberPad.tsx b/ts/features/design-system/core/DSNumberPad.tsx
@@ -1,20 +1,20 @@
-import * as React from "react";
 import {
+  Body,
   CodeInput,
   H2,
   IOColors,
-  ListItemSwitch,
-  NumberPad,
-  VSpacer,
-  hexToRgba,
-  LabelSmallAlt,
   IOVisualCostants,
   LabelLink,
+  LabelSmallAlt,
+  ListItemSwitch,
+  NumberPad,
   Pictogram,
-  Body
+  VSpacer,
+  hexToRgba
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
-import { Alert, View } from "react-native";
+import * as React from "react";
+import { Alert, StatusBar, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const PIN_LENGTH = 6;
@@ -59,6 +59,7 @@ export const DSNumberPad = () => {
         }
       ]}
     >
+      <StatusBar barStyle={darkBackground ? "light-content" : "default"} />
       <View
         style={{
           backgroundColor: IOColors.white,