react-conf-app/components/ChangeAppIcon.tsx at main · CodeElixir/react-conf-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { Image } from "expo-image";
import { View, StyleSheet, Platform } from "react-native";
import AppIcon from "react-native-dynamic-app-icon";
import { TouchableOpacity } from "react-native-gesture-handler";

import { ThemedText, ThemedView } from "../components/Themed";
import { theme } from "../theme";

const defaultIcon = require("../assets/icon.png");
const desertIcon = require("../assets/icons/icon-desert.png");

export default function ChangeAppIcon() {
  if (Platform.OS === "android") {
    return null;
  }
  return (
    <ThemedView
      darkColor={theme.darkActiveContent}
      lightColor={theme.lightActiveContent}
      style={styles.section}
    >
      <ThemedText
        style={styles.centered}
        marginBottom={theme.space12}
        fontWeight="medium"
        fontSize={18}
      >
        Choose a custom app icon
      </ThemedText>
      <View style={styles.icons}>
        {[defaultIcon, desertIcon].map((icon, index) => (
          <TouchableOpacity
            activeOpacity={0.8}
            key={index}
            onPress={() => {
              AppIcon.setAppIcon(String(index));
            }}
          >
            <Image source={icon} style={styles.icon} />
          </TouchableOpacity>
        ))}
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  icon: {
    width: 80,
    height: 80,
    borderRadius: 10,
    margin: 4,
  },
  icons: {
    flexDirection: "row",
    justifyContent: "center",
    flexWrap: "wrap",
  },
  heading: {
    textAlign: "center",
  },
  centered: {
    textAlign: "center",
  },
  section: {
    padding: theme.space24,
    marginBottom: theme.space24,
  },
});