jrshikoku/components/Settings/LauncherIconSettings.js

import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView, Image } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { CheckBox } from "react-native-elements";
import { AS } from "../../storageControl";
import icons from "../../assets/icons/icons";
import app from "../../app.json";
import { ListItem } from "native-base";
import {
  setAlternateAppIcon,
  resetAppIcon,
  getAppIconName,
  supportsAlternateIcons,
} from "expo-alternate-app-icons";
import { widthPercentageToDP } from "react-native-responsive-screen";

export const LauncherIconSettings = ({ navigate }) => {
  const { goBack } = useNavigation();
  const [iconList, ] = useState(icons());
  const [currentIcon, ] = useState(getAppIconName());
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity
            onPress={goBack}
            style={{
              flexDirection: "column",
              flex: 1,
            }}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "left",
                textAlignVertical: "center",
                color: "white",
                padding: 10,
              }}
            >
              ＜ 設定
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>

        <Text
          style={{
            fontSize: 20,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            padding: 10,
          }}
        >
          アイコン設定
        </Text>
        <View style={{ flex: 1 }}></View>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        {currentIcon ? (
          <>
            <Text
              style={{
                backgroundColor: "#DDDDDD",
              }}
            >
              現在のアイコン:
              {iconList.filter(({ id }) => id == currentIcon)[0].id}
            </Text>

            <View
              style={{
                flexDirection: "cokumn",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#DDDDDD",
                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>
          </>
        ) : (
          <></>
        )}
        <View
          style={{
            flexDirection: "row",
            flexWrap: "wrap",
            alignContent: "center",
            justifyContent: "center",
          }}
        >
          {iconList.map(({ name, icon, id }) => {
            return (
              <TouchableOpacity
                key={id}
                style={{
                  margin: 10,
                  alignItems: "center",
                  justifyContent: "center",
                  width: widthPercentageToDP("30%"),
                  maxWidth: 60,
                  height: 100,

                  borderColor: "#999999",
                  borderWidth: id == currentIcon ? 2 : 0,
                  borderRadius: 10,
                }}
                onPress={() => {
                  setAlternateAppIcon(id)
                    .then((res) => {
                      alert(res);
                    })
                    .catch((err) => {
                      alert(err);
                    });
                }}
              >
                <Image source={icon} style={{ width: 50, height: 50 }} />
                <Text>{id}</Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
};