feat(mobile): improve header layout and animation

- Add smooth centering animation for navigation header title
- Implement blur effect in search and discover headers
- Standardize header action group width
- Remove unnecessary refresh control in search tabs

Author: Innei

apps/mobile/src/components/layouts/header/NavigationHeader.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
+  withSpring,
   withTiming,
 } from "react-native-reanimated"
 import type { DefaultStyle } from "react-native-reanimated/lib/typescript/hook/commonTypes"
@@ -212,6 +213,7 @@ export const NavigationHeader = ({
   const [titleWidth, setTitleWidth] = useState(0)
 
   const titleShouldCenterTransformX = useMemo(() => {
+    if (!titleWidth) return 0
     const halfTitleWidth = titleWidth / 2
     const currentTitleCenterX =
       titlebarPaddingHorizontal + headerLeftWidth + titleMarginHorizontal + halfTitleWidth
@@ -220,6 +222,11 @@ export const NavigationHeader = ({
     const transformX = centerX - currentTitleCenterX
     return transformX
   }, [titleBarWidth, titleWidth, headerLeftWidth])
+  const titleTransformX = useSharedValue(0)
+
+  useEffect(() => {
+    titleTransformX.value = withSpring(titleShouldCenterTransformX)
+  }, [titleShouldCenterTransformX, titleTransformX])
 
   return (
     <Animated.View
@@ -261,19 +268,19 @@ export const NavigationHeader = ({
             <HeaderLeft canGoBack={canBack} />
           </View>
           {/* Center */}
-          <View
+          <Animated.View
             onLayout={useCallback((e: LayoutChangeEvent) => {
               setTitleWidth(e.nativeEvent.layout.width)
             }, [])}
             className="flex-1 items-center justify-center"
             pointerEvents={"box-none"}
             style={{
               marginHorizontal: titleMarginHorizontal,
-              transform: [{ translateX: titleShouldCenterTransformX }],
+              transform: [{ translateX: titleTransformX }],
             }}
           >
             {headerTitle}
-          </View>
+          </Animated.View>
           {/* Right */}
           <View className="min-w-6 flex-row items-center justify-end" pointerEvents={"box-none"}>
             <RightButton canGoBack={canBack} />

apps/mobile/src/modules/discover/search-tabs/__base.tsx

@@ -1,19 +1,11 @@
 import { cn } from "@follow/utils/src/utils"
-import { forwardRef, useCallback, useState } from "react"
-import type { NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps } from "react-native"
-import {
-  RefreshControl,
-  ScrollView,
-  useAnimatedValue,
-  useWindowDimensions,
-  View,
-} from "react-native"
+import { forwardRef } from "react"
+import type { ScrollViewProps } from "react-native"
+import { ScrollView, useWindowDimensions, View } from "react-native"
 import type { FlatListPropsWithLayout } from "react-native-reanimated"
 import ReAnimated, { LinearTransition } from "react-native-reanimated"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
-import { CustomRefreshControl } from "@/src/components/common/RefreshControl"
-
 import { useSearchBarHeight } from "../ctx"
 
 export const BaseSearchPageScrollView = forwardRef<ScrollView, ScrollViewProps>(
@@ -66,38 +58,6 @@ export function BaseSearchPageFlatList<T>({
   const offsetTop = searchBarHeight - insets.top
   const windowWidth = useWindowDimensions().width
 
-  const [currentRefreshing, setCurrentRefreshing] = useState(refreshing)
-  const nextRefreshing = currentRefreshing || refreshing
-
-  const [pullProgress, setPullProgress] = useState(0)
-
-  const scrollY = useAnimatedValue(0)
-
-  const THRESHOLD = 180
-
-  const handleRefresh = async () => {
-    setCurrentRefreshing(true)
-    try {
-      await onRefresh()
-    } finally {
-      setCurrentRefreshing(false)
-    }
-  }
-
-  const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetY = event.nativeEvent.contentOffset.y
-      if (offsetY < 0) {
-        const progress = Math.abs(offsetY) / THRESHOLD
-        setPullProgress(progress)
-      } else {
-        setPullProgress(0)
-      }
-      scrollY.setValue(offsetY)
-    },
-    [scrollY],
-  )
-
   return (
     <>
       <ReAnimated.FlatList
@@ -108,19 +68,6 @@ export function BaseSearchPageFlatList<T>({
         scrollIndicatorInsets={{ bottom: insets.bottom, top: offsetTop }}
         automaticallyAdjustContentInsets
         contentInsetAdjustmentBehavior="always"
-        refreshControl={
-          <View style={{ transform: [{ translateY: offsetTop }] }}>
-            <CustomRefreshControl refreshing={nextRefreshing} pullProgress={pullProgress} />
-            <RefreshControl
-              tintColor="transparent"
-              colors={["transparent"]}
-              className="bg-transparent"
-              refreshing={nextRefreshing}
-              onRefresh={handleRefresh}
-            />
-          </View>
-        }
-        onScroll={handleScroll}
         scrollEventThrottle={16}
         {...props}
       />

apps/mobile/src/modules/discover/search.tsx

@@ -14,6 +14,7 @@ import Animated, {
 } from "react-native-reanimated"
 import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
 
+import { BlurEffect } from "@/src/components/common/BlurEffect"
 import { TabBar } from "@/src/components/ui/tabview/TabBar"
 import { Search2CuteReIcon } from "@/src/icons/search_2_cute_re"
 import { accentColor, useColor } from "@/src/theme/colors"
@@ -38,6 +39,7 @@ export const SearchHeader: FC<{
       className="relative"
       onLayout={onLayout}
     >
+      <BlurEffect />
       <View style={styles.header}>
         <ComposeSearchBar />
       </View>
@@ -56,16 +58,16 @@ const DiscoverHeaderImpl = () => {
   const { animatedX, currentTabAtom, headerHeightAtom } = useContext(DiscoverContext)
   const setCurrentTab = useSetAtom(currentTabAtom)
   const setHeaderHeight = useSetAtom(headerHeightAtom)
-  const bgColor = useColor("systemBackground")
 
   return (
     <View
-      style={{ minHeight: headerHeight, paddingTop: insets.top, backgroundColor: bgColor }}
+      style={{ minHeight: headerHeight, paddingTop: insets.top }}
       className="relative"
       onLayout={(e) => {
         setHeaderHeight(e.nativeEvent.layout.height)
       }}
     >
+      <BlurEffect />
       <View style={[styles.header, styles.discoverHeader]}>
         <PlaceholerSearchBar />
 

apps/mobile/src/modules/screen/TimelineSelectorProvider.tsx

@@ -19,6 +19,7 @@ import { getFeed } from "@/src/store/feed/getter"
 
 import { useEntryListContext, useSelectedFeedTitle } from "./atoms"
 
+const HEADER_ACTIONS_GROUP_WIDTH = 60
 export function TimelineSelectorProvider({ children }: { children: React.ReactNode }) {
   const scrollY = useAnimatedValue(0)
   const viewTitle = useSelectedFeedTitle()
@@ -33,23 +34,44 @@ export function TimelineSelectorProvider({ children }: { children: React.ReactNo
         headerShown
         title={viewTitle}
         headerLeft={useMemo(
-          () => (isTimeline || isSubscriptions ? () => <HomeLeftAction /> : undefined),
+          () =>
+            isTimeline || isSubscriptions
+              ? () => (
+                  <View style={{ width: HEADER_ACTIONS_GROUP_WIDTH }}>
+                    <HomeLeftAction />
+                  </View>
+                )
+              : undefined,
           [isTimeline, isSubscriptions],
         )}
         headerRight={useMemo(() => {
-          const buttonVariant = isFeed ? "secondary" : "primary"
-          if (isTimeline)
-            return () => (
-              <HomeSharedRightAction>
-                <UnreadOnlyActionButton variant={buttonVariant} />
-              </HomeSharedRightAction>
-            )
-          if (isSubscriptions) return () => <HomeSharedRightAction />
-          if (isFeed)
+          const Component = (() => {
+            const buttonVariant = isFeed ? "secondary" : "primary"
+            if (isTimeline)
+              return () => (
+                <HomeSharedRightAction>
+                  <UnreadOnlyActionButton variant={buttonVariant} />
+                </HomeSharedRightAction>
+              )
+            if (isSubscriptions) return () => <HomeSharedRightAction />
+            if (isFeed)
+              return () => (
+                <View className="-mr-2 flex-row gap-2">
+                  <UnreadOnlyActionButton variant={buttonVariant} />
+                  <FeedShareAction params={params} />
+                </View>
+              )
+          })()
+
+          if (Component)
             return () => (
-              <View className="-mr-2 flex-row gap-2">
-                <UnreadOnlyActionButton variant={buttonVariant} />
-                <FeedShareAction params={params} />
+              <View
+                style={{
+                  width: HEADER_ACTIONS_GROUP_WIDTH,
+                }}
+                className="flex-row items-center justify-end"
+              >
+                {Component()}
               </View>
             )
           return