画像共有機能を追加

components/ActionSheetComponents/JRSTraInfo.js

@@ -12,6 +12,8 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
@@ -19,6 +21,20 @@ export const JRSTraInfo = () => {
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   const insets = useSafeAreaInsets();
+  const viewShot = useRef(null);
+
+  const onCapture = async () => {
+    const url = await viewShot.current.capture();
+
+    const ok = await Sharing.isAvailableAsync();
+    if (ok) {
+      await Sharing.shareAsync(
+        "file://" + url,
+        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
+      );
+    }
+  };
+
   return (
     <ActionSheet
       gestureEnabled
@@ -42,87 +58,107 @@ export const JRSTraInfo = () => {
           borderWidth: 1,
         }}
       >
-        <View style={{ height: 26, width: "100%" }}>
+        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
           <View
-            style={{
-              height: 6,
-              width: 45,
-              borderRadius: 100,
-              backgroundColor: "#f0f0f0",
-              marginVertical: 10,
-              alignSelf: "center",
-            }}
-          />
-        </View>
-        <View
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-        >
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            列車遅延速報EX
-          </Text>
-          <View style={{ flex: 1 }} />
-          {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                    </TouchableOpacity> */}
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            {getTime
-              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                ":" +
-                getTime.toLocaleTimeString("ja-JP").split(":")[1]
-              : NaN}{" "}
-          </Text>
-          <Ionicons
-            name="reload"
-            color="white"
-            size={30}
-            style={{ margin: 5 }}
-            onPress={() => {
-              LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
-            }}
-          />
-        </View>
-        <ScrollView {...scrollHandlers}>
+            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,
-              backgroundColor: "white",
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "#0099CC",
             }}
           >
-            {loadingDelayData ? (
-              <View style={{ alignItems: "center" }}>
-                <LottieView
-                  autoPlay
-                  loop
-                  style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                  source={require("../../assets/51690-loading-diamonds.json")}
-                />
-              </View>
-            ) : delayData ? (
-              delayData.map((d) => {
-                let data = d.split(" ");
-                return (
-                  <View style={{ flexDirection: "row" }} key={data[1]}>
-                    <Text style={{ flex: 15, fontSize: 20 }}>
-                      {data[0].replace("\n", "")}
-                    </Text>
-                    <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
-                    <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
-                  </View>
-                );
-              })
-            ) : (
-              <Text>現在、5分以上の遅れはありません。</Text>
-            )}
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              列車遅延速報EX
+            </Text>
+            <View style={{ flex: 1 }} />
+            {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
+                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
+                    </TouchableOpacity> */}
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              {getTime
+                ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
+                  ":" +
+                  getTime.toLocaleTimeString("ja-JP").split(":")[1]
+                : NaN}{" "}
+            </Text>
+            <Ionicons
+              name="reload"
+              color="white"
+              size={30}
+              style={{ margin: 5 }}
+              onPress={() => {
+                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
+              }}
+            />
           </View>
+          <ScrollView {...scrollHandlers}>
+            <View
+              style={{
+                padding: 10,
+                backgroundColor: "white",
+              }}
+            >
+              {loadingDelayData ? (
+                <View style={{ alignItems: "center" }}>
+                  <LottieView
+                    autoPlay
+                    loop
+                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                    source={require("../../assets/51690-loading-diamonds.json")}
+                  />
+                </View>
+              ) : delayData ? (
+                delayData.map((d) => {
+                  let data = d.split(" ");
+                  return (
+                    <View style={{ flexDirection: "row" }} key={data[1]}>
+                      <Text style={{ flex: 15, fontSize: 20 }}>
+                        {data[0].replace("\n", "")}
+                      </Text>
+                      <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
+                      <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
+                    </View>
+                  );
+                })
+              ) : (
+                <Text>現在、5分以上の遅れはありません。</Text>
+              )}
+            </View>
 
-          <View style={{ padding: 10 }}>
-            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-              列車遅延情報EXについて
-            </Text>
-            <Text style={{ color: "white" }}>
-              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
-            </Text>
-          </View>
+            <View style={{ padding: 10, backgroundColor: "#0099CC" }}>
+              <Text
+                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
+              >
+                列車遅延情報EXについて
+              </Text>
+              <Text style={{ color: "white" }}>
+                列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+              </Text>
+            </View>
+          </ScrollView>
+        </ViewShot>
+        <View
+          style={{
+            padding: 10,
+            backgroundColor: "#0099CC",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
           <TouchableOpacity
             style={{
               padding: 10,
@@ -132,6 +168,8 @@ export const JRSTraInfo = () => {
               margin: 10,
               borderRadius: 5,
               alignItems: "center",
+              backgroundColor: "#0099CC",
+              flex: 1,
             }}
             onPress={() =>
               Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")
@@ -140,14 +178,30 @@ export const JRSTraInfo = () => {
             <MaterialCommunityIcons name="mastodon" color="white" size={30} />
             <View style={{ flex: 1 }} />
             <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              MastodonBOTはこちら！
+              MastodonBOT
             </Text>
             <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              →
-            </Text>
           </TouchableOpacity>
-        </ScrollView>
+          <TouchableOpacity
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "white",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+              backgroundColor: "#0099CC",
+            }}
+            onPress={onCapture}
+          >
+            <MaterialCommunityIcons
+              name="share-variant"
+              color="white"
+              size={30}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
     </ActionSheet>
   );