diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js --- a/native/calendar/calendar.react.js +++ b/native/calendar/calendar.react.js @@ -53,7 +53,6 @@ addKeyboardDismissListener, removeKeyboardListener, } from '../keyboard/keyboard'; -import type { TabNavigationProp } from '../navigation/app-navigator.react'; import DisconnectedBar from '../navigation/disconnected-bar.react'; import { createIsForegroundSelector, @@ -65,6 +64,7 @@ ThreadPickerModalRouteName, } from '../navigation/route-names'; import type { NavigationRoute } from '../navigation/route-names'; +import type { TabNavigationProp } from '../navigation/tab-navigator.react'; import { useSelector } from '../redux/redux-utils'; import { calendarListData } from '../selectors/calendar-selectors'; import type { diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js --- a/native/calendar/entry.react.js +++ b/native/calendar/entry.react.js @@ -63,13 +63,13 @@ import TextInput from '../components/text-input.react'; import Markdown from '../markdown/markdown.react'; import { inlineMarkdownRules } from '../markdown/rules.react'; -import type { TabNavigationProp } from '../navigation/app-navigator.react'; import { createIsForegroundSelector, nonThreadCalendarQuery, } from '../navigation/nav-selectors'; import { NavContext } from '../navigation/navigation-context'; import { ThreadPickerModalRouteName } from '../navigation/route-names'; +import type { TabNavigationProp } from '../navigation/tab-navigator.react'; import { useSelector } from '../redux/redux-utils'; import { colors, useStyles } from '../themes/colors'; import type { LayoutEvent } from '../types/react-native'; diff --git a/native/chat/chat-list.react.js b/native/chat/chat-list.react.js --- a/native/chat/chat-list.react.js +++ b/native/chat/chat-list.react.js @@ -18,7 +18,7 @@ type KeyboardState, KeyboardContext, } from '../keyboard/keyboard-state'; -import type { TabNavigationProp } from '../navigation/app-navigator.react'; +import type { TabNavigationProp } from '../navigation/tab-navigator.react'; import { useSelector } from '../redux/redux-utils'; import type { ChatMessageItemWithHeight } from '../types/chat-types'; import type { ScrollEvent } from '../types/react-native'; diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -36,13 +36,13 @@ import Button from '../components/button.react'; import Search from '../components/search.react'; -import type { TabNavigationProp } from '../navigation/app-navigator.react'; import { SidebarListModalRouteName, HomeChatThreadListRouteName, BackgroundChatThreadListRouteName, type NavigationRoute, } from '../navigation/route-names'; +import type { TabNavigationProp } from '../navigation/tab-navigator.react'; import { useSelector } from '../redux/redux-utils'; import { type IndicatorStyle, diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js --- a/native/chat/settings/thread-settings.react.js +++ b/native/chat/settings/thread-settings.react.js @@ -41,7 +41,6 @@ type KeyboardState, KeyboardContext, } from '../../keyboard/keyboard-state'; -import type { TabNavigationProp } from '../../navigation/app-navigator.react'; import { defaultStackScreenOptions } from '../../navigation/options'; import { OverlayContext, @@ -52,6 +51,7 @@ AddUsersModalRouteName, ComposeSubchannelModalRouteName, } from '../../navigation/route-names'; +import type { TabNavigationProp } from '../../navigation/tab-navigator.react'; import { useSelector } from '../../redux/redux-utils'; import type { AppState } from '../../redux/state-types'; import { 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 @@ -1,34 +1,21 @@ // @flow -import type { - BottomTabNavigationHelpers, - BottomTabNavigationProp, -} from '@react-navigation/bottom-tabs'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import * as SplashScreen from 'expo-splash-screen'; import * as React from 'react'; import { PersistGate } from 'redux-persist/integration/react'; -import { unreadCount } from 'lib/selectors/thread-selectors'; - -import AppsDirectory from '../apps/apps-directory.react'; -import Calendar from '../calendar/calendar.react'; -import Chat from '../chat/chat.react'; import { MultimediaMessageTooltipModal } from '../chat/multimedia-message-tooltip-modal.react'; import { RobotextMessageTooltipModal } from '../chat/robotext-message-tooltip-modal.react'; import ThreadSettingsMemberTooltipModal from '../chat/settings/thread-settings-member-tooltip-modal.react'; import { TextMessageTooltipModal } from '../chat/text-message-tooltip-modal.react'; -import SWMansionIcon from '../components/swmansion-icon.react'; import { type SQLiteContextType, SQLiteContext } from '../data/sqlite-context'; import KeyboardStateContainer from '../keyboard/keyboard-state-container.react'; import CameraModal from '../media/camera-modal.react'; import ImageModal from '../media/image-modal.react'; import VideoPlaybackModal from '../media/video-playback-modal.react'; -import Profile from '../profile/profile.react'; import RelationshipListItemTooltipModal from '../profile/relationship-list-item-tooltip-modal.react'; import PushHandler from '../push/push-handler.react'; import { getPersistor } from '../redux/persist'; -import { useSelector } from '../redux/redux-utils'; import { RootContext } from '../root-context'; import { waitForInteractions } from '../utils/timers'; import ActionResultModal from './action-result-modal.react'; @@ -39,9 +26,6 @@ } from './overlay-navigator.react'; import type { RootNavigationProp } from './root-navigator.react'; import { - CalendarRouteName, - ChatRouteName, - ProfileRouteName, TabNavigatorRouteName, ImageModalRouteName, MultimediaMessageTooltipModalRouteName, @@ -52,106 +36,13 @@ RobotextMessageTooltipModalRouteName, CameraModalRouteName, VideoPlaybackModalRouteName, - AppsRouteName, type ScreenParamList, - type TabParamList, type OverlayParamList, } from './route-names'; -import { tabBar } from './tab-bar.react'; +import TabNavigator from './tab-navigator.react'; let splashScreenHasHidden = false; -const calendarTabOptions = { - tabBarLabel: 'Calendar', - // eslint-disable-next-line react/display-name - tabBarIcon: ({ color }) => ( - - ), -}; -const getChatTabOptions = (badge: number) => ({ - tabBarLabel: 'Inbox', - // eslint-disable-next-line react/display-name - tabBarIcon: ({ color }) => ( - - ), - tabBarBadge: badge ? badge : undefined, -}); -const profileTabOptions = { - tabBarLabel: 'Profile', - // eslint-disable-next-line react/display-name - tabBarIcon: ({ color }) => ( - - ), -}; -const appsTabOptions = { - tabBarLabel: 'Apps', - // eslint-disable-next-line react/display-name - tabBarIcon: ({ color }) => ( - - ), -}; - -export type TabNavigationProp< - RouteName: $Keys = $Keys, -> = BottomTabNavigationProp; - -const Tab = createBottomTabNavigator< - ScreenParamList, - TabParamList, - BottomTabNavigationHelpers, ->(); -const tabBarScreenOptions = { - headerShown: false, - tabBarHideOnKeyboard: false, - tabBarActiveTintColor: '#AE94DB', - tabBarStyle: { - backgroundColor: '#0A0A0A', - borderTopWidth: 1, - }, - lazy: false, -}; -function TabNavigator() { - const chatBadge = useSelector(unreadCount); - const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); - - let calendarTab; - if (isCalendarEnabled) { - calendarTab = ( - - ); - } - - return ( - - {calendarTab} - - - - - ); -} - export type AppNavigationProp< RouteName: $Keys = $Keys, > = OverlayNavigationProp; @@ -250,10 +141,4 @@ ); } -const styles = { - icon: { - fontSize: 28, - }, -}; - export default AppNavigator; diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/tab-navigator.react.js @@ -0,0 +1,131 @@ +// @flow + +import type { + BottomTabNavigationHelpers, + BottomTabNavigationProp, +} from '@react-navigation/bottom-tabs'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import * as React from 'react'; + +import { unreadCount } from 'lib/selectors/thread-selectors'; + +import AppsDirectory from '../apps/apps-directory.react'; +import Calendar from '../calendar/calendar.react'; +import Chat from '../chat/chat.react'; +import SWMansionIcon from '../components/swmansion-icon.react'; +import Profile from '../profile/profile.react'; +import { useSelector } from '../redux/redux-utils'; +import { + CalendarRouteName, + ChatRouteName, + ProfileRouteName, + AppsRouteName, + type ScreenParamList, + type TabParamList, +} from './route-names'; +import type { NavigationRoute } from './route-names'; +import { tabBar } from './tab-bar.react'; + +const calendarTabOptions = { + tabBarLabel: 'Calendar', + // eslint-disable-next-line react/display-name + tabBarIcon: ({ color }) => ( + + ), +}; +const getChatTabOptions = (badge: number) => ({ + tabBarLabel: 'Inbox', + // eslint-disable-next-line react/display-name + tabBarIcon: ({ color }) => ( + + ), + tabBarBadge: badge ? badge : undefined, +}); +const profileTabOptions = { + tabBarLabel: 'Profile', + // eslint-disable-next-line react/display-name + tabBarIcon: ({ color }) => ( + + ), +}; +const appsTabOptions = { + tabBarLabel: 'Apps', + // eslint-disable-next-line react/display-name + tabBarIcon: ({ color }) => ( + + ), +}; + +export type TabNavigationProp< + RouteName: $Keys = $Keys, +> = BottomTabNavigationProp; + +const Tab = createBottomTabNavigator< + ScreenParamList, + TabParamList, + BottomTabNavigationHelpers, +>(); +const tabBarScreenOptions = { + headerShown: false, + tabBarHideOnKeyboard: false, + tabBarActiveTintColor: '#AE94DB', + tabBarStyle: { + backgroundColor: '#0A0A0A', + borderTopWidth: 1, + }, + lazy: false, +}; +type Props = { + +navigation: TabNavigationProp<'TabNavigator'>, + +route: NavigationRoute<'TabNavigator'>, +}; +// eslint-disable-next-line no-unused-vars +function TabNavigator(props: Props): React.Node { + const chatBadge = useSelector(unreadCount); + const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); + + let calendarTab; + if (isCalendarEnabled) { + calendarTab = ( + + ); + } + + return ( + + {calendarTab} + + + + + ); +} + +const styles = { + icon: { + fontSize: 28, + }, +}; + +export default TabNavigator;