ファイルの分離

components/AllTrainDiagramView.js

@@ -15,6 +15,7 @@ import { customTrainDataDetector } from "./custom-train-data";
 import { getTrainType } from "../lib/getTrainType";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 export default function AllTrainDiagramView() {
   const { navigate } = useNavigation();
   const { keyList } = useAllTrainDiagram();
@@ -91,27 +92,14 @@ export default function AllTrainDiagramView() {
           />
         </View>
       </KeyboardAvoidingView>
-
-      <TouchableOpacity
+      <BigButton
+        onPress={() => navigate("menu")}
+        string="閉じる"
         style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
           display:
             Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
         }}
-        onPress={() => navigate("menu")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+      />
     </View>
   );
 }