A customizable animated checkbox component for React Native

Table of Contents

Table of Contents

About

Install

Usage

Props

Contribute

License

About

A customizable animated checkbox component for React Native. No extra library required.

Install

$ npm install --save react-native-checkbox-animated

$ yarn add react-native-checkbox-animated

Usage

// ... 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.

Props

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	-

Contribute

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.

License

Licensed under the MIT License.