TraInfoEXのボタンを移動

components/ActionSheetComponents/JRSTraInfo.js

@@ -10,6 +10,7 @@ import {
   BackHandler,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import dayjs from "dayjs";
 import ActionSheet, {
   SheetManager,
   useScrollHandlers,
@@ -19,9 +20,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ViewShot from "react-native-view-shot";
 import * as Sharing from "expo-sharing";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
+import { BottomButtons } from "./JRSTraInfo/BottomButtons";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
     useTrainDelayData();
+  const timeData = dayjs(getTime).format("HH:mm");
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   const insets = useSafeAreaInsets();
@@ -46,11 +49,7 @@ export const JRSTraInfo = () => {
       ref={actionSheetRef}
       isModal={Platform.OS == "ios"}
       containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
+        Platform.OS == "android" ? { paddingBottom: insets.bottom } : {}
       }
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
@@ -90,15 +89,8 @@ export const JRSTraInfo = () => {
               列車遅延速報EX
             </Text>
             <View style={{ flex: 1 }} />
-            {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                    </TouchableOpacity> */}
             <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              {getTime
-                ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                  ":" +
-                  getTime.toLocaleTimeString("ja-JP").split(":")[1]
-                : NaN}{" "}
+              {timeData}
             </Text>
             <Ionicons
               name="reload"
@@ -156,57 +148,7 @@ export const JRSTraInfo = () => {
             </View>
           </ScrollView>
         </ViewShot>
-        <View
-          style={{
-            padding: 10,
-            backgroundColor: "#0099CC",
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <TouchableOpacity
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "white",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-              backgroundColor: "#0099CC",
-              flex: 1,
-            }}
-            onPress={() =>
-              Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")
-            }
-          >
-            <MaterialCommunityIcons name="mastodon" color="white" size={30} />
-            <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              MastodonBOT
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "white",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-              backgroundColor: "#0099CC",
-            }}
-            onPress={onCapture}
-          >
-            <MaterialCommunityIcons
-              name="share-variant"
-              color="white"
-              size={30}
-            />
-          </TouchableOpacity>
-        </View>
+        <BottomButtons onCapture={onCapture} />
       </View>
     </ActionSheet>
   );

components/ActionSheetComponents/JRSTraInfo/BottomButtons.tsx

@@ -0,0 +1,49 @@
+import React, { CSSProperties, FC } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Linking,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+const styles: StyleProp<ViewStyle> = {
+  padding: 10,
+  flexDirection: "row",
+  borderColor: "white",
+  borderWidth: 1,
+  margin: 10,
+  borderRadius: 5,
+  alignItems: "center",
+  backgroundColor: "#0099CC",
+};
+export const BottomButtons: FC<{ onCapture: () => void }> = ({ onCapture }) => {
+  return (
+    <View
+      style={{
+        padding: 10,
+        backgroundColor: "#0099CC",
+        flexDirection: "row",
+        justifyContent: "space-between",
+      }}
+    >
+      <TouchableOpacity
+        style={{ ...styles, flex: 1 }}
+        onPress={() => Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")}
+      >
+        <MaterialCommunityIcons name="mastodon" color="white" size={30} />
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          MastodonBOT
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles} onPress={onCapture}>
+        <MaterialCommunityIcons name="share-variant" color="white" size={30} />
+      </TouchableOpacity>
+    </View>
+  );
+};