アイコンの設定更新

components/Settings/LauncherIconSettings.js

@@ -0,0 +1,147 @@
+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>
+  );
+};