I'm developing a Checkbox
component, because the native one doesn't work because of Expo, so I decided to create a custom one, but I'm new to react native and I'm not able to change the state of my component after the click, what I need is that after the click, the box is unchecked, and if I click again, the box is checked
again, but this only happens when the checked
property
is true
. How do I change from true to false after the click?
Index.tsx
export interface Properties { newColor?: Boolean; id?: String; checked?: Boolean; onChange?: () => void; label?: String;}const Checkbox: React.FC<Properties> = (props: Properties) => { const config: Config = { types: [ { title: "", isDefault: true, },"", ], modifiers: ["inverse"], states: ["disable"], }; return (<><View><TouchableOpacity {...props} onPress={() => handleClick()} style={styles.container}><View style={styles.checkboxUnchecked}> {props.checked === true ? (<View style={styles.checkboxChecked}><Icon name={"check"} /></View> ) : (<View style={styles.checkboxUnchecked}></View> )}</View> {<Text> {props.label}</Text> }</TouchableOpacity></View></> );};
To use the component I call it this
<Checkbox checked={false} label={"Label"} id={"i3"}/>
but the result i have is:
but if I call the component this way I get another result
<Checkbox checked={true} label={"Label"} id={"i3"}/>