jrshikoku/components/ActionSheetComponents/TrainIconUpdate.tsx

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";
import { STORAGE_KEYS } from "@/constants";
import { useThemeColors } from "@/lib/theme";
export const TrainIconUpdate = () => {
  const [iconList] = useState(icons());
  const [currentIcon] = useState(getAppIconName());
  const actionSheetRef = useRef(null);
  const insets = useSafeAreaInsets();
  const viewShot = useRef(null);
  const { colors, fixed } = useThemeColors();

  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(STORAGE_KEYS.ICON_SETTING, "false");
      }}
      ref={actionSheetRef}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android"
          ? {
              paddingBottom: insets.bottom,
            }
          : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <Handler />
      <View
        style={{
          backgroundColor: fixed.primary,
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: colors.borderLight,
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
          <View
            style={{
              padding: 10,
              flexDirection: "row",
              alignItems: "center",
              backgroundColor: fixed.primary,
            }}
          >
            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
              アイコンを変更しました！
            </Text>
            <View style={{ flex: 1 }} />
          </View>
          {currentIcon ? (
            <View
              style={{
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: colors.surface,
                padding: 10,
              }}
            >
              <Image
                source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
                style={{
                  width: 50,
                  height: 50,
                  padding: 30,
                  borderWidth: 1,
                  borderRadius: 10,
                  borderColor: colors.border,
                  margin: 10,
                  backgroundColor: colors.surface,
                }}
              />
              <Text>JR四国非公式アプリ</Text>
            </View>
          ) : (
            <></>
          )}
          <View
            style={{
              padding: 10,
              flexDirection: "row",
              alignItems: "center",
              backgroundColor: fixed.primary,
            }}
          >
            <Text style={{ fontSize: 15, fontWeight: "bold", color: fixed.textOnPrimary }}>
              JR四国非公式アプリを更新して好きなアイコンに変更してみよう！
            </Text>
          </View>
        </ViewShot>
        <View
          style={{
            padding: 10,
            backgroundColor: fixed.primary,
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <TouchableOpacity
            style={{
              padding: 10,
              flexDirection: "row",
              borderColor: fixed.textOnPrimary,
              borderWidth: 1,
              margin: 10,
              borderRadius: 5,
              alignItems: "center",
              backgroundColor: fixed.primary,
              flex: 1,
            }}
            onPress={onCapture}
          >
            <MaterialCommunityIcons name="share" color={fixed.textOnPrimary} size={30} />
            <View style={{ flex: 1 }} />
            <Text style={{ fontSize: 25, fontWeight: "bold", color: fixed.textOnPrimary }}>
              推しアイコンをシェア
            </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 <></>;
};