[TS migration] Migrate 'Navigation' lib to TypeScript

contributingGuides/NAVIGATION.md

@@ -40,9 +40,22 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/ROUTES.js#L36
+1. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
+
+```ts
+export const ROUTES = {
+    // static route
+    SETTINGS_WORKSPACES: 'settings/workspaces',
+    // dynamic route
+    SETTINGS_WORKSPACES: {
+        route: 'settings/:accountID',
+        getRoute: (accountID:  number) => `settings/${accountID}` as const,
+    },
+};
+
+```
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
+2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
 
 3. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L334-L338
 

src/SCREENS.ts

@@ -9,13 +9,13 @@ const PROTECTED_SCREENS = {
     REPORT_ATTACHMENTS: 'ReportAttachments',
 } as const;
 
-export default {
+const SCREENS = {
     ...PROTECTED_SCREENS,
-    LOADING: 'Loading',
     REPORT: 'Report',
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
+    UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS: {
         ROOT: 'Settings_Root',
         PREFERENCES: 'Settings_Preferences',
@@ -40,4 +40,5 @@ export default {
     SAML_SIGN_IN: 'SAMLSignIn',
 } as const;
 
+export default SCREENS;
 export {PROTECTED_SCREENS};

src/components/withCurrentReportID.tsx

@@ -8,6 +8,7 @@ type CurrentReportIDContextValue = {
     updateCurrentReportID: (state: NavigationState) => void;
     currentReportID: string;
 };
+
 type CurrentReportIDContextProviderProps = {
     /** Actual content wrapped by this component */
     children: React.ReactNode;

src/components/withNavigation.tsx

@@ -1,9 +1,10 @@
 import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
+import {RootStackParamList} from '@libs/Navigation/types';
 
 type WithNavigationProps = {
-    navigation: NavigationProp<ReactNavigation.RootParamList>;
+    navigation: NavigationProp<RootStackParamList>;
 };
 
 export default function withNavigation<TProps extends WithNavigationProps, TRef>(

src/hooks/useFlipper/index.native.ts

@@ -0,0 +1,6 @@
+import {useFlipper as useFlipperRN} from '@react-navigation/devtools';
+import UseFlipper from './types';
+
+const useFlipper: UseFlipper = useFlipperRN;
+
+export default useFlipper;

src/hooks/useFlipper/index.ts

@@ -0,0 +1,5 @@
+import UseFlipper from './types';
+
+const useFlipper: UseFlipper = () => {};
+
+export default useFlipper;

src/hooks/useFlipper/types.ts

@@ -0,0 +1,6 @@
+import {NavigationContainerRefWithCurrent} from '@react-navigation/core';
+import {RootStackParamList} from '@libs/Navigation/types';
+
+type UseFlipper = (ref: NavigationContainerRefWithCurrent<RootStackParamList>) => void;
+
+export default UseFlipper;

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -26,27 +26,27 @@ function PublicScreens() {
                 component={LogInWithShortLivedAuthTokenPage}
             />
             <RootStack.Screen
-                name="ValidateLogin"
+                name={SCREENS.VALIDATE_LOGIN}
                 options={defaultScreenOptions}
                 component={ValidateLoginPage}
             />
             <RootStack.Screen
-                name="UnlinkLogin"
+                name={SCREENS.UNLINK_LOGIN}
                 options={defaultScreenOptions}
                 component={UnlinkLoginPage}
             />
             <RootStack.Screen
-                name="AppleSignInDesktop"
+                name={SCREENS.SIGN_IN_WITH_APPLE_DESKTOP}
                 options={defaultScreenOptions}
                 component={AppleSignInDesktopPage}
             />
             <RootStack.Screen
-                name="GoogleSignInDesktop"
+                name={SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP}
                 options={defaultScreenOptions}
                 component={GoogleSignInDesktopPage}
             />
             <RootStack.Screen
-                name="SAMLSignIn"
+                name={SCREENS.SAML_SIGN_IN}
                 options={defaultScreenOptions}
                 component={SAMLSignInPage}
             />

src/libs/Navigation/FreezeWrapper.js → src/libs/Navigation/FreezeWrapper.tsx

@@ -1,31 +1,24 @@
 import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
-import lodashFindIndex from 'lodash/findIndex';
-import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {Freeze} from 'react-freeze';
 import {InteractionManager} from 'react-native';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const propTypes = {
+type FreezeWrapperProps = ChildrenProps & {
     /** Prop to disable freeze */
-    keepVisible: PropTypes.bool,
-    /** Children to wrap in FreezeWrapper. */
-    children: PropTypes.node.isRequired,
+    keepVisible?: boolean;
 };
 
-const defaultProps = {
-    keepVisible: false,
-};
-
-function FreezeWrapper(props) {
+function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
     const [isScreenBlurred, setIsScreenBlurred] = useState(false);
     // we need to know the screen index to determine if the screen can be frozen
-    const screenIndexRef = useRef(null);
+    const screenIndexRef = useRef<number | null>(null);
     const isFocused = useIsFocused();
     const navigation = useNavigation();
     const currentRoute = useRoute();
 
     useEffect(() => {
-        const index = lodashFindIndex(navigation.getState().routes, (route) => route.key === currentRoute.key);
+        const index = navigation.getState().routes.findIndex((route) => route.key === currentRoute.key);
         screenIndexRef.current = index;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -35,7 +28,7 @@ function FreezeWrapper(props) {
             // if the screen is more than 1 screen away from the current screen, freeze it,
             // we don't want to freeze the screen if it's the previous screen because the freeze placeholder
             // would be visible at the beginning of the back animation then
-            if (navigation.getState().index - screenIndexRef.current > 1) {
+            if (navigation.getState().index - (screenIndexRef?.current ?? 0) > 1) {
                 InteractionManager.runAfterInteractions(() => setIsScreenBlurred(true));
             } else {
                 setIsScreenBlurred(false);
@@ -44,11 +37,9 @@ function FreezeWrapper(props) {
         return () => unsubscribe();
     }, [isFocused, isScreenBlurred, navigation]);
 
-    return <Freeze freeze={!isFocused && isScreenBlurred && !props.keepVisible}>{props.children}</Freeze>;
+    return <Freeze freeze={!isFocused && isScreenBlurred && !keepVisible}>{children}</Freeze>;
 }
 
-FreezeWrapper.propTypes = propTypes;
-FreezeWrapper.defaultProps = defaultProps;
 FreezeWrapper.displayName = 'FreezeWrapper';
 
 export default FreezeWrapper;