EachTrainInfoをコンポーネントファイル分割

components/ActionSheetComponents/EachTrainInfo/StateBox.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const StateBox = ({ text, title, style }) => (
+  <View style={{ ...boxStyle, ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
+      {text?.match("～") ? (
+        <>
+          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
+          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
+        </>
+      ) : (
+        <Text style={boxTextStyle}>{text}</Text>
+      )}
+    </View>
+  </View>
+);
+const boxStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxTextStyle = {
+  fontSize: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};