diff --git a/native/chat/thread-screen-pruner.react.js b/native/chat/thread-screen-pruner.react.js --- a/native/chat/thread-screen-pruner.react.js +++ b/native/chat/thread-screen-pruner.react.js @@ -17,6 +17,7 @@ import { AppRouteName, ChatRouteName, + CommunityDrawerNavigatorRouteName, TabNavigatorRouteName, } from '../navigation/route-names'; import { useSelector } from '../redux/redux-utils'; @@ -41,8 +42,12 @@ 'Navigation context should contain route for AppNavigator ' + 'when ThreadScreenPruner is rendered', ); - const tabRoute = getChildRouteFromNavigatorRoute( + const communityDrawerRoute = getChildRouteFromNavigatorRoute( appRoute, + CommunityDrawerNavigatorRouteName, + ); + const tabRoute = getChildRouteFromNavigatorRoute( + communityDrawerRoute, TabNavigatorRouteName, ); const chatRoute = getChildRouteFromNavigatorRoute( diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js --- a/native/navigation/app-navigator.react.js +++ b/native/navigation/app-navigator.react.js @@ -19,6 +19,7 @@ import { RootContext } from '../root-context'; import { waitForInteractions } from '../utils/timers'; import ActionResultModal from './action-result-modal.react'; +import { CommunityDrawerNavigator } from './community-drawer-navigator.react'; import { createOverlayNavigator } from './overlay-navigator.react'; import type { OverlayNavigationProp, @@ -26,7 +27,6 @@ } from './overlay-navigator.react'; import type { RootNavigationProp } from './root-navigator.react'; import { - TabNavigatorRouteName, ImageModalRouteName, MultimediaMessageTooltipModalRouteName, ActionResultModalRouteName, @@ -36,10 +36,10 @@ RobotextMessageTooltipModalRouteName, CameraModalRouteName, VideoPlaybackModalRouteName, + CommunityDrawerNavigatorRouteName, type ScreenParamList, type OverlayParamList, } from './route-names'; -import TabNavigator from './tab-navigator.react'; let splashScreenHasHidden = false; @@ -104,7 +104,10 @@ return ( - + ; +export type CommunityDrawerNavigationProp< + RouteName: $Keys = $Keys, +> = DrawerNavigationProp; + +const Drawer = createDrawerNavigator< + ScreenParamList, + CommunityDrawerParamList, + DrawerNavigationHelpers, +>(); + type Props = { +navigation: AppNavigationProp<'CommunityDrawerNavigator'>, +route: NavigationRoute<'CommunityDrawerNavigator'>, @@ -27,9 +43,7 @@ return ( diff --git a/native/navigation/default-state.js b/native/navigation/default-state.js --- a/native/navigation/default-state.js +++ b/native/navigation/default-state.js @@ -16,6 +16,7 @@ HomeChatThreadListRouteName, BackgroundChatThreadListRouteName, AppsRouteName, + CommunityDrawerNavigatorRouteName, } from './route-names'; export type NavInfo = $Exact; @@ -31,40 +32,49 @@ index: 0, routes: [ { - name: TabNavigatorRouteName, + name: CommunityDrawerNavigatorRouteName, state: { - type: 'tab', + type: 'drawer', index: 0, routes: [ { - name: ChatRouteName, + name: TabNavigatorRouteName, state: { - type: 'stack', + type: 'tab', index: 0, routes: [ { - name: ChatThreadListRouteName, + name: ChatRouteName, state: { - type: 'tab', + type: 'stack', index: 0, routes: [ - { name: HomeChatThreadListRouteName }, - { name: BackgroundChatThreadListRouteName }, + { + name: ChatThreadListRouteName, + state: { + type: 'tab', + index: 0, + routes: [ + { name: HomeChatThreadListRouteName }, + { name: BackgroundChatThreadListRouteName }, + ], + }, + }, ], }, }, + { + name: ProfileRouteName, + state: { + type: 'stack', + index: 0, + routes: [{ name: ProfileScreenRouteName }], + }, + }, + { name: AppsRouteName }, ], }, }, - { - name: ProfileRouteName, - state: { - type: 'stack', - index: 0, - routes: [{ name: ProfileScreenRouteName }], - }, - }, - { name: AppsRouteName }, ], }, }, diff --git a/native/navigation/nav-selectors.js b/native/navigation/nav-selectors.js --- a/native/navigation/nav-selectors.js +++ b/native/navigation/nav-selectors.js @@ -31,6 +31,7 @@ scrollBlockingModals, chatRootModals, threadRoutes, + CommunityDrawerNavigatorRouteName, } from './route-names'; const baseCreateIsForegroundSelector = (routeName: string) => @@ -73,10 +74,15 @@ } const appState = getStateFromNavigatorRoute(currentRootSubroute); const [firstAppSubroute] = appState.routes; - if (firstAppSubroute.name !== TabNavigatorRouteName) { + if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { return false; } - const tabState = getStateFromNavigatorRoute(firstAppSubroute); + const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); + const [firstCommunityDrawerSubroute] = communityDrawerState.routes; + if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { + return false; + } + const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); return tabState.routes[tabState.index].name === routeName; }, ); @@ -155,10 +161,15 @@ } const appState = getStateFromNavigatorRoute(currentRootSubroute); const [firstAppSubroute] = appState.routes; - if (firstAppSubroute.name !== TabNavigatorRouteName) { + if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { + return null; + } + const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); + const [firstCommunityDrawerSubroute] = communityDrawerState.routes; + if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { return null; } - const tabState = getStateFromNavigatorRoute(firstAppSubroute); + const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); const currentTabSubroute = tabState.routes[tabState.index]; if (currentTabSubroute.name !== ChatRouteName) { return null; diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -38,6 +38,7 @@ export const ColorSelectorModalRouteName = 'ColorSelectorModal'; export const ComposeSubchannelModalRouteName = 'ComposeSubchannelModal'; export const ComposeSubchannelRouteName = 'ComposeSubchannel'; +export const CommunityDrawerNavigatorRouteName = 'CommunityDrawerNavigator'; export const CustomServerModalRouteName = 'CustomServerModal'; export const DefaultNotificationsPreferencesRouteName = 'DefaultNotifications'; export const DeleteAccountRouteName = 'DeleteAccount'; @@ -94,7 +95,7 @@ }; export type OverlayParamList = { - +TabNavigator: void, + +CommunityDrawerNavigator: void, +ImageModal: ImageModalParams, +ActionResultModal: ActionResultModalParams, +CameraModal: CameraModalParams, @@ -135,6 +136,8 @@ +BlockList: void, }; +export type CommunityDrawerParamList = { +TabNavigator: void }; + export type ScreenParamList = { ...RootParamList, ...OverlayParamList, @@ -142,6 +145,7 @@ ...ChatParamList, ...ChatTopTabsParamList, ...ProfileParamList, + ...CommunityDrawerParamList, }; export type NavigationRoute< 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 @@ -16,6 +16,7 @@ import Profile from '../profile/profile.react'; import { useSelector } from '../redux/redux-utils'; import { useColors } from '../themes/colors'; +import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react'; import { CalendarRouteName, ChatRouteName, @@ -67,7 +68,7 @@ BottomTabNavigationHelpers, >(); type Props = { - +navigation: TabNavigationProp<'TabNavigator'>, + +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +route: NavigationRoute<'TabNavigator'>, }; // eslint-disable-next-line no-unused-vars