chore: [IAI-24] Upgrade react-navigation to v5 (pagopa#3836)

* replace NavigationInjectedProps with NavigationStackScreenProps * remove unused navigation params * update comments * camelcase * create AuthenticatioonParamsList * add OnboardingParamsList * add zendeskparamslist * fix typescript * remove feature flag from paginated messages routes * add messageRouteParams * rename * add ProfileParamsList * add ServicesParamsList * add WalletParamsList * remove console * add missing params to wallet * add placeholder for NavigatorScreenParams * remove zendesk route * bonusvacanze params * add bpdparamslist * CGN navigation params * siciliavola paramslist * eucovidcert params list * fix * mvlparamsList * onboardingBancomatParamsList * paypal params list * cobadge params list * bancomatpay params list * privative params list * satispay params list * remove InferNavigationParams * update react navigation * add navigationcontext * first update batch * fix navigator & imports * navigation porting * convert navigationparams * convert params * fix * fix * fix * porting * porting * porting * porting * remove all the old navigation import 💥 * wip restoring navigation * fix navigation actions * use CompatNavigationProps * clean * restore workunit * move navigators outside the tab navigator * update navigationactions * update navigationactions * rewire missing navigation paths * restore middleware & redux debug integration * tmp * Revert "tmp" This reverts commit afc88aa. * remove eslint * fix BaseScreenComponentFC * fix paypal * fix * fix cgn * restore email validation * remove unused code * restore navigation to CGN_LANDING_PLAYGROUND * restore tab navigator * change default background color * restore push notification navigation * restore internal link * fix uaDonations * update navigation to PayPalUpdatePspForPayment * fix test and remove code for external deep link handling * fix test * fix test * fix test * fix test * add legacynavigator compat * fix tests * add onReady navigation condition * fix test * fix test * update snapshot * fix test * fix CoBadge * fix test * fix test * fix test * fix test * delete deeplink * fix all tests! * clean testwrapper * test * Revert "test" This reverts commit cfa1e7d. * test * test * test fix timer * test e2e * disable back gesture on iOS * add a payment method in detox config * upgrade react-native-flag-secure-android * yarn.lock * remove comment * remove comment * fix missing wallet loading * Revert "test e2e" This reverts commit cd287db. * onWillFocus * fix profile * fix ContactPreferencesToggle onFocus * test e2e * test * test * test * test * test * test * test * test * test * test * test * test * test * restore * fix test * replace with const * remove stings * remove stings * remove strings * remove string * remove comments * remove comment * remove strings * make common type * remove async/await from trackScreen * fix ts * Fix merge error * fix ts * fix ts * remove unmock * fix paginated message navigation * fix merge * fix mixpanel navigation param * fix * fix navigation * deprecate workunit * yarn lock * fix merge * fix * fix gesture Co-authored-by: Cristiano Tofani <[email protected]> Co-authored-by: Emilio Pavia <[email protected]> Co-authored-by: Matteo Boschi <[email protected]>
dvisionlab · Apr 27, 2022 · 83377e1 · 83377e1
1 parent 08cc24d
commit 83377e1
Show file tree

Hide file tree

Showing 281 changed files with 6,982 additions and 4,327 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -324,6 +324,8 @@ PODS:
     - React
   - react-native-pdf (6.4.0):
     - React-Core
+  - react-native-safe-area-context (3.3.2):
+    - React-Core
   - react-native-screen-brightness (2.0.0-alpha):
     - React
   - react-native-slider (3.0.3):
@@ -556,6 +558,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-mixpanel (from `../node_modules/react-native-mixpanel`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-screen-brightness (from `../node_modules/react-native-screen-brightness`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
@@ -700,6 +703,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-mixpanel"
   react-native-pdf:
     :path: "../node_modules/react-native-pdf"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   react-native-screen-brightness:
     :path: "../node_modules/react-native-screen-brightness"
   react-native-slider:
@@ -829,6 +834,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: a6e56460d34905c849ada551db30897dc7f3d535
   react-native-mixpanel: d644efe1ca33d2646d5cba29e24a13ebc9b37209
   react-native-pdf: a6a5a3f0bdf340eb2eed6c96034424d2cc3f84b0
+  react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-screen-brightness: 9eefe6db96a5d757e63cdfce8e48d7c9039f2af2
   react-native-slider: e99fc201cefe81270fc9d81714a7a0f5e566b168
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865

diff --git a/jest.config.js b/jest.config.js
@@ -11,6 +11,9 @@ module.exports = {
   },
   setupFiles: ["./jestSetup.js"],
   globalSetup: "./jestGlobalSetup.js",
-  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
+  setupFilesAfterEnv: [
+    "@testing-library/jest-native/extend-expect",
+    "./jestSetupAfterEnv.js"
+  ],
   collectCoverage: true
 };
diff --git a/jestSetup.js b/jestSetup.js
@@ -7,6 +7,7 @@ import {NativeModules} from "react-native";
 import mockAsyncStorage from "@react-native-community/async-storage/jest/async-storage-mock";
 import mockClipboard from "@react-native-clipboard/clipboard/jest/clipboard-mock.js";
 import nodeFetch from "node-fetch";
+import mockRNDeviceInfo from "react-native-device-info/jest/react-native-device-info-mock";
 
 // eslint-disable-next-line functional/immutable-data
 NativeModules.RNGestureHandlerModule = {
@@ -92,3 +93,5 @@ jest.mock("@gorhom/bottom-sheet", () => {
     }
   };
 });
+
+jest.mock("react-native-device-info", () => mockRNDeviceInfo);
diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js
@@ -0,0 +1,3 @@
+global.beforeEach(() => {
+  jest.useFakeTimers();
+});
diff --git a/package.json b/package.json
@@ -85,6 +85,11 @@
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/push-notification-ios": "^1.8.0",
     "@react-native-community/slider": "^3.0.3",
+    "@react-navigation/bottom-tabs": "^5.11.15",
+    "@react-navigation/compat": "^5.3.20",
+    "@react-navigation/drawer": "^5.12.9",
+    "@react-navigation/native": "^5.9.8",
+    "@react-navigation/stack": "^5.14.9",
     "@redux-saga/testing-utils": "^1.1.3",
     "abort-controller": "^1.0.2",
     "async-mutex": "^0.1.3",
@@ -139,6 +144,7 @@
     "react-native-reanimated": "^2.7.0",
     "react-native-render-html": "^6.3.1",
     "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-sha256": "1.2.3",
@@ -148,10 +154,6 @@
     "react-native-vector-icons": "^7.0.0",
     "react-native-view-shot": "3.1.2",
     "react-native-webview": "^11.13.0",
-    "react-navigation": "^4.4.4",
-    "react-navigation-drawer": "^1.4.0",
-    "react-navigation-stack": "^1.7.3",
-    "react-navigation-tabs": "^2.11.1",
     "react-redux": "7.2.4",
     "reactotron-react-native": "^5.0.0",
     "reactotron-redux": "^3.1.3",

diff --git a/scripts/api-config.json b/scripts/api-config.json
@@ -26,6 +26,9 @@
     "payment": {
       "amount": 2222,
       "pspFeeAmount": 100
+    },
+    "methods": {
+      "walletCreditCardCount":1
     }
   },
   "features": {

diff --git a/ts/App.tsx b/ts/App.tsx
@@ -10,16 +10,15 @@ import { LightModalProvider } from "./components/ui/LightModal";
 import RootContainer from "./RootContainer";
 import theme from "./theme";
 
-// Infer the `RootState` and `AppDispatch` types from the store itselfexport
+// Infer the `RootState` and `AppDispatch` types from the store itself export
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 /**
  * Main component of the application
- *
- * TODO: Add a loading screen @https://www.pivotaltracker.com/story/show/155583084
+ * @constructor
  */
-export const App: React.SFC<never> = () => (
+export const App: React.FunctionComponent<never> = () => (
   <StyleProvider style={theme()}>
     <Provider store={store}>
       <PersistGate loading={undefined} persistor={persistor}>

diff --git a/ts/RootContainer.tsx b/ts/RootContainer.tsx
@@ -1,10 +1,8 @@
 import { Root } from "native-base";
 import * as React from "react";
-import { AppState, Linking, Platform, StatusBar } from "react-native";
+import { AppState, Platform, StatusBar } from "react-native";
 import SplashScreen from "react-native-splash-screen";
-import { createAppContainer } from "react-navigation";
 import { connect } from "react-redux";
-import customVariables from "./theme/variables";
 import configurePushNotifications from "./boot/configurePushNotification";
 import { BetaTestingOverlay } from "./components/BetaTestingOverlay";
 import FlagSecureComponent from "./components/FlagSecure";
@@ -13,28 +11,22 @@ import VersionInfoOverlay from "./components/VersionInfoOverlay";
 import { testOverlayCaption } from "./config";
 
 import { setLocale } from "./i18n";
-import AppNavigator from "./navigation/AppNavigator";
-import NavigationService from "./navigation/NavigationService";
+import { IONavigationContainer } from "./navigation/AppStackNavigator";
 import RootModal from "./screens/modal/RootModal";
 import {
   applicationChangeState,
   ApplicationState
 } from "./store/actions/application";
 import { setDebugCurrentRouteName } from "./store/actions/debug";
-import { navigateToDeepLink, setDeepLink } from "./store/actions/deepLink";
 import { navigateBack } from "./store/actions/navigation";
-import { trackScreen } from "./store/middlewares/navigation";
 import { isDebugModeEnabledSelector } from "./store/reducers/debug";
 import { preferredLanguageSelector } from "./store/reducers/persistedPreferences";
 import { GlobalState } from "./store/reducers/types";
-import { getNavigateActionFromDeepLink } from "./utils/deepLink";
-import { getCurrentRouteName } from "./utils/navigation";
+import customVariables from "./theme/variables";
 import { isStringNullyOrEmpty } from "./utils/strings";
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
 
-const AppContainer = createAppContainer(AppNavigator);
-
 /**
  * The main container of the application with:
  * - the Navigator
@@ -51,29 +43,10 @@ class RootContainer extends React.PureComponent<Props> {
     configurePushNotifications();
   }
 
-  private handleOpenUrlEvent = (event: { url: string }): void =>
-    this.navigateToUrlHandler(event.url);
-
   private handleApplicationActivity = (activity: ApplicationState) =>
     this.props.applicationChangeState(activity);
 
-  private navigateToUrlHandler = (url: string | null) => {
-    if (!url) {
-      return;
-    }
-    const action = getNavigateActionFromDeepLink(url);
-    // immediately navigate to the resolved action
-    this.props.setDeepLink(action, true);
-  };
-
   public componentDidMount() {
-    if (Platform.OS === "android") {
-      Linking.getInitialURL()
-        .then(this.navigateToUrlHandler)
-        .catch(console.error); // eslint-disable-line no-console
-    } else {
-      Linking.addEventListener("url", this.handleOpenUrlEvent);
-    }
     // boot: send the status of the application
     this.handleApplicationActivity(AppState.currentState);
     AppState.addEventListener("change", this.handleApplicationActivity);
@@ -93,30 +66,10 @@ class RootContainer extends React.PureComponent<Props> {
     });
 
   public componentWillUnmount() {
-    if (Platform.OS === "ios") {
-      Linking.removeEventListener("url", this.handleOpenUrlEvent);
-    }
-
     AppState.removeEventListener("change", this.handleApplicationActivity);
   }
 
   public componentDidUpdate() {
-    // FIXME: the logic here is a bit weird: there is an event handler
-    //        (navigateToUrlHandler) that will dispatch a redux action for
-    //        setting a "deep link" in the redux state - in turn, the update
-    //        of the redux state triggers an update of the RootComponent that
-    //        dispatches a navigate action from componentDidUpdate - can't we
-    //        just listen for SET_DEEPLINK from a saga and dispatch the
-    //        navigate action from there?
-    // FIXME: how does this logic interacts with the logic that handles the deep
-    //        link in the startup saga?
-    const {
-      deepLinkState: { deepLink, immediate }
-    } = this.props;
-
-    if (immediate && deepLink) {
-      this.props.navigateToDeepLink(deepLink);
-    }
     this.updateLocale();
   }
 
@@ -134,18 +87,9 @@ class RootContainer extends React.PureComponent<Props> {
           backgroundColor={customVariables.androidStatusBarColor}
         />
         {Platform.OS === "android" && <FlagSecureComponent />}
-        <AppContainer
-          ref={navigatorRef => {
-            NavigationService.setTopLevelNavigator(navigatorRef);
-          }}
-          onNavigationStateChange={(prevState, currentState) => {
-            NavigationService.setCurrentState(currentState);
-            this.props.setDebugCurrentRouteName(
-              getCurrentRouteName(currentState) ?? "Undefined"
-            );
-            trackScreen(prevState, currentState);
-          }}
-        />
+
+        <IONavigationContainer />
+
         {this.props.isDebugModeEnabled && <VersionInfoOverlay />}
         {!isStringNullyOrEmpty(testOverlayCaption) && (
           <BetaTestingOverlay
@@ -162,14 +106,11 @@ class RootContainer extends React.PureComponent<Props> {
 
 const mapStateToProps = (state: GlobalState) => ({
   preferredLanguage: preferredLanguageSelector(state),
-  deepLinkState: state.deepLink,
   isDebugModeEnabled: isDebugModeEnabledSelector(state)
 });
 
 const mapDispatchToProps = {
   applicationChangeState,
-  setDeepLink,
-  navigateToDeepLink,
   navigateBack,
   setDebugCurrentRouteName
 };

diff --git a/ts/common/versionInfo/store/reducers/__test__/versionInfo.test.tsx b/ts/common/versionInfo/store/reducers/__test__/versionInfo.test.tsx
@@ -14,11 +14,6 @@ import {
   isAppSupportedSelector
 } from "../versionInfo";
 
-jest.mock("react-native-device-info", () => ({
-  getVersion: jest.fn(),
-  getReadableVersion: jest.fn()
-}));
-
 describe("versionInfo selectors", () => {
   describe("When the store is in initial state", () => {
     it("isAppSupportedSelector should return true", () => {

diff --git a/ts/components/GoBackButton.tsx b/ts/components/GoBackButton.tsx
@@ -1,8 +1,8 @@
+import { CommonActions } from "@react-navigation/native";
 import * as React from "react";
 import { BackHandler } from "react-native";
-import { withNavigation } from "react-navigation";
-import { NavigationStackScreenProps } from "react-navigation-stack";
 import I18n from "../i18n";
+import NavigationService from "../navigation/NavigationService";
 import variables from "../theme/variables";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import IconFont from "./ui/IconFont";
@@ -13,7 +13,7 @@ interface OwnProps {
   white?: boolean;
 }
 
-type Props = NavigationStackScreenProps & OwnProps;
+type Props = OwnProps;
 
 class GoBackButton extends React.PureComponent<Props> {
   public static defaultProps: Partial<Props> = {
@@ -34,7 +34,8 @@ class GoBackButton extends React.PureComponent<Props> {
     return true;
   };
 
-  private handleOnPressDefault = () => this.props.navigation.goBack(null);
+  private handleOnPressDefault = () =>
+    NavigationService.dispatchNavigationAction(CommonActions.goBack());
 
   private getOnPressHandler = () =>
     typeof this.props.onPress === "function"
@@ -64,4 +65,4 @@ class GoBackButton extends React.PureComponent<Props> {
   }
 }
 
-export default withNavigation(GoBackButton);
+export default GoBackButton;
diff --git a/ts/components/LabelledItem/__tests__/LabelledItem.test.tsx b/ts/components/LabelledItem/__tests__/LabelledItem.test.tsx
@@ -1,12 +1,12 @@
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent } from "@testing-library/react-native";
 import { isString } from "lodash";
 import React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../store/actions/application";
+import { appReducer } from "../../../store/reducers";
+import { renderScreenFakeNavRedux } from "../../../utils/testWrapper";
 import { LabelledItem, Props } from "../index";
 
-jest.mock("react-navigation", () => ({
-  NavigationEvents: "mockNavigationEvents"
-}));
-
 const textInputProps = {
   inputProps: { value: "value" }
 } as Props;
@@ -33,15 +33,6 @@ describe("Test LabelledItem", () => {
     expect(component.queryByText(label)).toBeTruthy();
   });
 
-  it("should render NavigationEvents if hasNavigationEvents is true and onPress is defined", () => {
-    const component = renderComponent({
-      ...textInputProps,
-      hasNavigationEvents: true,
-      onPress
-    });
-    expect(component.queryByTestId("NavigationEvents")).not.toBeNull();
-  });
-
   it("should render ButtonDefaultOpacity if iconPosition is left and icon is defined", () => {
     const component = renderComponent({
       ...textInputProps,
@@ -174,4 +165,13 @@ describe("Test LabelledItem", () => {
   });
 });
 
-const renderComponent = (props: Props) => render(<LabelledItem {...props} />);
+const renderComponent = (props: Props) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const store = createStore(appReducer, globalState as any);
+  return renderScreenFakeNavRedux(
+    () => <LabelledItem {...props} />,
+    "DUMMY",
+    {},
+    store
+  );
+};