StateBoxとDataFromButtonをtsx化

components/ActionSheetComponents/EachTrainInfo/DataFromButton.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Linking } from "react-native";
-export const DataFromButton = ({ i }) => {
+export const DataFromButton: FC<{ i: string }> = ({ i }) => {
   const [station, se, time] = i.split(",");
   return (
     <TouchableWithoutFeedback

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -1,17 +1,17 @@
-import React from "react";
+import React, { CSSProperties, FC } from "react";
-import { View, Text } from "react-native";
+import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
 
-export const StateBox = ({ text, title, style, mode }) => (
+type stateBox = {
+  text: string;
+  title: string;
+  style?: ViewStyle;
+  mode?: number;
+};
+export const StateBox: FC<stateBox> = ({ text, title, style, mode }) => (
   <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
     <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View
+    <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-      style={{
-        color: "#0099CC",
-        textAlign: "right",
-        flexDirection: mode == 2 ? "row" : "column",
-      }}
-    >
       {text?.match("～") ? (
         <>
           <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
@@ -30,27 +30,27 @@ export const StateBox = ({ text, title, style, mode }) => (
     </View>
   </View>
 );
-const boxStyle = {
+const boxStyle: ViewStyle = {
   flex: 1,
   backgroundColor: "white",
   borderRadius: 10,
   padding: 10,
   margin: 10,
 };
-const boxStyle2 = {
+const boxStyle2: ViewStyle = {
   flex: 1,
   backgroundColor: "white",
   borderRadius: 10,
   padding: 5,
   margin: 5,
 };
-const boxTextStyle2 = {
+const boxTextStyle2: TextStyle = {
   fontSize: 18,
   color: "#0099CC",
   textAlign: "right",
 };
 
-const boxTextStyle = {
+const boxTextStyle: TextStyle = {
   fontSize: 25,
   color: "#0099CC",
   textAlign: "right",