A customizable animated checkbox component for React Native
A customizable animated checkbox component for React Native. No extra library required.
$ npm install --save react-native-checkbox-animated$ yarn add react-native-checkbox-animated
// ... Imports
import React, { useState } from "react";
import Checkbox from "react-native-checkbox-animated";
const App = () => {
const [checked, setChecked] = useState(false);
return (
<View>
...
<CheckBox
label="your label here"
onValueChange={val => setChecked(val)}
checked={checked}
/>
...
</View>
);
};Checkout examples.js for the above examples.
| Property | Description | Required | Type | Default Value |
|---|---|---|---|---|
checked |
Current state of the checkBox | true | boolean | false |
onValueChange |
Callback when checkbox is pressed. Return checkbox state | true | function => boolean | - |
size |
Specify the size of the checkBox | false | number | 20 |
label |
Text or React Component that follows the checkbox | false | string / React Component | Your label here |
touchableLabel |
Specify if state of checkbox changes when label is pressed | false | boolean | true |
checkedBackgroundColor |
Specify the color of checkbox's background when it's checked | false | string | #22cdf0 |
unCheckedBackgroundColor |
Specify the color of checkbox's background when it's not checked | false | string | white |
checkedBorderColor |
Specify the color of checkbox's border when it's checked | false | string | grey |
unCheckedBorderColor |
Specify the color of checkbox's border when it's not checked | false | string | transparent |
borderWidth |
Border width of checkbox | false | number | 1 |
rippleEffect |
Specify if label has ripple effect on press when touchableLabel is set to true | false | boolean | true |
rippleColor |
Specify the color of ripple effect when it is set to true | false | string | black |
checkPosition |
Specify the position where the checkbox will be rendered | false | enum('left' | 'right') | left |
checkBoxRadius |
Specify the radius of the checkbox | false | number | 20% of size |
rounded |
Set the shape of the checkbox to be rounded instead of a square | false | boolean | false |
checkMarkSize |
Specify the size of the checkbox | false | number | 15 |
checkMarkColor |
Specify the color of the default checkmark | false | string | black |
animationType |
Specify the custom animation type | false | enum('scale' | 'left' | 'reveal') | scale |
checkStyle |
Text styles props applied to the checkmark character | false | TextStyle | {} |
labelStyle |
Text styles props applied to your label | false | TextStyle | {} |
labelContainerStyle |
View styles props applied to label container | false | ViewStyle | {} |
containerStyle |
View styles props applied to the main container | false | ViewStyle | {} |
checkboxContainerStyle |
View styles props applied to the container that wraps the checkbox | false | ViewStyle | { padding: 10 } |
boxStyle |
View styles props applied to the box that wraps the checkmark. | false | ViewStyle | {} |
customMarker |
Replace the checkmark for your custom checkmark | false | ReactNode | - |
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Note: If editing the README, please conform to the standard-readme specification.
Licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent