Minimalistic and customizable component for React Native. You can do things like plug in your own check Icon component, toggle the animation and change the style.
yarn add react-native-animated-checkbox
Or, if you prefer using npm:
npm i -S react-native-animated-checkbox
Check the TypeScript type definition file for further info.
Prop | Type | Default | Description |
---|---|---|---|
checked | bool | false | if true, renders the check Icon component |
animated | bool | true | if true, animates to opacity of the Icon as checked 's value changes |
duration | number | 300 | animation duration. Considered only if animated === true |
style | style of the CheckBox parent container View. Check below for the default style definition | ||
color | string | '#F26F6F' | color of the icon, and default color of the parent's borderColor style |
iconName | string | 'check' | name prop of react-native-vector-icons |
iconSize | number | 15 | size prop of react-native-vector-icons |
activeOpacity | number | 0.7 | activeOpacity prop of TouchableOpacity |
onPress | func | null | callback called when the CheckBox gets pressed. |
children | Node | null | optional Icon component if react-native-vector-icons/FontAwesome doesn't suit your needs. |
const defaultStyle = {
backgroundColor: 'transparent',
margin: 2,
padding: 1,
borderRadius: 0,
borderWidth: 2,
borderColor: this.props.color,
};
PRs are obviously welcome!
- lint: verify that the eslint configuration is respected