perf: improve header blur effect

- Migrate NavigationBlurEffectHeader to use Reanimated's useAnimatedStyle - Optimize header opacity animation with shared value - Enhance ViewSelector ScrollView with horizontal scroll indicator control - Adjust padding in ViewSelector for better layout Signed-off-by: Innei <[email protected]>
RSSNext · Jan 24, 2025 · 527f6ac · 527f6ac
1 parent 2c3f752
commit 527f6ac
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/apps/mobile/src/components/common/SafeNavigationScrollView.tsx b/apps/mobile/src/components/common/SafeNavigationScrollView.tsx
@@ -3,7 +3,7 @@ import { Header, useHeaderHeight } from "@react-navigation/elements"
 import type { NativeStackNavigationOptions } from "@react-navigation/native-stack"
 import { router, Stack, useNavigation } from "expo-router"
 import type { FC, PropsWithChildren } from "react"
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react"
+import { createContext, useContext, useEffect, useMemo, useRef } from "react"
 import type { ScrollViewProps } from "react-native"
 import {
   Animated as RNAnimated,
@@ -12,7 +12,7 @@ import {
   useAnimatedValue,
   View,
 } from "react-native"
-import Animated, { useSharedValue, withTiming } from "react-native-reanimated"
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
 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"
@@ -87,7 +87,7 @@ export const NavigationBlurEffectHeader = ({
 
   const border = useColor("opaqueSeparator")
 
-  const [opacity, setOpacity] = useState(0)
+  const opacityAnimated = useSharedValue(0)
 
   const originalDefaultHeaderHeight = useDefaultHeaderHeight()
   const largeDefaultHeaderHeight = originalDefaultHeaderHeight + headerHideableBottomHeight
@@ -98,7 +98,7 @@ export const NavigationBlurEffectHeader = ({
 
   useEffect(() => {
     const id = scrollY.addListener(({ value }) => {
-      setOpacity(Math.max(0, Math.min(1, (value + blurThreshold) / 10)))
+      opacityAnimated.value = Math.max(0, Math.min(1, (value + blurThreshold) / 10))
       if (headerHideableBottom && value > 0) {
         if (value > lastScrollY.current) {
           largeHeaderHeight.value = withTiming(originalDefaultHeaderHeight)
@@ -119,22 +119,25 @@ export const NavigationBlurEffectHeader = ({
     largeHeaderHeight,
     originalDefaultHeaderHeight,
     largeDefaultHeaderHeight,
+    opacityAnimated,
   ])
 
+  const style = useAnimatedStyle(() => ({
+    opacity: opacityAnimated.value,
+    ...StyleSheet.absoluteFillObject,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: border,
+  }))
+
   const hideableBottom = headerHideableBottom?.()
 
   return (
     <Stack.Screen
       options={{
         headerBackground: () => (
-          <ThemedBlurView
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              opacity,
-              borderBottomWidth: StyleSheet.hairlineWidth,
-              borderBottomColor: border,
-            }}
-          />
+          <Animated.View style={style}>
+            <ThemedBlurView className="flex-1" />
+          </Animated.View>
         ),
         headerTransparent: true,
 

diff --git a/apps/mobile/src/modules/feed-drawer/view-selector.tsx b/apps/mobile/src/modules/feed-drawer/view-selector.tsx
@@ -15,8 +15,12 @@ export function ViewSelector() {
   const lists = useAllListSubscription()
 
   return (
-    <View className="flex items-center justify-between px-3 py-2">
-      <ScrollView horizontal contentContainerClassName="flex-row gap-3 items-center">
+    <View className="flex items-center justify-between py-2">
+      <ScrollView
+        horizontal
+        contentContainerClassName="flex-row gap-3 items-center px-3"
+        showsHorizontalScrollIndicator={false}
+      >
         {views.map((view) => (
           <ViewItem key={view.name} view={view} />
         ))}