SpecialTrainInfoをActionSheetに

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { View, Platform } from "react-native";
+import ActionSheet from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
+export const SpecialTrainInfo = ({ payload }) => {
+  const { navigate } = payload;
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <SpecialTrainInfoBox navigate={navigate} />
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/sheets.ts

@@ -4,11 +4,13 @@ import { JRSTraInfo } from "./JRSTraInfo";
 import { StationDeteilView } from "./StationDeteilView";
 import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
 import { TrainIconUpdate } from "./TrainIconUpdate";
+import { SpecialTrainInfo } from "./SpecialTrainInfo";
 
 registerSheet("EachTrainInfo", EachTrainInfo);
 registerSheet("JRSTraInfo", JRSTraInfo);
 registerSheet("StationDetailView", StationDeteilView);
 registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
 registerSheet("TrainIconUpdate", TrainIconUpdate);
+registerSheet("SpecialTrainInfo", SpecialTrainInfo);
 
 export {};

components/Menu/FixedContentBottom.js

@@ -11,6 +11,7 @@ import Icon from "react-native-vector-icons/Entypo";
 import { TextBox } from "../atom/TextBox";
 import { TicketBox } from "../atom/TicketBox";
 import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
+import { SheetManager } from "react-native-actions-sheet";
 
 export const FixedContentBottom = (props) => {
   return (
@@ -51,7 +52,6 @@ export const FixedContentBottom = (props) => {
           旅行ツアー
         </TicketBox>
       </View>
-      <SpecialTrainInfoBox navigate={props.navigate} />
       <TextBox
         backgroundColor="red"
         flex={1}
@@ -86,7 +86,9 @@ export const FixedContentBottom = (props) => {
         backgroundColor="#0099CC"
         flex={1}
         onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
+          SheetManager.show("SpecialTrainInfo", {
+            payload: { navigate: props.navigate },
+          })
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>

components/Menu/SpecialTrainInfoBox.tsx

@@ -1,13 +1,14 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useLayoutEffect, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { getPDFViewURL } from "@/lib/getPdfViewURL";
+import { ScrollView, SheetManager } from "react-native-actions-sheet";
 
 type props = {
   navigate: (screen: string, params?: object) => void;
 };
 export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
   const [specialData, setSpecialData] = useState([]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     fetch("https://n8n.haruk.in/webhook/sptrainfo")
       .then((res) => res.json())
       .then((data) => setSpecialData(data.data))
@@ -17,10 +18,6 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
     <View
       style={{
         backgroundColor: "#0099CC",
-        borderRadius: 10,
-        margin: 5,
-        borderWidth: 1,
-        borderColor: "black",
       }}
     >
       <View style={{ flexDirection: "row", alignItems: "center" }}>
@@ -29,17 +26,16 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
             fontSize: 30,
             fontWeight: "bold",
             color: "white",
-            padding: 10,
+            paddingHorizontal: 10,
+            paddingVertical: 5,
           }}
         >
           臨時列車情報
         </Text>
       </View>
-      <View
+      <ScrollView
         style={{
           backgroundColor: "white",
-          borderBottomLeftRadius: 10,
-          borderBottomRightRadius: 10,
         }}
       >
         {specialData.map((d) => (
@@ -49,6 +45,7 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
                 info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
                 goTo: "menu",
               });
+              SheetManager.hide("SpecialTrainInfo");
             }}
             onLongPress={() => alert(d.description)}
             key={d.address}
@@ -63,7 +60,7 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
             <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
           </TouchableOpacity>
         ))}
-      </View>
+      </ScrollView>
     </View>
   );
 };