chore: removes compatibility layer for react-navigation (#5284)

## Short description This PR removes the compatibility layer adopted during the upgrade from `react-navigation` v4 to v5 ## List of changes proposed in this pull request - removes `@react-navigation/compat` - refactor related navigators - refactor screens/components using compat props - remove test wrapper ## How to test Check automated tests and run the whole app navigating through screens --------- Co-authored-by: Fabio Bombardi <[email protected]> Co-authored-by: Federico Mastrini <[email protected]> Co-authored-by: Andrea Piai <[email protected]> Co-authored-by: Damiano Plebani <[email protected]> Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Jan 17, 2024 · a09a4e5 · a09a4e5
1 parent 42020dc
commit a09a4e5
Show file tree

Hide file tree

Showing 135 changed files with 7,274 additions and 11,434 deletions.
diff --git a/package.json b/package.json
@@ -129,7 +129,6 @@
     "@react-native-cookies/cookies": "^6.2.1",
     "@react-native-picker/picker": "^2.4.1",
     "@react-navigation/bottom-tabs": "^5.11.15",
-    "@react-navigation/compat": "^5.3.20",
     "@react-navigation/material-top-tabs": "^5.x",
     "@react-navigation/native": "^5.9.8",
     "@react-navigation/stack": "^5.14.9",

diff --git a/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx b/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx
@@ -1,7 +1,7 @@
-import { NavigationEvents } from "@react-navigation/compat";
 import * as React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { VSpacer, IOPictograms, Pictogram } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
 import themeVariables from "../../theme/variables";
 import { setAccessibilityFocus } from "../../utils/accessibility";
 import { Body } from "../core/typography/Body";
@@ -48,9 +48,12 @@ const renderNode = (body: string | React.ReactNode) => {
 export const InfoAltScreenComponent = ({ image, title, body }: Props) => {
   const elementRef = React.createRef<Text>();
 
+  useFocusEffect(
+    React.useCallback(() => setAccessibilityFocus(elementRef), [elementRef])
+  );
+
   return (
     <View style={styles.main} testID="InfoAltScreenComponent">
-      <NavigationEvents onWillFocus={() => setAccessibilityFocus(elementRef)} />
       <Pictogram name={image} />
       <VSpacer size={24} />
       <H2

diff --git a/ts/components/LabelledItem/__tests__/LabelledItem.test.tsx b/ts/components/LabelledItem/__tests__/LabelledItem.test.tsx
@@ -4,7 +4,7 @@ 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 { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper";
 import { LabelledItem, Props } from "../index";
 
 const textInputProps = {
@@ -168,7 +168,7 @@ describe("Test LabelledItem", () => {
 const renderComponent = (props: Props) => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
   const store = createStore(appReducer, globalState as any);
-  return renderScreenFakeNavRedux(
+  return renderScreenWithNavigationStoreContext(
     () => <LabelledItem {...props} />,
     "DUMMY",
     {},

diff --git a/ts/components/LabelledItem/index.tsx b/ts/components/LabelledItem/index.tsx
@@ -9,7 +9,6 @@
  * icon  |
  *       input
  */
-import { NavigationEvents } from "@react-navigation/compat";
 import color from "color";
 import { Input as InputNativeBase, Item } from "native-base";
 import * as React from "react";
@@ -25,6 +24,7 @@ import {
 } from "react-native";
 import { TextInputMaskProps } from "react-native-masked-text";
 import { IOColors, IOIcons } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
 import I18n from "../../i18n";
 import { WithTestID } from "../../types/WithTestID";
 
@@ -120,13 +120,19 @@ function getColorsByProps({
     labelColor: "bluegreyDark"
   };
 }
+
+const NavigationEventHandler = ({ onPress }: { onPress: () => void }) => {
+  useFocusEffect(React.useCallback(() => onPress, [onPress]));
+
+  return <></>;
+};
+
 export const LabelledItem: React.FC<Props> = ({
   iconPosition = "left",
   ...props
 }: Props) => {
   const [isEmpty, setIsEmpty] = useState(true);
   const [hasFocus, setHasFocus] = useState(false);
-
   const accessibilityLabel = props.accessibilityLabel ?? "";
 
   const {
@@ -184,7 +190,7 @@ export const LabelledItem: React.FC<Props> = ({
           testID="Item"
         >
           {props.hasNavigationEvents && props.onPress && (
-            <NavigationEvents onWillBlur={props.onPress} />
+            <NavigationEventHandler onPress={props.onPress} />
           )}
 
           {/* Icon OR Image. They can't be managed separately because

diff --git a/ts/components/LoadingErrorComponent.tsx b/ts/components/LoadingErrorComponent.tsx
@@ -18,8 +18,8 @@ export type LoadingErrorProps = WithTestID<{
   onAbort?: () => void;
 }>;
 
-const errorRef = React.createRef<GenericErrorComponent>();
-const loadingRef = React.createRef<any>();
+const errorRef = React.createRef<View>();
+const loadingRef = React.createRef<View>();
 
 const renderError = (props: LoadingErrorProps) => (
   <GenericErrorComponent

diff --git a/ts/components/SectionStatus/__tests__/SectionStatusComponent.test.tsx b/ts/components/SectionStatus/__tests__/SectionStatusComponent.test.tsx
@@ -12,7 +12,7 @@ import {
 } from "../../../../definitions/content/SectionStatus";
 import I18n, { setLocale } from "../../../i18n";
 import { SectionStatusKey } from "../../../store/reducers/backendStatus";
-import { renderScreenFakeNavRedux } from "../../../utils/testWrapper";
+import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper";
 import { openWebUrl } from "../../../utils/url";
 import SectionStatusComponent from "../index";
 
@@ -198,7 +198,7 @@ const getComponent = (
   sectionKey: SectionStatusKey,
   store?: ReturnType<typeof mockStore>
 ) =>
-  renderScreenFakeNavRedux(
+  renderScreenWithNavigationStoreContext(
     () => <SectionStatusComponent sectionKey={sectionKey} />,
     "DUMMY",
     {},

diff --git a/ts/components/__tests__/ContextualInfo.test.tsx b/ts/components/__tests__/ContextualInfo.test.tsx
@@ -8,7 +8,7 @@ import ROUTES from "../../navigation/routes";
 import { applicationChangeState } from "../../store/actions/application";
 import { appReducer } from "../../store/reducers";
 import { GlobalState } from "../../store/reducers/types";
-import { renderScreenFakeNavRedux } from "../../utils/testWrapper";
+import { renderScreenWithNavigationStoreContext } from "../../utils/testWrapper";
 import ContextualInfo from "../ContextualInfo";
 
 jest.useFakeTimers();
@@ -73,7 +73,7 @@ describe("ContextualInfo component", () => {
 
 function renderComponent(props: React.ComponentProps<typeof ContextualInfo>) {
   const globalState = appReducer(undefined, applicationChangeState("active"));
-  return renderScreenFakeNavRedux<GlobalState>(
+  return renderScreenWithNavigationStoreContext<GlobalState>(
     () => <ContextualInfo {...props} />,
     ROUTES.WALLET_CHECKOUT_3DS_SCREEN,
     {},

diff --git a/ts/components/__tests__/PinCreationForm.test.tsx b/ts/components/__tests__/PinCreationForm.test.tsx
@@ -4,7 +4,7 @@ import { createStore } from "redux";
 import I18n from "../../i18n";
 import { applicationChangeState } from "../../store/actions/application";
 import { appReducer } from "../../store/reducers";
-import { renderScreenFakeNavRedux } from "../../utils/testWrapper";
+import { renderScreenWithNavigationStoreContext } from "../../utils/testWrapper";
 import { PinCreationForm, Props } from "../PinCreationForm";
 
 describe("PinCreationForm component", () => {
@@ -93,7 +93,7 @@ describe("PinCreationForm component", () => {
 const renderComponent = (props: Props) => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
   const store = createStore(appReducer, globalState as any);
-  return renderScreenFakeNavRedux(
+  return renderScreenWithNavigationStoreContext(
     () => <PinCreationForm {...props} />,
     "DUMMY",
     {},

diff --git a/ts/components/helpers/withValidatedEmail.tsx b/ts/components/helpers/withValidatedEmail.tsx
@@ -1,10 +1,8 @@
-import { NavigationEvents } from "@react-navigation/compat";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import React from "react";
-import { View } from "react-native";
-
+import React, { useCallback, useEffect } from "react";
 import { connect } from "react-redux";
+import { useFocusEffect } from "@react-navigation/native";
 import RemindEmailValidationOverlay from "../../components/RemindEmailValidationOverlay";
 import {
   AppParamsList,
@@ -30,39 +28,27 @@ export type ModalProps = LightModalContextInterface &
     - ModalRemindEmailValidationOverlay is unmounted
     - A navigation request is made (eg navigationBack) and the onWillBlur listener is activated
       */
-class ModalRemindEmailValidationOverlay extends React.Component<ModalProps> {
-  constructor(props: ModalProps) {
-    super(props);
-  }
-  public componentWillUnmount() {
-    this.hideModal();
-  }
-
-  private hideModal = () => {
-    this.props.hideModal();
+const ModalRemindEmailValidationOverlay = (props: ModalProps) => {
+  const hideModal = useCallback(() => {
+    props.hideModal();
     // when the reminder modal will be closed
     // we set acknowledgeOnEmailValidation to none because we don't want
     // any feedback about the email validation
     // remember that only RemindEmailValidationOverlay sets it to some, because there
     // we want the user feedback
-    this.props.dispatchAcknowledgeOnEmailValidation();
-  };
+    props.dispatchAcknowledgeOnEmailValidation();
+  }, [props]);
 
-  public render() {
-    return (
-      <View>
-        <NavigationEvents
-          onWillBlur={() => {
-            this.hideModal();
-          }}
-          onWillFocus={() => {
-            this.props.showModal(<RemindEmailValidationOverlay />);
-          }}
-        />
-      </View>
-    );
-  }
-}
+  useEffect(() => hideModal, [hideModal]);
+
+  useFocusEffect(
+    useCallback(() => {
+      props.showModal(<RemindEmailValidationOverlay />);
+      return hideModal;
+    }, [hideModal, props])
+  );
+  return <></>;
+};
 
 const ConditionalView = withLightModalContext(
   ModalRemindEmailValidationOverlay

diff --git a/ts/components/infoScreen/InfoScreenComponent.tsx b/ts/components/infoScreen/InfoScreenComponent.tsx
@@ -1,7 +1,7 @@
-import { NavigationEvents } from "@react-navigation/compat";
 import * as React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
 import themeVariables from "../../theme/variables";
 import { setAccessibilityFocus } from "../../utils/accessibility";
 import { Body } from "../core/typography/Body";
@@ -45,10 +45,12 @@ const renderNode = (body: string | React.ReactNode) => {
  */
 export const InfoScreenComponent: React.FunctionComponent<Props> = props => {
   const elementRef = React.createRef<Text>();
+  useFocusEffect(
+    React.useCallback(() => setAccessibilityFocus(elementRef), [elementRef])
+  );
 
   return (
     <View style={styles.main} testID="InfoScreenComponent">
-      <NavigationEvents onWillFocus={() => setAccessibilityFocus(elementRef)} />
       {props.image}
       <VSpacer size={24} />
       <H2

diff --git a/ts/components/screens/BaseHeader.tsx b/ts/components/screens/BaseHeader.tsx
@@ -1,5 +1,4 @@
 import { Millisecond } from "@pagopa/ts-commons/lib/units";
-import { NavigationEvents } from "@react-navigation/compat";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { Body as NBBody, Left, Right } from "native-base";
@@ -21,6 +20,7 @@ import {
   HSpacer,
   IOSpacer
 } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
 import I18n from "../../i18n";
 import { navigateBack } from "../../store/actions/navigation";
 import { Dispatch } from "../../store/actions/types";
@@ -303,7 +303,7 @@ class BaseHeaderComponent extends React.PureComponent<Props, State> {
             () => true,
             ({ avoidNavigationEventsUsage }) => !avoidNavigationEventsUsage
           )
-        ) && <NavigationEvents onWillFocus={this.handleFocus} />}
+        ) && <NavigationEventHandler onFocus={this.handleFocus} />}
       </Right>
     );
   };
@@ -357,6 +357,15 @@ class BaseHeaderComponent extends React.PureComponent<Props, State> {
   };
 }
 
+const NavigationEventHandler = ({ onFocus }: { onFocus: () => void }) => {
+  useFocusEffect(
+    React.useCallback(() => {
+      onFocus();
+    }, [onFocus])
+  );
+  return <></>;
+};
+
 const mapStateToProps = (state: GlobalState) => ({
   isSearchEnabled: isSearchEnabledSelector(state),
   assistanceToolConfig: assistanceToolConfigSelector(state)

diff --git a/ts/components/screens/BaseScreenComponent/__tests__/BaseScreenComponent.test.tsx b/ts/components/screens/BaseScreenComponent/__tests__/BaseScreenComponent.test.tsx
@@ -11,7 +11,7 @@ import { applicationChangeState } from "../../../../store/actions/application";
 import { appReducer } from "../../../../store/reducers";
 import { BackendStatusState } from "../../../../store/reducers/backendStatus";
 import { GlobalState } from "../../../../store/reducers/types";
-import { renderScreenFakeNavRedux } from "../../../../utils/testWrapper";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 
 import BaseScreenComponent, { Props } from "../index";
 import { MESSAGES_ROUTES } from "../../../../features/messages/navigation/routes";
@@ -99,7 +99,7 @@ describe("BaseScreenComponent", () => {
 
 function renderComponent(props = defaultProps, store: Store<GlobalState>) {
   return {
-    component: renderScreenFakeNavRedux<GlobalState>(
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
       () => <BaseScreenComponent {...props} ref={undefined} />,
       MESSAGES_ROUTES.MESSAGES_HOME,
       {},