Blur effect on home screen (iOS 26) (#9935)

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,6 +1,6 @@
-import {type JSX} from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -17,16 +17,18 @@ import {ButtonIcon} from '#/components/Button'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
 import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
+import {IS_LIQUID_GLASS} from '#/env'
 
 export function HomeHeaderLayoutMobile({
   children,
 }: {
   children: React.ReactNode
-  tabBarAnchor: JSX.Element | null | undefined
+  tabBarAnchor: React.ReactElement | null | undefined
 }) {
   const t = useTheme()
   const {_} = useLingui()
   const {headerHeight} = useShellLayout()
+  const insets = useSafeAreaInsets()
   const headerMinimalShellTransform = useMinimalShellHeaderTransform()
   const {hasSession} = useSession()
   const playHaptic = useHaptics()
@@ -42,6 +44,7 @@ export function HomeHeaderLayoutMobile({
           left: 0,
           right: 0,
         },
+        IS_LIQUID_GLASS && {paddingTop: insets.top},
         headerMinimalShellTransform,
       ]}
       onLayout={e => {

src/view/com/util/MainScrollProvider.tsx

@@ -6,18 +6,21 @@ import {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated'
+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_NATIVE, IS_WEB} from '#/env'
+import {IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
 
 const WEB_HIDE_SHELL_THRESHOLD = 200
 
 export function MainScrollProvider({children}: {children: React.ReactNode}) {
   const {headerHeight} = useShellLayout()
   const {headerMode} = useMinimalShellMode()
+  const {top: topInset} = useSafeAreaInsets()
+  const headerPinnedHeight = IS_LIQUID_GLASS ? topInset : 0
   const startDragOffset = useSharedValue<number | null>(null)
   const startMode = useSharedValue<number | null>(null)
   const didJustRestoreScroll = useSharedValue<boolean>(false)
@@ -126,9 +129,10 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
         // The "mode" value is always between 0 and 1.
         // Figure out how much to move it based on the current dragged distance.
         const dy = offsetY - startDragOffsetValue
+        const hideDistance = headerHeight.get() - headerPinnedHeight
         const dProgress = interpolate(
           dy,
-          [-headerHeight.get(), headerHeight.get()],
+          [-hideDistance, hideDistance],
           [-1, 1],
         )
         const newValue = clamp(startModeValue + dProgress, 0, 1)
@@ -156,6 +160,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
     },
     [
       headerHeight,
+      headerPinnedHeight,
       headerMode,
       setMode,
       startDragOffset,