Philip Cesar Garay
107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from "reactn";
|
|
import { Image, Pressable, Text, View } from "react-native";
|
|
import { FlatGrid } from "react-native-super-grid";
|
|
|
|
import { responsiveWidth } from "../actions/responsiveSizes.js";
|
|
|
|
import { Fonts, Palette, Style, gutters } from "../styles";
|
|
import { mainBorderRadius } from "../styles/Style";
|
|
|
|
import useLayoutType from "../hooks/useLayoutType.js";
|
|
|
|
const IconSelector = ({ onClose } = {}) => {
|
|
const { isNative } = useLayoutType();
|
|
|
|
const [currentIconIndex, setCurrentIconIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (isNative) {
|
|
// import("expo-dynamic-app-icon").then((module) => {
|
|
// getAppIcon = module.getAppIcon;
|
|
|
|
// const iconIndex = getAppIcon();
|
|
// setCurrentIconIndex(Number(iconIndex));
|
|
// });
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<FlatGrid
|
|
ListHeaderComponent={
|
|
<View>
|
|
<Text
|
|
style={{
|
|
...Fonts({ type: "title" }),
|
|
textAlign: "center",
|
|
marginBottom: gutters / 2,
|
|
}}
|
|
>
|
|
Nouvelle icône
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...Fonts({ type: "default" }),
|
|
textAlign: "center",
|
|
width: "60%",
|
|
alignSelf: "center",
|
|
marginBottom: gutters,
|
|
}}
|
|
>
|
|
Modifiez l'icône de votre app, pour une expérience plus personnelle.
|
|
</Text>
|
|
</View>
|
|
}
|
|
itemDimension={responsiveWidth(45)}
|
|
data={[
|
|
require(`../../assets/alternateIcons/1.png`),
|
|
require(`../../assets/alternateIcons/2.png`),
|
|
require(`../../assets/alternateIcons/3.png`),
|
|
require(`../../assets/alternateIcons/4.png`),
|
|
]}
|
|
style={{ flex: 1, backgroundColor: Palette.darkPurple }}
|
|
spacing={10}
|
|
renderItem={({ item, index }) => {
|
|
const isSelected = currentIconIndex === index + 1;
|
|
|
|
return (
|
|
<Pressable
|
|
key={index}
|
|
style={{
|
|
width: "100%",
|
|
height: responsiveWidth(45),
|
|
...Style.containerCenter,
|
|
...Style.defaultShadows,
|
|
}}
|
|
onPress={() => {
|
|
// import("expo-dynamic-app-icon").then((module) => {
|
|
// setAppIcon = module.setAppIcon;
|
|
|
|
// setAppIcon((index + 1).toString());
|
|
// setCurrentIconIndex(index + 1);
|
|
// onClose?.();
|
|
// });
|
|
}}
|
|
>
|
|
<Image
|
|
source={item}
|
|
resizeMode="cover"
|
|
style={{
|
|
width: "90%",
|
|
height: "90%",
|
|
borderRadius: mainBorderRadius * 2,
|
|
overflow: "hidden",
|
|
...(isSelected && {
|
|
borderColor: Palette.primary,
|
|
borderWidth: 2,
|
|
}),
|
|
}}
|
|
/>
|
|
</Pressable>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default IconSelector;
|