63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import {
|
|
useWindowDimensions,
|
|
View,
|
|
TouchableOpacity,
|
|
Text,
|
|
Image,
|
|
LayoutAnimation,
|
|
} from "react-native";
|
|
import { useThemeColors } from "@/lib/theme";
|
|
export const SimpleSwitch = ({
|
|
bool,
|
|
setBool,
|
|
color,
|
|
value,
|
|
image = require("../../assets/icons.png"),
|
|
subText = "",
|
|
}) => {
|
|
const { colors } = useThemeColors();
|
|
const { width } = useWindowDimensions();
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<TouchableOpacity
|
|
style={{
|
|
backgroundColor:
|
|
bool === value || String(bool) === String(value) ? color : null,
|
|
padding: 5,
|
|
borderRadius: 5,
|
|
margin: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexDirection: "row",
|
|
flex: 1,
|
|
}}
|
|
onPress={() => {
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
setBool(value);
|
|
}}
|
|
>
|
|
<Image
|
|
source={image}
|
|
style={{
|
|
aspectRatio: 1,
|
|
height: undefined,
|
|
width: "100%",
|
|
borderRadius: 5,
|
|
}}
|
|
resizeMethod="scale"
|
|
/>
|
|
</TouchableOpacity>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
textAlign: "center",
|
|
textAlignVertical: "center",
|
|
color: colors.text,
|
|
}}
|
|
>
|
|
{subText}
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|