Carouselと切り替えボタンを変更

components/Menu/Carousel/CarouselBox.tsx

@@ -0,0 +1,125 @@
+import Sign from "@/components/駅名表/Sign";
+import React, { useEffect, useState } from "react";
+import { AS } from "@/storageControl";
+import { useWindowDimensions, View, LayoutAnimation } from "react-native";
+import Carousel 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,
+  navigate,
+}) => {
+  const { height, width } = useWindowDimensions();
+  const [dotButton, setDotButton] = useState(false);
+  const oPSign = () => {
+    const payload = {
+      currentStation: allStationData[selectedCurrentStation],
+      navigate,
+      goTo: "menu",
+      //@ts-ignore
+      useShow: () => SheetManager.show("StationDetailView", { payload }),
+      onExit: () => SheetManager.hide("StationDetailView"),
+    };
+    //@ts-ignore
+    SheetManager.show("StationDetailView", { payload });
+  };
+  const oLPSign = () => {
+    LayoutAnimation.configureNext({
+      duration: 600,
+      update: { type: "spring", springDamping: 0.5 },
+    });
+    AS.setItem(
+      "CarouselSettings/activeDotSettings",
+      !dotButton ? "true" : "false"
+    );
+    setDotButton(!dotButton);
+  };
+
+  useEffect(() => {
+    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
+      setDotButton(data === "true");
+    });
+  }, []);
+  return (
+    <View style={{ flex: 1, paddingTop: 10 }}>
+      <Carousel
+        ref={carouselRef}
+        data={allStationData}
+        height={(((width / 100) * 80) / 20) * 9 + 10}
+        pagingEnabled={true}
+        snapEnabled={true}
+        loop={false}
+        width={width}
+        style={{ width: width, alignContent: "center" }}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 1,
+          parallaxScrollingOffset: 100,
+          parallaxAdjacentItemScale: 0.8,
+        }}
+        onSnapToItem={setSelectedCurrentStation}
+        renderItem={({ item, index }) => {
+          return (
+            <View
+              style={{
+                backgroundColor: "#0000",
+                width,
+                flexDirection: "row",
+                marginLeft: 0,
+                marginRight: 0,
+              }}
+              key={item[0].StationNumber}
+            >
+              <View style={{ flex: 1 }} />
+              <Sign
+                currentStation={item}
+                isCurrentStation={item == currentStation}
+                oP={oPSign}
+                oLP={oLPSign}
+              />
+              <View style={{ flex: 1 }} />
+            </View>
+          );
+        }}
+      />
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {originalStationList &&
+          allStationData.map((d, index) => {
+            const active = index == selectedCurrentStation;
+            const numberIndex = d[0].StationNumber;
+            if (dotButton) {
+              return (
+                <StationNumber
+                  onPress={() => setSelectedCurrentStation(index)}
+                  currentStation={d}
+                  active={active}
+                  key={numberIndex}
+                />
+              );
+            } else {
+              return (
+                <SimpleDot
+                  onPress={() => setSelectedCurrentStation(index)}
+                  active={active}
+                  key={numberIndex}
+                />
+              );
+            }
+          })}
+      </View>
+    </View>
+  );
+};

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -0,0 +1,80 @@
+import React, { useRef } from "react";
+import { View, TouchableOpacity, Text } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
+  return (
+    <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          backgroundColor: "#0099CC",
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderRadius: 30,
+        }}
+        disabled={!locationStatus}
+        onPress={() => {
+          if (!position) return;
+          const { latitude, longitude } = position.coords;
+          mapsRef.current.animateToRegion(
+            {
+              latitude,
+              longitude,
+              latitudeDelta: 0.05,
+              longitudeDelta: 0.05,
+            },
+            1000
+          );
+        }}
+      >
+        <Ionicons
+          name="locate-outline"
+          size={14}
+          color="white"
+          style={{ margin: 5 }}
+        />
+        <Text
+          style={{
+            color: "white",
+            fontSize: 14,
+            fontWeight: "bold",
+            flex: 1,
+            textAlign: "center",
+          }}
+        >
+          現在地基準
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          backgroundColor: "#0099CC",
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderRadius: 30,
+        }}
+        onPress={() => {
+          // お気に入りリスト更新
+        }}
+      >
+        <Ionicons name="star" size={14} color="white" style={{ margin: 5 }} />
+        <Text
+          style={{
+            color: "white",
+            fontSize: 14,
+            fontWeight: "bold",
+            flex: 1,
+            textAlign: "center",
+          }}
+        >
+          お気に入りリスト
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};