From b2baf84e244bf1a16b016487bdebe1426b89fec1 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Tue, 12 Mar 2024 14:24:43 +0000
Subject: [PATCH] =?UTF-8?q?=E5=A6=99=E3=81=AA=E6=8C=99=E5=8B=95=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DynamicHeaderScrollView.js | 88 ++++++++++++++-------------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/components/DynamicHeaderScrollView.js b/components/DynamicHeaderScrollView.js
index 106e95a..a381887 100644
--- a/components/DynamicHeaderScrollView.js
+++ b/components/DynamicHeaderScrollView.js
@@ -1,5 +1,5 @@
-import { ScrollView, View, Animated, Platform } from "react-native";
-import React, { useRef } from "react";
+import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
+import React, { useState } from "react";
 
 export const DynamicHeaderScrollView = (props) => {
   const {
@@ -13,43 +13,51 @@ export const DynamicHeaderScrollView = (props) => {
     topStickyContent,
     styles,
   } = props;
-  const scrollOffsetY = useRef(new Animated.Value(0)).current;
 
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
 
-  const animatedHeaderHeight = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
-    outputRange: [Max_Header_Height, 0],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
-    outputRange: [Max_Header_Height, Min_Header_Height],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderVisible = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance - 30, Scroll_Distance],
-    outputRange: [1, 0],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
-    outputRange: [0, 1],
-    extrapolate: "clamp",
-  });
+  const [headerVisible, setHeaderVisible] = useState(false);
+  const shotHeaderStyle = {
+    on: {
+      height: Min_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+    off: {
+      height: Max_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 0,
+    },
+  };
+
+  const longHeaderStyle = {
+    on: {
+      height: Max_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+    off: {
+      height: 0,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+  };
+
   return (
     <View {...containerProps}>
       <View style={{ zIndex: 1 }}>
         <Animated.View
           style={[
             styles.header,
-            {
-              height: animatedHeaderHeight2,
-              backgroundColor: "#0099CC",
-              margin: 0,
-              top: 0,
-              opacity: animatedHeaderVisible2,
-            },
+            headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
           ]}
         >
           {shortHeader}
@@ -57,13 +65,7 @@ export const DynamicHeaderScrollView = (props) => {
         <Animated.View
           style={[
             styles.header,
-            {
-              height: animatedHeaderHeight,
-              backgroundColor: "#0099CC",
-              opacity: animatedHeaderVisible,
-
-              top: 0,
-            },
+            headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
           ]}
         >
           {longHeader}
@@ -77,10 +79,14 @@ export const DynamicHeaderScrollView = (props) => {
         }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
-          { useNativeDriver: false }
-        )}
+        onScroll={(event) => {
+          const scrollY = event.nativeEvent.contentOffset.y;
+          LayoutAnimation.configureNext({
+            duration: 100,
+            update: { type: "easeOut" },
+          });
+          setHeaderVisible(Scroll_Distance < scrollY);
+        }}
       >
         <View
           style={{