diff --git a/src/App.native.tsx b/src/App.native.tsx
index e3f85c0fe5..80e7d57f32 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -73,6 +73,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
import {Splash} from '#/Splash'
import {BottomSheetProvider} from '../modules/bottom-sheet'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
SplashScreen.preventAutoHideAsync()
if (isIOS) {
@@ -152,14 +153,16 @@ function InnerApp() {
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 97ada61485..ca23d0c668 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -62,6 +62,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
import {Provider as PortalProvider} from '#/components/Portal'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
/**
* Begin geolocation ASAP
@@ -133,10 +134,12 @@ function InnerApp() {
-
-
-
-
+
+
+
+
+
+
diff --git a/src/lib/hooks/useHideBottomBarBorder.tsx b/src/lib/hooks/useHideBottomBarBorder.tsx
new file mode 100644
index 0000000000..e21184fda4
--- /dev/null
+++ b/src/lib/hooks/useHideBottomBarBorder.tsx
@@ -0,0 +1,50 @@
+import {createContext, useCallback, useContext, useState} from 'react'
+import {useFocusEffect} from '@react-navigation/native'
+
+type HideBottomBarBorderSetter = () => () => void
+
+const HideBottomBarBorderContext = createContext(false)
+const HideBottomBarBorderSetterContext =
+ createContext(null)
+
+export function useHideBottomBarBorderSetter() {
+ const hideBottomBarBorder = useContext(HideBottomBarBorderSetterContext)
+ if (!hideBottomBarBorder) {
+ throw new Error(
+ 'useHideBottomBarBorderSetter must be used within a HideBottomBarBorderProvider',
+ )
+ }
+ return hideBottomBarBorder
+}
+
+export function useHideBottomBarBorderForScreen() {
+ const hideBorder = useHideBottomBarBorderSetter()
+
+ useFocusEffect(
+ useCallback(() => {
+ const cleanup = hideBorder()
+ return () => cleanup()
+ }, [hideBorder]),
+ )
+}
+
+export function useHideBottomBarBorder() {
+ return useContext(HideBottomBarBorderContext)
+}
+
+export function Provider({children}: {children: React.ReactNode}) {
+ const [refCount, setRefCount] = useState(0)
+
+ const setter = useCallback(() => {
+ setRefCount(prev => prev + 1)
+ return () => setRefCount(prev => prev - 1)
+ }, [])
+
+ return (
+
+ 0}>
+ {children}
+
+
+ )
+}
diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx
index 5c39ff7e95..6b421e9de9 100644
--- a/src/view/com/post-thread/PostThreadComposePrompt.tsx
+++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx
@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useHaptics} from '#/lib/haptics'
+import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -29,6 +30,8 @@ export function PostThreadComposePrompt({
onOut: onHoverOut,
} = useInteractionState()
+ useHideBottomBarBorderForScreen()
+
return (
{
@@ -146,7 +148,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={[
styles.bottomBar,
pal.view,
- pal.border,
+ hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
footerMinimalShellTransform,
]}
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 7a320cb438..8dce85cd17 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -5,16 +5,18 @@ import {msg, plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigationState} from '@react-navigation/native'
+import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
import {makeProfileLink} from '#/lib/routes/links'
-import {CommonNavigatorParams} from '#/lib/routes/types'
+import {type CommonNavigatorParams} from '#/lib/routes/types'
import {useGate} from '#/lib/statsig/statsig'
import {useHomeBadge} from '#/state/home-badge'
import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useSession} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useShellLayout} from '#/state/shell/shell-layout'
import {useCloseAllActiveElements} from '#/state/util'
import {Link} from '#/view/com/util/Link'
import {Logo} from '#/view/icons/Logo'
@@ -49,6 +51,8 @@ export function BottomBarWeb() {
const footerMinimalShellTransform = useMinimalShellFooterTransform()
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
+ const {footerHeight} = useShellLayout()
+ const hideBorder = useHideBottomBarBorder()
const iconWidth = 26
const unreadMessageCount = useUnreadMessageCount()
@@ -74,9 +78,12 @@ export function BottomBarWeb() {
styles.bottomBar,
styles.bottomBarWeb,
t.atoms.bg,
- t.atoms.border_contrast_low,
+ hideBorder
+ ? {borderColor: t.atoms.bg.backgroundColor}
+ : t.atoms.border_contrast_low,
footerMinimalShellTransform,
- ]}>
+ ]}
+ onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
{hasSession ? (
<>