diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js index 317ac4c52..ed5ccafd2 100644 --- a/native/navigation/tab-navigator.react.js +++ b/native/navigation/tab-navigator.react.js @@ -1,165 +1,165 @@ // @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.js'; import CommunityDrawerButton from './community-drawer-button.react.js'; import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.js'; import { CalendarRouteName, ChatRouteName, ProfileRouteName, AppsRouteName, type ScreenParamList, type TabParamList, type NavigationRoute, } from './route-names.js'; import { tabBar } from './tab-bar.react.js'; import AppsDirectory from '../apps/apps-directory.react.js'; import Calendar from '../calendar/calendar.react.js'; import Chat from '../chat/chat.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import Profile from '../profile/profile.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useColors } from '../themes/colors.js'; 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, >(); type Props = { +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +route: NavigationRoute<'TabNavigator'>, }; function TabNavigator(props: Props): React.Node { const colors = useColors(); const chatBadge = useSelector(unreadCount); const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); const headerLeft = React.useCallback( () => , [props.navigation], ); const headerCommonOptions = React.useMemo( () => ({ headerShown: true, headerLeft, headerStyle: { backgroundColor: colors.tabBarBackground, }, headerShadowVisible: false, }), [colors.tabBarBackground, headerLeft], ); const calendarOptions = React.useMemo( () => ({ ...calendarTabOptions, ...headerCommonOptions }), [headerCommonOptions], ); let calendarTab; if (isCalendarEnabled) { calendarTab = ( ); } const appsOptions = React.useMemo( () => ({ ...appsTabOptions, ...headerCommonOptions }), [headerCommonOptions], ); const tabBarScreenOptions = React.useMemo( () => ({ headerShown: false, tabBarHideOnKeyboard: false, tabBarActiveTintColor: colors.tabBarActiveTintColor, tabBarStyle: { backgroundColor: colors.tabBarBackground, borderTopWidth: 1, }, lazy: false, }), [colors.tabBarActiveTintColor, colors.tabBarBackground], ); return ( - {calendarTab} + {calendarTab} ); } const styles = { icon: { fontSize: 28, }, }; export default TabNavigator;