横スクロールのサイズ変更をピンチでできるようにした

components/StationDiagram/ExGridViewItem.tsx

@@ -2,7 +2,7 @@ import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
 import { getStringConfig, typeID } from "@/lib/getStringConfig";
 import { getTrainType } from "@/lib/getTrainType";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
-import { FC, useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import {
   View,
   Text,
@@ -15,6 +15,8 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { lineList } from "@/lib/getStationList";
 import { useStationList } from "@/stateBox/useStationList";
+import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 
 export const ExGridViewItem: FC<{
   d: {
@@ -25,7 +27,8 @@ export const ExGridViewItem: FC<{
     time: string;
   };
   index: number;
-}> = ({ d, index }) => {
+  width: SharedValue<number>;
+}> = ({ d, index, width }) => {
   const { allCustomTrainData } = useAllTrainDiagram();
   const { navigate, goBack } = useNavigation();
   const [trainData, setTrainData] = useState<{
@@ -53,7 +56,6 @@ export const ExGridViewItem: FC<{
       });
     }
   }, []);
-  const { width } = useWindowDimensions();
   const { color, name, data } = getTrainType(trainData?.type, true);
   const { originalStationList } = useStationList();
   // 列車名、種別、フォントの取得
@@ -173,48 +175,58 @@ export const ExGridViewItem: FC<{
   // if(typeString == "回送"){
   //   return<></>;
   // }
+  const animatedStyle = useAnimatedStyle(() => {
+    const leftPosition =
+      ((((width.value - 50) / 100) * parseInt(formattedTime)) / 60) * 100;
+    return {
+      left: leftPosition,
+    };
+  }, [formattedTime]);
   return (
     <View style={{ left: 0, height: 50 }}>
-      <TouchableOpacity
-        style={{
-          flexDirection: "column",
-          borderTopWidth: 1,
-          borderBottomWidth: 0.5,
-          borderStyle: "solid",
-          borderColor: "darkgray",
-          opacity: d.type.includes("通") ? 0.5 : 1,
-          position: "absolute",
-          left: ((((width-50) / 100) * parseInt(formattedTime)) / 60) * 100,
-          height: "100%",
-        }}
-        onPress={() => openTrainInfo()}
+      <Animated.View
+        style={[
+          {
+            flexDirection: "column",
+            borderTopWidth: 1,
+            borderBottomWidth: 0.5,
+            borderStyle: "solid",
+            borderColor: "darkgray",
+            opacity: d.type.includes("通") ? 0.5 : 1,
+            position: "absolute",
+            height: "100%",
+          },
+          animatedStyle,
+        ]}
       >
-        <View style={{ position: "relative" }}>
-          <Text style={{ fontSize: 20, color: color }}>{formattedTime}</Text>
-          <Text
-            style={{
-              fontSize: 10,
-              position: "absolute",
-              bottom: -3,
-              right: 0,
-              fontWeight: "bold",
-            }}
-          >
-            {d.type}
-          </Text>
-        </View>
-        <View style={{ flex: 1, flexDirection: "column" }}>
-          <Text
-            style={{
-              fontSize: 10,
-              flex: 1,
-              fontWeight: "bold",
-            }}
-          >
-            {trainName}
-          </Text>
-        </View>
-      </TouchableOpacity>
+        <TouchableOpacity style={{ flex: 1 }} onPress={() => openTrainInfo()}>
+          <View style={{ position: "relative" }}>
+            <Text style={{ fontSize: 20, color: color }}>{formattedTime}</Text>
+            <Text
+              style={{
+                fontSize: 10,
+                position: "absolute",
+                bottom: -3,
+                right: 0,
+                fontWeight: "bold",
+              }}
+            >
+              {d.type}
+            </Text>
+          </View>
+          <View style={{ flex: 1, flexDirection: "column" }}>
+            <Text
+              style={{
+                fontSize: 10,
+                flex: 1,
+                fontWeight: "bold",
+              }}
+            >
+              {trainName}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
     </View>
   );
 };