[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

@@ -7,6 +7,7 @@ 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 type { TabSelectorProps } from '@components/TabSelector/TabSelector';
 import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
 
 type OnyxTabNavigatorOnyxProps = {
@@ -24,6 +25,8 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
+        tabBar: (props: TabSelectorProps) => React.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/NewChatPage.tsx

@@ -41,7 +41,7 @@ type NewChatPageWithOnyxProps = {
 };
 
 type NewChatPageProps = NewChatPageWithOnyxProps & {
-    isGroupChat: boolean;
+    isGroupChat?: boolean;
 };
 
 const excludedGroupEmails = CONST.EXPENSIFY_EMAILS.filter((value) => value !== CONST.EMAIL.CONCIERGE);

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

@@ -1,31 +1,17 @@
-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 useLocalize from '@hooks/useLocalize';
+import { useNavigation } from '@react-navigation/native';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import NewChatPage from './NewChatPage';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
 
-function NewChatSelectorPage(props) {
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
     const navigation = useNavigation();
 
     return (
@@ -37,7 +23,7 @@ function NewChatSelectorPage(props) {
             testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('sidebarScreen.fabNewChat')}
+                title={translate('sidebarScreen.fabNewChat')}
                 onBackButtonPress={navigation.goBack}
             />
             <OnyxTabNavigator
@@ -57,14 +43,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