メニューの路線別リストアップ機能を追加

components/Menu/Carousel/CarouselBox.tsx

@@ -7,6 +7,7 @@ import {
   LayoutAnimation,
   TouchableOpacity,
   Text,
+  ScrollView,
 } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
@@ -19,11 +20,22 @@ export const CarouselBox = ({
   setListIndex,
   listIndex,
   navigate,
-  stationListMode
+  stationListMode,
 }) => {
   const carouselRef = useRef<ICarouselInstance>(null);
   const { height, width } = useWindowDimensions();
   const [dotButton, setDotButton] = useState(false);
+  const carouselBadgeScrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (!carouselBadgeScrollViewRef.current) return;
+    const scrollToIndex = listIndex * (width / listUpStation.length) + 10;
+    console.log("scrollToIndex", scrollToIndex);
+    carouselBadgeScrollViewRef.current.scrollTo({
+      x: scrollToIndex,
+      animated: true,
+    });
+  }, [listIndex, dotButton, width, carouselBadgeScrollViewRef]);
   const oPSign = () => {
     const payload = {
       currentStation: listUpStation[listIndex],
@@ -98,7 +110,9 @@ export const CarouselBox = ({
               }}
             >
               <Text style={{ color: "#0099CC", fontSize: 20 }}>
-                {stationListMode == "position" ? "現在地の近くに駅がありません。" : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
+                {stationListMode == "position"
+                  ? "現在地の近くに駅がありません。"
+                  : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
               </Text>
             </View>
           </TouchableOpacity>
@@ -131,12 +145,23 @@ export const CarouselBox = ({
         onSnapToItem={setListIndex}
         renderItem={RenderItem}
       />
-      <View
-        style={{
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
           flexDirection: "row",
           justifyContent: "center",
           alignContent: "center",
           alignItems: "center",
+          paddingVertical: 2,
+          paddingHorizontal: 10,
+          minWidth: width,
+        }}
+        ref={(scrollViewRef) => {
+          // ScrollViewのrefを保存
+          if (scrollViewRef) {
+            carouselBadgeScrollViewRef.current = scrollViewRef;
+          }
         }}
       >
         {originalStationList &&
@@ -158,7 +183,7 @@ export const CarouselBox = ({
               />
             );
           })}
-      </View>
+      </ScrollView>
     </View>
   );
 };