アイコン更新画面を作成

components/ActionSheetComponents/TrainIconUpdate.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Platform,
+  Image,
+  BackHandler,
+} from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
+import icons from "../../assets/icons/icons";
+
+import { getAppIconName } from "expo-alternate-app-icons";
+import { AS } from "@/storageControl";
+export const TrainIconUpdate = () => {
+  const [iconList] = useState(icons());
+  const [currentIcon] = useState(getAppIconName());
+  const actionSheetRef = useRef(null);
+  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
+      CustomHeaderComponent={<></>}
+      onClose={() => {
+        AS.setItem("isSetIcon", "false");
+      }}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <Handler />
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
+          <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",
+              backgroundColor: "#0099CC",
+            }}
+          >
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              アイコンを変更しました！
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+          {currentIcon ? (
+            <View
+              style={{
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#FFFFFFEE",
+                padding: 10,
+              }}
+            >
+              <Image
+                source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
+                style={{
+                  width: 50,
+                  height: 50,
+                  padding: 30,
+                  borderWidth: 1,
+                  borderRadius: 10,
+                  borderColor: "white",
+                  margin: 10,
+                  backgroundColor: "white",
+                }}
+              />
+              <Text>JR四国非公式アプリ</Text>
+            </View>
+          ) : (
+            <></>
+          )}
+          <Text
+            style={{
+              fontSize: 15,
+              fontWeight: "bold",
+              color: "white",
+              backgroundColor: "#0099CC",
+            }}
+          >
+            JR四国非公式アプリを更新して好きなアイコンに変更してみよう！
+          </Text>
+        </ViewShot>
+        <View
+          style={{
+            padding: 10,
+            backgroundColor: "#0099CC",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "white",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+              backgroundColor: "#0099CC",
+              flex: 1,
+            }}
+            onPress={onCapture}
+          >
+            <MaterialCommunityIcons name="share" color="white" size={30} />
+            <View style={{ flex: 1 }} />
+            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+              推しアイコンをシェア
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ActionSheet>
+  );
+};
+const Handler = () => {
+  useEffect(() => {
+    const backAction = () => {
+      SheetManager.hide("JRSTraInfo");
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+    return () => backHandler.remove();
+  }, []);
+  return <></>;
+};