Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Creating a custom checkbox using native base checkbox with select all functionality

$
0
0

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">;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>