コードの整理とuseCurrentTrainの取得ルートの変更

components/Menu/Carousel/CarouselBox.tsx

@@ -1,25 +1,25 @@
 import Sign from "@/components/駅名表/Sign";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { AS } from "@/storageControl";
 import { useWindowDimensions, View, LayoutAnimation } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
 import { StationNumber } from "../StationPagination";
 import { SimpleDot } from "../SimpleDot";
 export const CarouselBox = ({
   originalStationList,
-  allStationData,
-  currentStation,
-  setSelectedCurrentStation,
-  carouselRef,
-  selectedCurrentStation,
+  listUpStation,
+  nearPositionStation,
+  setListIndex,
+  listIndex,
   navigate,
 }) => {
+  const carouselRef = useRef<ICarouselInstance>(null);
   const { height, width } = useWindowDimensions();
   const [dotButton, setDotButton] = useState(false);
   const oPSign = () => {
     const payload = {
-      currentStation: allStationData[selectedCurrentStation],
+      currentStation: listUpStation[listIndex],
       navigate,
       goTo: "menu",
       //@ts-ignore
@@ -46,6 +46,13 @@ export const CarouselBox = ({
       setDotButton(data === "true");
     });
   }, []);
+  useEffect(() => {
+    if (!carouselRef.current) return;
+    carouselRef?.current.scrollTo({
+      count: listIndex - carouselRef.current.getCurrentIndex(),
+      animated: true,
+    });
+  }, [listIndex]);
   const RenderItem = ({ item, index }) => {
     return (
       <View
@@ -61,7 +68,7 @@ export const CarouselBox = ({
         <View style={{ flex: 1 }} />
         <Sign
           stationID={item[0].StationNumber}
-          isCurrentStation={item == currentStation}
+          isCurrentStation={item == nearPositionStation}
           oP={oPSign}
           oLP={oLPSign}
         />
@@ -73,7 +80,7 @@ export const CarouselBox = ({
     <View style={{ flex: 1, paddingTop: 10 }}>
       <Carousel
         ref={carouselRef}
-        data={allStationData}
+        data={listUpStation}
         height={(((width / 100) * 80) / 20) * 9 + 10}
         pagingEnabled={true}
         snapEnabled={true}
@@ -86,7 +93,7 @@ export const CarouselBox = ({
           parallaxScrollingOffset: 100,
           parallaxAdjacentItemScale: 0.8,
         }}
-        onSnapToItem={setSelectedCurrentStation}
+        onSnapToItem={setListIndex}
         renderItem={RenderItem}
       />
       <View
@@ -98,19 +105,19 @@ export const CarouselBox = ({
         }}
       >
         {originalStationList &&
-          allStationData.map((d, index) => {
-            const active = index == selectedCurrentStation;
+          listUpStation.map((d, index) => {
+            const active = index == listIndex;
             const numberKey = d[0].StationNumber + index;
             return dotButton ? (
               <StationNumber
-                onPress={() => setSelectedCurrentStation(index)}
+                onPress={() => setListIndex(index)}
                 currentStation={d}
                 active={active}
                 key={numberKey}
               />
             ) : (
               <SimpleDot
-                onPress={() => setSelectedCurrentStation(index)}
+                onPress={() => setListIndex(index)}
                 active={active}
                 key={numberKey}
               />