49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { TouchableOpacity, View } from "react-native";
|
|
import { Text } from "react-native-paper";
|
|
|
|
interface CustomCheckboxProps {
|
|
checked: boolean;
|
|
onPress: () => void;
|
|
size?: number;
|
|
}
|
|
|
|
export const CustomCheckbox = ({
|
|
checked,
|
|
onPress,
|
|
size = 20,
|
|
}: CustomCheckboxProps) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={1}
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingRight: 8,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
borderWidth: checked ? 0 : 1,
|
|
borderRadius: 2,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: checked ? "#6750a4" : "transparent",
|
|
}}
|
|
>
|
|
{checked && (
|
|
<Text
|
|
style={{ color: "white", fontSize: size * 0.6, lineHeight: size }}
|
|
>
|
|
✓
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|