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;