acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

ALF up bottom bar native

Browse Source
This commit is contained in:
Samuel Newman
2025-03-03 23:02:31 +00:00
parent f7807e1f81
commit 57fe76692a
1 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/bottom-bar/BottomBar.tsx
+32 -52
View File
@@ -15,7 +15,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder' import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform' import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers' import {clamp} from '#/lib/numbers'
import {getTabState, TabState} from '#/lib/routes/helpers' import {getTabState, TabState} from '#/lib/routes/helpers'
import {useGate} from '#/lib/statsig/statsig' import {useGate} from '#/lib/statsig/statsig'
@@ -57,7 +56,7 @@ type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
export function BottomBar({navigation}: BottomTabBarProps) { export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
const pal = usePalette('default') const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
const {footerHeight} = useShellLayout() const {footerHeight} = useShellLayout()
@@ -147,8 +146,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
<Animated.View <Animated.View
style={[ style={[
styles.bottomBar, styles.bottomBar,
pal.view, t.atoms.bg,
hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border, hideBorder
? {borderColor: t.atoms.bg.backgroundColor}
: t.atoms.border_contrast_low,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)}, {paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
footerMinimalShellTransform, footerMinimalShellTransform,
]} ]}
@@ -163,12 +164,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtHome ? ( isAtHome ? (
<HomeFilled <HomeFilled
width={iconWidth + 1} width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/> />
) : ( ) : (
<Home <Home
width={iconWidth + 1} width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/> />
) )
} }
@@ -183,13 +184,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtSearch ? ( isAtSearch ? (
<MagnifyingGlassFilled <MagnifyingGlassFilled
width={iconWidth + 2} width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/> />
) : ( ) : (
<MagnifyingGlass <MagnifyingGlass
testID="bottomBarSearchBtn" testID="bottomBarSearchBtn"
width={iconWidth + 2} width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/> />
) )
} }
@@ -204,12 +205,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtMessages ? ( isAtMessages ? (
<MessageFilled <MessageFilled
width={iconWidth - 1} width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/> />
) : ( ) : (
<Message <Message
width={iconWidth - 1} width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/> />
) )
} }
@@ -236,12 +237,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtNotifications ? ( isAtNotifications ? (
<BellFilled <BellFilled
width={iconWidth} width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/> />
) : ( ) : (
<Bell <Bell
width={iconWidth} width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/> />
) )
} }
@@ -265,49 +266,28 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarProfileBtn" testID="bottomBarProfileBtn"
icon={ icon={
<View style={styles.ctrlIconSizingWrapper}> <View style={styles.ctrlIconSizingWrapper}>
{isAtMyProfile ? ( <View
<View style={[
style={[ styles.ctrlIcon,
styles.ctrlIcon, styles.profileIcon,
pal.text, isAtMyProfile && [
styles.profileIcon,
styles.onProfile, styles.onProfile,
{ {
borderColor: pal.text.color, borderColor: t.atoms.text.color,
borderWidth: live ? 0 : 1, borderWidth: live ? 0 : 1,
}, },
]}> ],
<UserAvatar ]}>
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar} <UserAvatar
size={iconWidth - 2} avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801: size={iconWidth - (isAtMyProfile ? 3 : 2)}
usePlainRNImage={true} // See https://github.com/bluesky-social/social-app/pull/1801:
type={profile?.associated?.labeler ? 'labeler' : 'user'} usePlainRNImage={true}
live={live} type={profile?.associated?.labeler ? 'labeler' : 'user'}
hideLiveBadge live={live}
/> hideLiveBadge
</View> />
) : ( </View>
<View
style={[
styles.ctrlIcon,
pal.text,
styles.profileIcon,
{
borderWidth: live ? 0 : 1,
},
]}>
<UserAvatar
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
size={iconWidth - 2}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
live={live}
hideLiveBadge
/>
</View>
)}
</View> </View>
} }
onPress={onPressProfile} onPress={onPressProfile}
@@ -335,7 +315,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={{flexDirection: 'row', alignItems: 'center', gap: 8}}> style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
<Logo width={28} /> <Logo width={28} />
<View style={{paddingTop: 4}}> <View style={{paddingTop: 4}}>
<Logotype width={80} fill={pal.text.color} /> <Logotype width={80} fill={t.atoms.text.color} />
</View> </View>
</View> </View>