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 {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers'
import {getTabState, TabState} from '#/lib/routes/helpers'
import {useGate} from '#/lib/statsig/statsig'
@@ -57,7 +56,7 @@ type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession()
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const safeAreaInsets = useSafeAreaInsets()
const {footerHeight} = useShellLayout()
@@ -147,8 +146,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
<Animated.View
style={[
styles.bottomBar,
pal.view,
hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border,
t.atoms.bg,
hideBorder
? {borderColor: t.atoms.bg.backgroundColor}
: t.atoms.border_contrast_low,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
footerMinimalShellTransform,
]}
@@ -163,12 +164,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtHome ? (
<HomeFilled
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/>
) : (
<Home
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 ? (
<MagnifyingGlassFilled
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/>
) : (
<MagnifyingGlass
testID="bottomBarSearchBtn"
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 ? (
<MessageFilled
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/>
) : (
<Message
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 ? (
<BellFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/>
) : (
<Bell
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"
icon={
<View style={styles.ctrlIconSizingWrapper}>
{isAtMyProfile ? (
<View
style={[
styles.ctrlIcon,
pal.text,
styles.profileIcon,
<View
style={[
styles.ctrlIcon,
styles.profileIcon,
isAtMyProfile && [
styles.onProfile,
{
borderColor: pal.text.color,
borderColor: t.atoms.text.color,
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
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>
)}
],
]}>
<UserAvatar
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
size={iconWidth - (isAtMyProfile ? 3 : 2)}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
live={live}
hideLiveBadge
/>
</View>
</View>
}
onPress={onPressProfile}
@@ -335,7 +315,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
<Logo width={28} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={pal.text.color} />
<Logotype width={80} fill={t.atoms.text.color} />
</View>
</View>