[TS migration] Migrate 'NewChatSelector' page to TypeScript...

src/components/TabSelector/TabSelector.tsx

@@ -143,3 +143,5 @@ function TabSelector({state, navigation, onTabPress = () => {}, position}: TabSe
 TabSelector.displayName = 'TabSelector';
 
 export default TabSelector;
+
+export type { TabSelectorProps }

src/libs/Navigation/OnyxTabNavigator.tsx

@@ -1,13 +1,14 @@
 import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
+import { TabSelectorProps } from '@components/TabSelector/TabSelector';
 
 type OnyxTabNavigatorOnyxProps = {
     selectedTab: OnyxEntry<string>;
@@ -24,6 +25,8 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
+        tabBar: (props: TabSelectorProps) => ReactNode
+
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
 
@@ -32,7 +35,7 @@ export const TopTab = createMaterialTopTabNavigator();
 
 // This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
 // except ID is now required, and it gets a `selectedTab` from Onyx
-function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, ...rest}: OnyxTabNavigatorProps) {
+function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, tabBar, ...rest}: OnyxTabNavigatorProps) {
     return (
         <TopTab.Navigator
             /* eslint-disable-next-line react/jsx-props-no-spreading */

src/pages/NewChatSelectorPage.js → src/pages/NewChatSelectorPage.tsx

@@ -1,51 +1,38 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import compose from '@libs/compose';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import useLocalize from '@hooks/useLocalize';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
-
-function NewChatSelectorPage(props) {
-    const navigation = useNavigation();
 
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
     return (
-        <ScreenWrapper
+        <ScreenWrapper 
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             shouldEnableMaxHeight
             testID={NewChatSelectorPage.displayName}
         >
-            <HeaderWithBackButton
-                title={props.translate('sidebarScreen.fabNewChat')}
-                onBackButtonPress={navigation.goBack}
-            />
+            <HeaderWithBackButton title={translate('sidebarScreen.fabNewChat')} />
             <OnyxTabNavigator
                 id={CONST.TAB.NEW_CHAT_TAB_ID}
-                tabBar={TabSelector}
+                tabBar={({state, navigation, position}) => (
+                    <TabSelector
+                        state={state}
+                        navigation={navigation}
+                        position={position}
+                    />
+                )}
             >
                 <TopTab.Screen
                     name={CONST.TAB.NEW_CHAT}
+                    // @ts-expect-error TODO: 'isGroupChat' is declared here.
                     component={NewChatPage}
                 />
                 <TopTab.Screen
@@ -57,14 +44,6 @@ function NewChatSelectorPage(props) {
     );
 }
 
-NewChatSelectorPage.propTypes = propTypes;
-NewChatSelectorPage.defaultProps = defaultProps;
 NewChatSelectorPage.displayName = 'NewChatSelectorPage';
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        betas: {key: ONYXKEYS.BETAS},
-    }),
-)(NewChatSelectorPage);
+export default NewChatSelectorPage