diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js --- a/native/navigation/tab-navigator.react.js +++ b/native/navigation/tab-navigator.react.js @@ -1,10 +1,21 @@ // @flow +import { BottomTabView } from '@react-navigation/bottom-tabs'; +import { + createNavigatorFactory, + useNavigationBuilder, +} from '@react-navigation/native'; import type { + BottomTabNavigationEventMap, + BottomTabOptions, + CreateNavigator, + TabNavigationState, + ParamListBase, BottomTabNavigationHelpers, BottomTabNavigationProp, -} from '@react-navigation/bottom-tabs'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; + ExtraBottomTabNavigatorProps, + BottomTabNavigatorProps, +} from '@react-navigation/native'; import * as React from 'react'; import { unreadCount } from 'lib/selectors/thread-selectors.js'; @@ -21,6 +32,7 @@ type NavigationRoute, } from './route-names.js'; import { tabBar } from './tab-bar.react.js'; +import TabRouter from './tab-router.js'; import AppsDirectory from '../apps/apps-directory.react.js'; import Calendar from '../calendar/calendar.react.js'; import Chat from '../chat/chat.react.js'; @@ -59,11 +71,66 @@ ), }; +export type CustomBottomTabNavigationHelpers< + ParamList: ParamListBase = ParamListBase, +> = { + ...$Exact>, + ... +}; + export type TabNavigationProp< RouteName: $Keys = $Keys, > = BottomTabNavigationProp; -const Tab = createBottomTabNavigator< +type TabNavigatorProps = BottomTabNavigatorProps< + CustomBottomTabNavigationHelpers<>, +>; + +const TabNavigator = React.memo(function TabNavigator({ + id, + initialRouteName, + backBehavior, + children, + screenListeners, + screenOptions, + defaultScreenOptions, + ...rest +}: TabNavigatorProps) { + const { state, descriptors, navigation } = useNavigationBuilder(TabRouter, { + id, + initialRouteName, + backBehavior, + children, + screenListeners, + screenOptions, + defaultScreenOptions, + }); + + return ( + + ); +}); + +const createTabNavigator: CreateNavigator< + TabNavigationState, + BottomTabOptions, + BottomTabNavigationEventMap, + ExtraBottomTabNavigatorProps, +> = createNavigatorFactory< + TabNavigationState, + BottomTabOptions, + BottomTabNavigationEventMap, + BottomTabNavigationHelpers<>, + ExtraBottomTabNavigatorProps, +>(TabNavigator); + +const Tab = createTabNavigator< ScreenParamList, TabParamList, BottomTabNavigationHelpers, @@ -72,7 +139,7 @@ +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +route: NavigationRoute<'TabNavigator'>, }; -function TabNavigator(props: Props): React.Node { +function TabComponent(props: Props): React.Node { const colors = useColors(); const chatBadge = useSelector(unreadCount); const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); @@ -132,7 +199,6 @@ return ( @@ -162,4 +228,4 @@ }, }; -export default TabNavigator; +export default TabComponent; diff --git a/native/navigation/tab-router.js b/native/navigation/tab-router.js new file mode 100644 --- /dev/null +++ b/native/navigation/tab-router.js @@ -0,0 +1,32 @@ +// @flow + +import type { + Router, + RouterConfigOptions, + TabRouterOptions, + TabNavigationState, +} from '@react-navigation/native'; +import { TabRouter } from '@react-navigation/native'; + +type TabRouterNavigationAction = empty; + +export type TabRouterExtraNavigationHelpers = {}; + +function CustomTabRouter( + routerOptions: TabRouterOptions, +): Router { + const { getStateForAction: baseGetStateForAction, ...rest } = + TabRouter(routerOptions); + return { + ...rest, + getStateForAction: ( + lastState: TabNavigationState, + action: TabRouterNavigationAction, + options: RouterConfigOptions, + ) => { + return baseGetStateForAction(lastState, action, options); + }, + }; +} + +export default CustomTabRouter;