import { Checkbox, CheckboxList } from "ellenox-checkbox";

....

<Checkbox
  itemContainerStyle={{
    justifyContent: "space-between",
    padding: 20,
    marginTop: 50,
  }}
  label={"Checkbox Label"}
  labelStyle={{ fontSize: 20 }}
  isChecked={true}
  onValueChange={()=>console.log("Value changed")}
  checkboxColor={"blue"}
  isLabelOnRight={true}
/>

<CheckboxList
  data={data}
  isLabelOnRight={true}
  onItemPress={()=>console.log("handle item selection")}
/>

Using Checkbox and CheckboxList


import { Checkbox, CheckboxList } from "ellenox-checkbox";
....


const App = () => {
  const [checked, onChange] = useState(false);
  const [data, setData] = useState(Books);

  const onCheckMarkPress = () => {
    onChange(!checked);
  };

  const onItemPress = (item) => {
    const tempData = data.map((listItem) => {
      if (item.id === listItem.id) {
        return {
          ...listItem,
          selected: !listItem.selected,
        };
      }
      return listItem;
    });
    setData(tempData);
  };

  return (
    <View>
      <Checkbox
        itemContainerStyle={{
          justifyContent: "space-between",
          padding: 20,
          marginTop: 50,
        }}
        label={"Checkbox Label"}
        labelStyle={{ fontSize: 20 }}
        isChecked={checked}
        onValueChange={onCheckMarkPress}
        checkboxColor={"blue"}
        isLabelOnRight={true}
      />
      <CheckboxList
        data={data}
        isLabelOnRight={true}
        onItemPress={onItemPress}
      />
    </View>
  );
};

Props

Checkbox Props

Prop	Description	Type	Default Value	Required
label	title of checkbox	String		true
labelStyle	custom style for checkbox	ViewStyle		false
checkboxColor	checkbox color	String		false
isChecked	to store boolean value	Boolean		true
onValueChange	callback on value change	Function	undefined	true
itemContainerStyle	custom style for checkbox container	ViewStyle	undefined	false
disabled	enable or disable checkbox	Boolean	undefined	false
isLabelOnRight	shift the content to right	Boolean		false

CheckboxList Props

Prop	Description	Type	Default Value	Required
labelStyle	custom style for checkbox	ViewStyle		false
checkboxColor	checkbox color	String		false
itemContainerStyle	custom style for checkbox container	ViewStyle	undefined	false
disabled	enable or disable checkbox	Boolean	undefined	false
isLabelOnRight	shift the content to right	Boolean		false
data	array of data	Array		true
onItemPress	callback on item selection	Function		true
containerStyle	custom style for checkbox list	ViewStyle		false

Note

list must contain id, title, selected

List Example

export const Books = [ { id: "1", title: "Beginning Android Programming", author: "J.F DiMarzio", selected: false, ..., },

{ id: "2", title: "ES6 & Beyound", author: "Kyle Simpson", selected: false, ..., },

];

License

This project is licensed under the ISC License.