react-native-rounded-checkbox

Rounded Checkbox with animated and fully customizable options library for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeRoundedCheckbox from 'https://cdn.skypack.dev/react-native-rounded-checkbox';
</script>

README

React Native Rounded Checkbox

Battle Tested ✅

React Native Rounded Checkbox

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Rounded Checkbox React Native Rounded Checkbox

Installation

Add the dependency:

npm i react-native-rounded-checkbox

Peer Dependencies

IMPORTANT! You need install them

"@freakycoder/react-native-bounceable": ">= 0.1.1"

Usage

Import

import RoundedCheckbox from "react-native-rounded-checkbox";

Fundamental Usage

<RoundedCheckbox onPress={(checked) => console.log("Checked: ", checked)} />

Configuration - Props

textStyle?: any;

Property Type Default Description
onPress function undefined set your own onPress functionality
text string "L" change the default text value
component component Text change the default Text component with any component like Icon from react-native-dynamic-vector-icons
isChecked boolean false set the initial checked state
checkedColor color #0bc8a5 change the background color when checked state is true
uncheckedColor color #f0f0f0 change the background color when checked state is false
checkedTextColor color #fdfdfd change the text color when checked state is true
uncheckedTextColor color #5c5969 change the text color when checked state is false
outerBorderColor color #eeeeee change the outer border color
outerSize number 50 change the whole outer size
innerSize number 40 change the whole inner size
textStyle style default set your own text style instead of default one

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Credits

Heavily inspired by William Candillon's Youtube Series

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Rounded Checkbox is available under the MIT license. See the LICENSE file for more info.