[TS migration] Migrate 'NewChatSelector' page to TypeScript

src/components/TabSelector/TabSelector.tsx

@@ -143,3 +143,4 @@ 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.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import TabSelector from '@components/TabSelector/TabSelector';
+import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
+import CONST from '@src/CONST';
+import NewChatPage from './NewChatPage';
+import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import useLocalize from '@hooks/useLocalize';
+
+
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
+    return (
+        <ScreenWrapper 
+            shouldEnableKeyboardAvoidingView={false}
+            includeSafeAreaPaddingBottom={false}
+            shouldShowOfflineIndicator={false}
+            shouldEnableMaxHeight
+            testID={NewChatSelectorPage.displayName}
+        >
+            <HeaderWithBackButton title={translate('sidebarScreen.fabNewChat')} />
+            <OnyxTabNavigator
+                id={CONST.TAB.NEW_CHAT_TAB_ID}
+                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
+                    name={CONST.TAB.NEW_ROOM}
+                    component={WorkspaceNewRoomPage}
+                />
+            </OnyxTabNavigator>
+        </ScreenWrapper>
+    );
+}
+
+NewChatSelectorPage.displayName = 'NewChatSelectorPage';
+
+export default NewChatSelectorPage