diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index bcaaf34178..212587e30b 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -36,6 +36,10 @@ import { Bell_Filled_Corner0_Rounded as BellFilled, Bell_Stroke2_Corner0_Rounded as Bell, } from '#/components/icons/Bell' +import { + Hashtag_Filled_Corner0_Rounded as HashtagFilled, + Hashtag_Stroke2_Corner0_Rounded as Hashtag, +} from '#/components/icons/Hashtag' import { HomeOpen_Filled_Corner0_Rounded as HomeFilled, HomeOpen_Stoke2_Corner0_Rounded as Home, @@ -63,8 +67,14 @@ export function BottomBar({navigation}: BottomTabBarProps) { const safeAreaInsets = useSafeAreaInsets() const {track} = useAnalytics() const {footerHeight} = useShellLayout() - const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} = - useNavigationTabState() + const { + isAtHome, + isAtSearch, + isAtFeeds, + isAtNotifications, + isAtMyProfile, + isAtMessages, + } = useNavigationTabState() const numUnreadNotifications = useUnreadNotifications() const numUnreadMessages = useUnreadMessageCount() const {footerMinimalShellTransform} = useMinimalShellMode() @@ -108,6 +118,10 @@ export function BottomBar({navigation}: BottomTabBarProps) { () => onPressTab('Search'), [onPressTab], ) + const onPressFeeds = React.useCallback( + () => onPressTab('Feeds'), + [onPressTab], + ) const onPressNotifications = React.useCallback( () => onPressTab('Notifications'), [onPressTab], @@ -182,7 +196,7 @@ export function BottomBar({navigation}: BottomTabBarProps) { accessibilityLabel={_(msg`Search`)} accessibilityHint="" /> - {gate('dms') && ( + {gate('dms') ? ( + ) : ( + + ) : ( + + ) + } + onPress={onPressFeeds} + accessible={true} + accessibilityRole="tab" + accessibilityLabel={_(msg`Feeds`)} + accessibilityHint="" + /> )} - {gate('dms') && ( + {gate('dms') ? ( {({isActive}) => { const Icon = isActive ? MessageFilled : Message @@ -113,6 +117,18 @@ export function BottomBarWeb() { ) }} + ) : ( + + {({isActive}) => { + const Icon = isActive ? HashtagFilled : Hashtag + return ( + + ) + }} + )} {({isActive}) => {