レイアウト設定のデザイン調整

components/Settings/LayoutSettings.js

@@ -58,7 +58,7 @@ export const LayoutSettings = ({
             padding: 10,
           }}
         >
-          設定画面
+          レイアウト設定
         </Text>
         <View style={{ flex: 1 }}></View>
       </View>
@@ -90,15 +90,14 @@ export const LayoutSettings = ({
             trueText={"オリジナル\n(駅名標)"}
             falseImage={require("../../assets/configuration/station_default.jpg")}
             trueImage={require("../../assets/configuration/station_original.jpg")}
-          />
+          >
-          {stationMenu == "true" && (
             <SimpleSwitch
               bool={usePDFView}
               setBool={setUsePDFView}
               color="red"
               str="時刻表PDFをアプリの外で表示する"
             />
-          )}
+          </SwitchArea>
           <SwitchArea
             str="列車メニュー"
             bool={trainMenu}
@@ -107,9 +106,7 @@ export const LayoutSettings = ({
             trueText={"オリジナル"}
             falseImage={require("../../assets/configuration/train_default.jpg")}
             trueImage={require("../../assets/configuration/train_original.jpg")}
-          />
+          >
-          {trainMenu == "true" && (
-            <>
             <TripleSwitchArea
               str={"ヘッダーサイズ"}
               bool={headerSize}
@@ -136,8 +133,7 @@ export const LayoutSettings = ({
               color="red"
               str="列車の現在位置をアイコン表示"
             />
-            </>
+          </SwitchArea>
-          )}
         </View>
       </ScrollView>
     </View>
@@ -151,12 +147,12 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
       checkedColor="red"
       onPress={() => setBool(bool == "true" ? "false" : "true")}
       containerStyle={{
-        width: "100%",
+        flex: 1,
-        backgroundColor: "white",
+        backgroundColor: "#00000000",
         borderColor: "white",
         alignContent: "center",
       }}
-      textStyle={{ fontSize: 20 }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
       title={str}
     />
   </View>

components/atom/SimpleSwitch.js

@@ -4,6 +4,7 @@ import {
   TouchableOpacity,
   Text,
   Image,
+  LayoutAnimation,
 } from "react-native";
 export const SimpleSwitch = ({
   bool,
@@ -27,7 +28,10 @@ export const SimpleSwitch = ({
           flexDirection: "row",
           flex: 1,
         }}
-        onPress={() => setBool(value.toString())}
+        onPress={() => {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+          setBool(value.toString());
+        }}
       >
         <Image
           source={image}

components/atom/SwitchArea.js

@@ -8,9 +8,18 @@ export const SwitchArea = ({
   trueImage,
   falseText,
   trueText,
+  children,
 }) => {
   return (
-    <View style={{ flexDirection: "column", padding: 10 }}>
+    <View
+      style={{
+        flexDirection: "column",
+        padding: 10,
+        backgroundColor: "#00000010",
+        borderRadius: 10,
+        margin: 5,
+      }}
+    >
       <Text
         style={{
           fontSize: 25,
@@ -18,6 +27,7 @@ export const SwitchArea = ({
           alignContent: "center",
           textAlign: "center",
           textAlignVertical: "center",
+          fontWeight: "bold",
         }}
       >
         {str}
@@ -40,6 +50,7 @@ export const SwitchArea = ({
           subText={trueText}
         />
       </View>
+      {bool == "true" && children}
     </View>
   );
 };

components/atom/TripleSwitchArea.js

@@ -12,7 +12,7 @@ export const TripleSwitchArea = ({
     <View style={{ flexDirection: "column", padding: 10 }}>
       <Text
         style={{
-          fontSize: 25,
+          fontSize: 20,
           alignItems: "center",
           alignContent: "center",
           textAlign: "center",