1.2.1 • Published 7 years ago
react-native-checkbox-simple v1.2.1
Simple, cross-platform and highly customizable react-native checkbox.
Install with npm
npm i --save react-native-checkbox-simple
Basic Usage
import Checkbox from 'react-native-checkbox-simple';
...
render() {
return (
<Checkbox
label="Agree to terms and conditions"
actionCallback={(val)=>alert(val)}
/>
)
}Props
Various props to the checkbox are available module to adjust it to your needs.
| Prop | Type | Default | Description |
|---|---|---|---|
| containerStyle | Object | {flexDirection: 'row'} | Changes with flexbox positions of checkbox and label relative to each other(see example below). |
| label | string | "" | Represents the label that by default appears to the right of a checkbox. |
| labelStyle | Object | {fontSize: 14} | Represents the label style. |
| actionCallback | Funcion | na | Represents the callback that return either true or false depending on checkbox's state. |
| isChecked | Boolean | false | Represents the state of the checkbox. |
| internalImgPath | string | na | Accepts imported image(.png) from within the project to be used and checkmark when the checkbox is clicked. |
| externalImgUrl | string | na | Note: overwrites internalImgPath. Accepts a url to an external image(.png). |
| imageStyle | Object | {justifyContent: "center", alignItems: "center", marginRight: 10} | Represents the checkmark image style. |
| unselectedStyle | Object | {width: 20, height: 20, borderColor: '#939598', borderWidth: 2, backgroundColor: "#ddd", borderRadius: 3} | Represents the style of the unchecked checkbox. |
| selectedStyle | Object | {backgroundColor: "#fff", borderColor: '#B9E2A6', width: 20, height: 20} | Represents the style of an active checkbox. |
Examples
1. Reverse order of checkbox and label with external image.
<Checkbox
label="Example 1"
actionCallback={(val)=>alert(val)}
containerStyle={{flexDirection: "row-reverse", justifyContent: "flex-start" }}
externalImgUrl="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png"
/>2. Column order of checkbox and label with custom styles for selected state of the checkbox.
<Checkbox
label="Example 1"
actionCallback={(val)=>alert(val)}
containerStyle={{flexDirection: "column", alignItems: "center" }}
selectedStyle={{borderColor: "red"}}
/>To contribute, please, submit a PR.