I am trying to create a custom checkbox component using Native base checkbox which was pretty straight forward to setup, but I am stuck trying to add a select all checkbox. After some testing with the onChange props I found that the event produced when clicking on the checkbox is just a boolean and not an object. So the object from which the props of the checkbox are made off is not being returned. Has anyone used Native base for a similar purpose. I am new to typescript and native base, and would appreciate some guidance.
Example:
const checkList: CheckListType[] = [ { _id: "one", name: "one", checked: false }, { _id: "two", name: "two", checked: false }, { _id: "three", name: "three", checked: false }, { _id: "four", name: "four", checked: false },];const CheckBoxGroupTemplateEx: FC<CheckboxGroupProps> = () => { const [list] = useState(checkList); const [groupValue, setGroupValue] = useState([]); const [selectedBoxes, setSelectedBoxes] = useState<string[]>([]); const handleSelectAllBoxes = () => { ???? }; const handleSelectBox = (event) => { ???? }; return (<Box alignItems="center" justifyContent="center"><Text variant="bodyMd">{groupValue.length}</Text><Checkbox.All value="select all" accessibilityLabel="select all" isChecked={selectedBoxes.length === list.length} onChange={handleSelectAllBoxes} /><Checkbox.Group onChange={(values) => { setGroupValue(values || []); }}> {list.map(({ _id, name, checked }) => (<Checkbox m={2} value={name} id={_id} accessibilityLabel={name} onChange={handleSelectBox} isChecked={checked}> {name}</Checkbox> ))}</Checkbox.Group></Box> );};
checkbox group props:
export type CheckboxGroupProps = Omit< ICheckboxGroupProps,"size" | "colorScheme">;