TwitterをSocialMenuに移動

components/ActionSheetComponents/SocialMenu.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from "react";
+import { View, Platform, Text } from "react-native";
+import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListItem } from "@rneui/themed";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+import TouchableScale from "react-native-touchable-scale";
+export const Social = () => {
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+          height: "100%",
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+
+          <View
+            style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+          >
+            <MaterialCommunityIcons
+              name="web"
+              style={{ padding: 5 }}
+              color="white"
+              size={30}
+            />
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              JR四国公式SNS一族
+            </Text>
+          </View>
+          <ScrollView
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 10,
+              borderBottomRightRadius: 10,
+              flex:1
+            }}
+          >
+            {[
+              {
+                url: "https://twitter.com/jr_shikoku_info",
+                name: "ＪＲ四国列車運行情報",
+              },
+
+              {
+                url: "https://twitter.com/JRshikoku_eigyo",
+                name: "JR四国営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_tokyo",
+                name: "JR四国 東京営業情報【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_osaka",
+                name: "JR四国 大阪営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/jrs_matsuyama",
+                name: "JR四国 松山駅 【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_kochi",
+                name: "JR四国 高知駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jr_tokust",
+                name: "JR四国 徳島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_uwjm",
+                name: "JR四国 宇和島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_wkama",
+                name: "JR四国 ワープ高松支店【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_wkoch",
+                name: "JR四国 ワープ高知支店【公式】",
+              },
+              {
+                url: "https://twitter.com/Yoakemonogatari",
+                name: "志国土佐　時代の夜明けのものがたり【公式】",
+              },
+              {
+                url: "https://twitter.com/Smile_Eki_Chan",
+                name: "すまいるえきちゃん♡JR四国【公式】",
+              },
+              {
+                url: "https://twitter.com/sper_ponchan",
+                name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
+              },
+            ].map((d) => (
+              <ListItem
+                bottomDivider
+                onPress={() => Linking.openURL(d.url)}
+                key={d.url}
+                friction={90} //
+                tension={100} // These props are passed to the parent component (here TouchableScale)
+                activeScale={0.95} //
+                Component={TouchableScale}
+              >
+                <ListItem.Content>
+                  <ListItem.Title>{d.name}</ListItem.Title>
+                </ListItem.Content>
+                <ListItem.Chevron />
+              </ListItem>
+            ))}
+          </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/sheets.ts

@@ -5,6 +5,7 @@ import { StationDeteilView } from "./StationDeteilView";
 import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
 import { TrainIconUpdate } from "./TrainIconUpdate";
 import { SpecialTrainInfo } from "./SpecialTrainInfo";
+import { Social } from "./SocialMenu";
 
 registerSheet("EachTrainInfo", EachTrainInfo);
 registerSheet("JRSTraInfo", JRSTraInfo);
@@ -12,5 +13,6 @@ registerSheet("StationDetailView", StationDeteilView);
 registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
 registerSheet("TrainIconUpdate", TrainIconUpdate);
 registerSheet("SpecialTrainInfo", SpecialTrainInfo);
+registerSheet("Social", Social);
 
 export {};

components/Menu/FixedContentBottom.js

@@ -185,108 +185,20 @@ export const FixedContentBottom = (props) => {
           <Text style={{ color: "white" }}>(通話料がかかります)</Text>
         </TouchableOpacity>
       </View>
-      <View
+      <TextBox
-        style={{
+        backgroundColor="#0099CC"
-          backgroundColor: "#0099CC",
+        flex={1}
-          borderRadius: 10,
+        onPressButton={() =>
-          margin: 10,
+          SheetManager.show("Social")
-          borderColor: "black",
+        }
-          borderWidth: 2,
-        }}
       >
-        <View
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+          ソーシャルメディア
-        >
+        </Text>
-          <MaterialCommunityIcons
+        <Text style={{ color: "white", fontSize: 18 }}>
-            name="twitter"
+          JR四国のSNS一覧です。
-            style={{ padding: 5 }}
+        </Text>
-            color="white"
+      </TextBox>
-            size={30}
-          />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            JR四国公式Twitter一族
-          </Text>
-        </View>
-        <View
-          style={{
-            padding: 10,
-            backgroundColor: "white",
-            borderBottomLeftRadius: 10,
-            borderBottomRightRadius: 10,
-          }}
-        >
-          {[
-            {
-              url: "https://twitter.com/jr_shikoku_info",
-              name: "ＪＲ四国列車運行情報",
-            },
-
-            {
-              url: "https://twitter.com/JRshikoku_eigyo",
-              name: "JR四国営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_tokyo",
-              name: "JR四国 東京営業情報【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_osaka",
-              name: "JR四国 大阪営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/jrs_matsuyama",
-              name: "JR四国 松山駅 【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_kochi",
-              name: "JR四国 高知駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jr_tokust",
-              name: "JR四国 徳島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_uwjm",
-              name: "JR四国 宇和島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_wkama",
-              name: "JR四国 ワープ高松支店【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_wkoch",
-              name: "JR四国 ワープ高知支店【公式】",
-            },
-            {
-              url: "https://twitter.com/Yoakemonogatari",
-              name: "志国土佐　時代の夜明けのものがたり【公式】",
-            },
-            {
-              url: "https://twitter.com/Smile_Eki_Chan",
-              name: "すまいるえきちゃん♡JR四国【公式】",
-            },
-            {
-              url: "https://twitter.com/sper_ponchan",
-              name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
-            },
-          ].map((d) => (
-            <ListItem
-              bottomDivider
-              onPress={() => Linking.openURL(d.url)}
-              key={d.url}
-              friction={90} //
-              tension={100} // These props are passed to the parent component (here TouchableScale)
-              activeScale={0.95} //
-              Component={TouchableScale}
-            >
-              <ListItem.Content>
-                <ListItem.Title>{d.name}</ListItem.Title>
-              </ListItem.Content>
-              <ListItem.Chevron />
-            </ListItem>
-          ))}
-        </View>
-      </View>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
       <TextBox
         backgroundColor="#8c00d6"