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

remove main header state from global context

Browse Source
This commit is contained in:
Samuel Newman
2026-05-18 14:50:50 +03:00
parent 54105648ab
commit 4e5b1486b4
6 changed files with 94 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/hooks/useMinimalShellTransform.ts
-52
View File
@@ -1,62 +1,10 @@
import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useMinimalShellMode} from '#/state/shell/minimal-mode'
import {useShellLayout} from '#/state/shell/shell-layout'
import {IS_LIQUID_GLASS} from '#/env'
// Keep these separated so that we only pay for useAnimatedStyle that gets used.
export function useMinimalShellHeaderTransform() {
const {headerMode} = useMinimalShellMode()
const {headerHeight} = useShellLayout()
const {top: topInset} = useSafeAreaInsets()
const headerPinnedHeight = IS_LIQUID_GLASS ? topInset : 0
const headerTransform = useAnimatedStyle(() => {
const headerModeValue = headerMode.get()
const hHeight = headerHeight.get()
if (IS_LIQUID_GLASS) {
// bit of a hackfix, but: the header can get affected by scrollEdgeEffects
// when animating from closed to open. workaround is to trigger a relayout
// by offsetting the top position. the actual value doesn't matter, and we
// simultaneously offset it using the translate transform.
// I think a cleaner way to do it would be to use UIScrollEdgeElementContainerInteraction
// manually or something like that, because this kinda sucks -sfn
const relayoutingOffset = headerModeValue === 0 ? 1 : 0
return {
top: relayoutingOffset,
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerModeValue, 2),
transform: [
{
translateY:
interpolate(
headerModeValue,
[0, 1],
[0, headerPinnedHeight - hHeight],
) - relayoutingOffset,
},
],
}
}
return {
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerModeValue, 2),
transform: [
{
translateY: interpolate(headerModeValue, [0, 1], [0, -hHeight]),
},
],
}
})
return headerTransform
}
export function useMinimalShellFooterTransform() {
const {footerMode} = useMinimalShellMode()
const {footerHeight} = useShellLayout()
src/state/shell/index.tsx
-1
View File
@@ -14,7 +14,6 @@ export {
export {
useEnableMinimalShellMode,
useEnableMinimalShellModeForScreen,
useMinimalShellMode,
} from './minimal-mode'
export {useOnboardingDispatch, useOnboardingState} from './onboarding'
export {useTickEveryMinute} from './tick-every-minute'
src/state/shell/minimal-mode.tsx
+2 -10
View File
@@ -14,7 +14,6 @@ import {
import {useFocusEffect} from '@react-navigation/native'
type StateContext = {
headerMode: SharedValue<number>
footerMode: SharedValue<number>
}
type SetContext = {
@@ -28,24 +27,18 @@ const setContext = createContext<SetContext | null>(null)
setContext.displayName = 'MinimalModeSetContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const headerMode = useSharedValue(0)
const footerMode = useSharedValue(0)
const setModeWorklet = useCallback(
(v: boolean) => {
'worklet'
headerMode.set(() =>
withSpring(v ? 1 : 0, {
overshootClamping: true,
}),
)
footerMode.set(() =>
withSpring(v ? 1 : 0, {
overshootClamping: true,
}),
)
},
[headerMode, footerMode],
[footerMode],
)
// defaults to "visible", if the count is >0 it gets hidden
@@ -74,10 +67,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const value = useMemo(
() => ({
headerMode,
footerMode,
}),
[headerMode, footerMode],
[footerMode],
)
return (
<stateContext.Provider value={value}>
src/view/com/home/HomeHeaderLayoutMobile.tsx
+2 -2
View File
@@ -8,11 +8,11 @@ import {useNavigation} from '@react-navigation/native'
import {HITSLOP_10} from '#/lib/constants'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useHaptics} from '#/lib/haptics'
import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
import {type NavigationProp} from '#/lib/routes/types'
import {emitSoftReset} from '#/state/events'
import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useHomeHeaderTransform} from '#/view/com/util/MainScrollProvider'
import {Logo} from '#/view/icons/Logo'
import {atoms as a, useTheme} from '#/alf'
import {ButtonIcon} from '#/components/Button'
@@ -31,7 +31,7 @@ export function HomeHeaderLayoutMobile({
const {_} = useLingui()
const {headerHeight} = useShellLayout()
const insets = useSafeAreaInsets()
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
const headerMinimalShellTransform = useHomeHeaderTransform()
const {hasSession} = useSession()
const playHaptic = useHaptics()
const {navigate} = useNavigation<NavigationProp>()
src/view/com/util/MainScrollProvider.tsx
+78 -3
View File
@@ -1,8 +1,10 @@
import {useCallback, useEffect} from 'react'
import {createContext, useCallback, useContext, useEffect} from 'react'
import {type NativeScrollEvent} from 'react-native'
import {
clamp,
interpolate,
type SharedValue,
useAnimatedStyle,
useSharedValue,
withSpring,
} from 'react-native-reanimated'
@@ -10,15 +12,88 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {EventEmitter} from 'eventemitter3'
import {ScrollProvider} from '#/lib/ScrollContext'
import {useMinimalShellMode} from '#/state/shell'
import {useShellLayout} from '#/state/shell/shell-layout'
import {IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
const WEB_HIDE_SHELL_THRESHOLD = 200
const HomeHeaderModeContext = createContext<SharedValue<number> | null>(null)
HomeHeaderModeContext.displayName = 'HomeHeaderModeContext'
export function HomeHeaderModeProvider({
children,
}: {
children: React.ReactNode
}) {
const headerMode = useSharedValue(0)
return (
<HomeHeaderModeContext.Provider value={headerMode}>
{children}
</HomeHeaderModeContext.Provider>
)
}
export function useHomeHeaderMode() {
const headerMode = useContext(HomeHeaderModeContext)
if (!headerMode) {
throw new Error(
'useHomeHeaderMode must be used within a HomeHeaderModeProvider',
)
}
return headerMode
}
export function useHomeHeaderTransform() {
const headerMode = useHomeHeaderMode()
const {headerHeight} = useShellLayout()
const {top: topInset} = useSafeAreaInsets()
const headerPinnedHeight = IS_LIQUID_GLASS ? topInset : 0
return useAnimatedStyle(() => {
const headerModeValue = headerMode.get()
const hHeight = headerHeight.get()
if (IS_LIQUID_GLASS) {
// bit of a hackfix, but: the header can get affected by scrollEdgeEffects
// when animating from closed to open. workaround is to trigger a relayout
// by offsetting the top position. the actual value doesn't matter, and we
// simultaneously offset it using the translate transform.
// I think a cleaner way to do it would be to use UIScrollEdgeElementContainerInteraction
// manually or something like that, because this kinda sucks -sfn
const relayoutingOffset = headerModeValue === 0 ? 1 : 0
return {
top: relayoutingOffset,
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerModeValue, 2),
transform: [
{
translateY:
interpolate(
headerModeValue,
[0, 1],
[0, headerPinnedHeight - hHeight],
) - relayoutingOffset,
},
],
}
}
return {
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerModeValue, 2),
transform: [
{
translateY: interpolate(headerModeValue, [0, 1], [0, -hHeight]),
},
],
}
})
}
export function MainScrollProvider({children}: {children: React.ReactNode}) {
const {headerHeight} = useShellLayout()
const {headerMode} = useMinimalShellMode()
const headerMode = useHomeHeaderMode()
const {top: topInset} = useSafeAreaInsets()
const headerPinnedHeight = IS_LIQUID_GLASS ? topInset : 0
const startDragOffset = useSharedValue<number | null>(null)
src/view/screens/Home.tsx
+12 -7
View File
@@ -21,7 +21,6 @@ import {type FeedDescriptor, type FeedParams} from '#/state/queries/post-feed'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {type UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
import {useSession} from '#/state/session'
import {useMinimalShellMode} from '#/state/shell'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
import {FeedPage} from '#/view/com/feeds/FeedPage'
@@ -34,6 +33,10 @@ import {
import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState'
import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState'
import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed'
import {
HomeHeaderModeProvider,
useHomeHeaderMode,
} from '#/view/com/util/MainScrollProvider'
import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
import * as Layout from '#/components/Layout'
import {useAnalytics} from '#/analytics'
@@ -81,11 +84,13 @@ export function HomeScreen(props: Props) {
if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) {
return (
<Layout.Screen testID="HomeScreen" noInsetTop={IS_LIQUID_GLASS}>
<HomeScreenReady
{...props}
preferences={preferences}
pinnedFeedInfos={pinnedFeedInfos}
/>
<HomeHeaderModeProvider>
<HomeScreenReady
{...props}
preferences={preferences}
pinnedFeedInfos={pinnedFeedInfos}
/>
</HomeHeaderModeProvider>
</Layout.Screen>
)
} else {
@@ -139,7 +144,7 @@ function HomeScreenReady({
}, [selectedIndex])
const {hasSession} = useSession()
const {headerMode} = useMinimalShellMode()
const headerMode = useHomeHeaderMode()
const showHeader = useCallback(() => {
'worklet'
headerMode.set(() => withSpring(0, {overshootClamping: true}))