妙な挙動していたのを修正

components/DynamicHeaderScrollView.js

@@ -1,5 +1,5 @@
-import { ScrollView, View, Animated, Platform } from "react-native";
+import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
-import React, { useRef } from "react";
+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({
+  const [headerVisible, setHeaderVisible] = useState(false);
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+  const shotHeaderStyle = {
-    outputRange: [Max_Header_Height, 0],
+    on: {
-    extrapolate: "clamp",
+      height: Min_Header_Height,
-  });
+      backgroundColor: "#0099CC",
-  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
+      margin: 0,
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+      top: 0,
-    outputRange: [Max_Header_Height, Min_Header_Height],
+      opacity: 1,
-    extrapolate: "clamp",
+    },
-  });
+    off: {
-  const animatedHeaderVisible = scrollOffsetY.interpolate({
+      height: Max_Header_Height,
-    inputRange: [Scroll_Distance - 30, Scroll_Distance],
+      backgroundColor: "#0099CC",
-    outputRange: [1, 0],
+      margin: 0,
-    extrapolate: "clamp",
+      top: 0,
-  });
+      opacity: 0,
-  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
+    },
-    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
+  };
-    outputRange: [0, 1],
+
-    extrapolate: "clamp",
+  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,
-            {
+            headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
-              height: animatedHeaderHeight2,
-              backgroundColor: "#0099CC",
-              margin: 0,
-              top: 0,
-              opacity: animatedHeaderVisible2,
-            },
           ]}
         >
           {shortHeader}
@@ -57,13 +65,7 @@ export const DynamicHeaderScrollView = (props) => {
         <Animated.View
           style={[
             styles.header,
-            {
+            headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
-              height: animatedHeaderHeight,
-              backgroundColor: "#0099CC",
-              opacity: animatedHeaderVisible,
-
-              top: 0,
-            },
           ]}
         >
           {longHeader}
@@ -77,10 +79,14 @@ export const DynamicHeaderScrollView = (props) => {
         }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
-        onScroll={Animated.event(
+        onScroll={(event) => {
-          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+          const scrollY = event.nativeEvent.contentOffset.y;
-          { useNativeDriver: false }
+          LayoutAnimation.configureNext({
-        )}
+            duration: 100,
+            update: { type: "easeOut" },
+          });
+          setHeaderVisible(Scroll_Distance < scrollY);
+        }}
       >
         <View
           style={{