fix(rn-base): fix SafeNavigationScrollView and impl blur effect header

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@follow/mobile",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "private": true,
   "main": "src/main.tsx",
   "scripts": {

apps/mobile/src/components/common/SafeNavigationScrollView.tsx

@@ -1,39 +1,68 @@
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"
 import { useHeaderHeight } from "@react-navigation/elements"
 import { router, Stack, useNavigation } from "expo-router"
-import type { FC } from "react"
+import type { FC, PropsWithChildren } from "react"
+import { createContext, useContext, useEffect, useMemo, useState } from "react"
 import type { ScrollViewProps } from "react-native"
-import { ScrollView, TouchableOpacity, View } from "react-native"
+import {
+  Animated as RNAnimated,
+  StyleSheet,
+  TouchableOpacity,
+  useAnimatedValue,
+  View,
+} from "react-native"
+import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useColor } from "react-native-uikit-colors"
 
 import { MingcuteLeftLineIcon } from "@/src/icons/mingcute_left_line"
 
-import { BlurEffectWithBottomBorder } from "./BlurEffect"
+import { AnimatedScrollView } from "./AnimatedComponents"
+import { ThemedBlurView } from "./ThemedBlurView"
 
-type SafeNavigationScrollViewProps = ScrollViewProps & {
+type SafeNavigationScrollViewProps = Omit<ScrollViewProps, "onScroll"> & {
   withHeaderBlur?: boolean
-}
+  onScroll?: (e: ReanimatedScrollEvent) => void
+
+  // For scroll view content adjustment behavior
+  withTopInset?: boolean
+  withBottomInset?: boolean
+} & PropsWithChildren
+const NavigationContext = createContext<{
+  scrollY: RNAnimated.Value
+} | null>(null)
 
 export const SafeNavigationScrollView: FC<SafeNavigationScrollViewProps> = ({
   children,
 
   withHeaderBlur = true,
+  onScroll,
+
+  withBottomInset = false,
+  withTopInset = false,
+
   ...props
 }) => {
   const insets = useSafeAreaInsets()
   const tabBarHeight = useBottomTabBarHeight()
   const headerHeight = useHeaderHeight()
 
+  const scrollY = useAnimatedValue(0)
+
   return (
-    <>
+    <NavigationContext.Provider value={useMemo(() => ({ scrollY }), [scrollY])}>
       {withHeaderBlur && <NavigationBlurEffectHeader />}
-      <ScrollView contentInsetAdjustmentBehavior="automatic" {...props}>
-        <View style={{ height: headerHeight - insets.top }} />
+      <AnimatedScrollView
+        onScroll={RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+        })}
+        {...props}
+      >
+        <View style={{ height: headerHeight - (withTopInset ? insets.top : 0) }} />
         <View>{children}</View>
-        <View style={{ height: tabBarHeight - insets.bottom }} />
-      </ScrollView>
-    </>
+        <View style={{ height: tabBarHeight - (withBottomInset ? insets.bottom : 0) }} />
+      </AnimatedScrollView>
+    </NavigationContext.Provider>
   )
 }
 
@@ -45,10 +74,35 @@ export const NavigationBlurEffectHeader = (props: NavigationBlurEffectHeaderProp
 
   const canBack = useNavigation().canGoBack()
 
+  const { scrollY } = useContext(NavigationContext)!
+
+  const border = useColor("opaqueSeparator")
+
+  const [opacity, setOpacity] = useState(0)
+
+  useEffect(() => {
+    const id = scrollY.addListener(({ value }) => {
+      setOpacity(Math.min(1, Math.max(0, Math.min(1, value / 10))))
+    })
+
+    return () => {
+      scrollY.removeListener(id)
+    }
+  }, [scrollY])
+
   return (
     <Stack.Screen
       options={{
-        headerBackground: BlurEffectWithBottomBorder,
+        headerBackground: () => (
+          <ThemedBlurView
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              opacity,
+              borderBottomWidth: StyleSheet.hairlineWidth,
+              borderBottomColor: border,
+            }}
+          />
+        ),
         headerTransparent: true,
 
         headerLeft: canBack

apps/mobile/src/components/ui/grouped/GroupedList.tsx

@@ -8,9 +8,19 @@ import { Pressable, StyleSheet, Text, View } from "react-native"
 import { RightCuteReIcon } from "@/src/icons/right_cute_re"
 import { useColor } from "@/src/theme/colors"
 
-export const GroupedInsetListCard: FC<PropsWithChildren> = ({ children }) => {
+export const GroupedInsetListCard: FC<PropsWithChildren & ViewProps> = ({
+  children,
+  className,
+  ...props
+}) => {
   return (
-    <View className="bg-secondary-system-grouped-background mx-4 flex-1 overflow-hidden rounded-[10px]">
+    <View
+      {...props}
+      className={cn(
+        "bg-secondary-system-grouped-background mx-4 flex-1 overflow-hidden rounded-[10px]",
+        className,
+      )}
+    >
       {React.Children.map(children, (child, index) => {
         const isLast = index === React.Children.count(children) - 1
         return (

apps/mobile/src/modules/settings/routes/About.tsx

@@ -1,9 +1,17 @@
 import { Text, View } from "react-native"
 
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/common/SafeNavigationScrollView"
+
 export const AboutScreen = () => {
   return (
-    <View className="flex-1 items-center justify-center">
-      <Text>About</Text>
-    </View>
+    <SafeNavigationScrollView className="bg-system-grouped-background">
+      <NavigationBlurEffectHeader title="About" />
+      <View className="flex-1 items-center justify-center">
+        <Text>About</Text>
+      </View>
+    </SafeNavigationScrollView>
   )
 }

apps/mobile/src/modules/settings/routes/Privacy.tsx

@@ -13,7 +13,7 @@ export const PrivacyScreen = () => {
   return (
     <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader title="Privacy" />
-      <GroupedInsetListCard>
+      <GroupedInsetListCard className="mt-4">
         <GroupedInsetListNavigationLink
           label="Teams"
           onPress={() => {

apps/mobile/src/screens/(stack)/(tabs)/index.tsx

@@ -37,7 +37,7 @@ export default function Index() {
         }}
       />
 
-      <SafeNavigationScrollView>
+      <SafeNavigationScrollView contentInsetAdjustmentBehavior="automatic" withTopInset>
         <View className="flex min-h-96 items-center justify-center bg-zinc-300">
           <Text className="text-center text-2xl text-accent">EntryList Placeholder</Text>
         </View>