Migrate navigationOptions to TS (#2943)

* Rename file

* Type config objects as const

* Change to interface

* Update imports

src/components/FullPageWebView/FullPageWebViewHeader.tsx

@@ -8,9 +8,10 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { dropShadow } from "styles/global";
 
 type HeaderTitle = string | ( ( props: HeaderTitleProps ) => React.ReactNode ) | undefined;
-type Props = {
+
+interface Props {
   route: {
-    name: string
+    name: string;
   };
   options: {
     title?: string | undefined;
@@ -18,16 +19,16 @@ type Props = {
     headerStyle?: object;
     headerShadowVisible?: boolean;
   };
-};
+}
 
 const HEADER_STYLE = {
   backgroundColor: "white"
-};
+} as const;
 
 const BACK_BUTTON_STYLE = {
   position: "relative",
   start: 11
-};
+} as const;
 
 const FullPageWebViewHeader = ( {
   route,

src/navigation/StackNavigators/LoginStackNavigator.js

@@ -12,7 +12,7 @@ import { CloseButton } from "components/SharedComponents";
 import {
   hideHeaderLeft,
   showSimpleCustomHeader
-} from "navigation/navigationOptions";
+} from "navigation/navigationOptions.tsx";
 import type { Node } from "react";
 import React from "react";
 

src/navigation/StackNavigators/NoBottomTabStackNavigator.js

@@ -21,7 +21,7 @@ import {
   fadeInComponent,
   hideHeader,
   hideHeaderLeft
-} from "navigation/navigationOptions";
+} from "navigation/navigationOptions.tsx";
 import type { Node } from "react";
 import React from "react";
 

src/navigation/StackNavigators/SharedStackScreens.js

@@ -20,7 +20,7 @@ import {
   removeBottomBorder,
   showHeader,
   showSimpleCustomHeader
-} from "navigation/navigationOptions";
+} from "navigation/navigationOptions.tsx";
 import type { Node } from "react";
 import React from "react";
 

src/navigation/StackNavigators/TabStackNavigator.js

@@ -43,7 +43,7 @@ import {
   removeBottomBorder,
   showHeader,
   showLongHeader
-} from "navigation/navigationOptions";
+} from "navigation/navigationOptions.tsx";
 import type { Node } from "react";
 import React from "react";
 import {

src/navigation/navigationOptions.tsx

@@ -1,30 +1,27 @@
-// @flow
 import { HeaderBackground } from "@react-navigation/elements";
 import { fontMedium } from "appConstants/fontFamilies.ts";
 import FullPageWebViewHeader from "components/FullPageWebView/FullPageWebViewHeader.tsx";
 import BackButton from "components/SharedComponents/Buttons/BackButton";
-import type { Node } from "react";
 import React from "react";
 import { View } from "react-native";
 import colors from "styles/tailwindColors";
 
 import FadeInView from "./FadeInView";
 
-// $FlowIgnore
 const fadeInComponent = ( component: React.JSX.Element ): React.JSX.Element => (
   <FadeInView>
     {component}
   </FadeInView>
 );
 
-const baseHeaderOptions: Object = {
+const baseHeaderOptions = {
   headerShown: true,
   headerBackButtonDisplayMode: "minimal",
   headerShadowVisible: false,
   headerLeft: () => <BackButton inCustomHeader testID="header-back-button" />
-};
+} as const;
 
-const showHeader: Object = {
+const showHeader = {
   ...baseHeaderOptions,
   headerTintColor: colors.darkGray,
   // Note: left header is not supported on iOS
@@ -34,9 +31,9 @@ const showHeader: Object = {
     fontSize: 24,
     fontFamily: fontMedium
   }
-};
+} as const;
 
-const showLongHeader: Object = {
+const showLongHeader = {
   ...baseHeaderOptions,
   headerTintColor: colors.darkGray,
   // Note: left header is not supported on iOS
@@ -46,48 +43,48 @@ const showLongHeader: Object = {
     fontSize: 16,
     fontFamily: fontMedium
   }
-};
+} as const;
 
-export const hideHeaderLeft: Object = {
+export const hideHeaderLeft = {
   ...showHeader,
   headerLeft: null,
   headerBackVisible: false
-};
+} as const;
 
-const showSimpleCustomHeader: Object = {
+const showSimpleCustomHeader = {
   header: FullPageWebViewHeader,
   headerShadowVisible: true
-};
+} as const;
 
 const hideHeader = {
   headerShown: false
-};
+} as const;
 
 const blankHeaderTitle = {
   headerTitle: ""
-};
+} as const;
 
 const removeBottomBorder = {
-  headerBackground: ( ): Node => (
+  headerBackground: ( ) => (
     // eslint-disable-next-line react-native/no-inline-styles
     <HeaderBackground style={{ bottomBorderColor: "white" }} />
   )
-};
+} as const;
 
 // this removes the default hamburger menu from header
 const hideDrawerHeaderLeft = {
-  headerLeft: ( ): Node => (
+  headerLeft: ( ) => (
     <View />
   )
-};
+} as const;
 
 const preventSwipeToGoBack = {
   gestureEnabled: false
-};
+} as const;
 
 const isDrawerScreen = {
   animation: "none"
-};
+} as const;
 
 export {
   blankHeaderTitle,

src/navigation/rootDrawerNavigator.js

@@ -3,7 +3,7 @@
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import {
   hideDrawerHeaderLeft, hideHeader
-} from "navigation/navigationOptions";
+} from "navigation/navigationOptions.tsx";
 import LoginStackNavigator from "navigation/StackNavigators/LoginStackNavigator";
 import NoBottomTabStackNavigator from "navigation/StackNavigators/NoBottomTabStackNavigator";
 import OnboardingStackNavigator from "navigation/StackNavigators/OnboardingStackNavigator";