react-native-bem-check-box

React Native bridge for BEMCheckBox

Usage no npm install needed!

<script type="module">
  import reactNativeBemCheckBox from 'https://cdn.skypack.dev/react-native-bem-check-box';
</script>

README

React Native BEMCheckbox

React Native bridge for awesome BEMCheckBox

iOS Only

Preview

Content

Installation

  1. Install package via npm:
npm install --save react-native-bem-check-box
  1. Link your library by one of those ways: either by using rnpm link (see more about rnpm here) or like it's described here.
  2. Inside your code include JS part by adding
import BEMCheckBox from 'react-native-bem-check-box';
  1. Compile and have fun!

Usage example

You can run built-in example via few simple steps:

  1. Clone repository
  2. Go to Example
  3. Run npm install && open CheckBox.xcodeproj
  4. Hit "Run"(cmd+R) button on XCode panel

Basic usage

import BEMCheckBox from 'react-native-bem-check-box';

<BEMCheckBox
  onValueChange={value => this.setState(value)}
/>

Component properties

Check this section in BEMCheckBox document

  • value (boolean) - The current state. Defaults to false

  • lineWidth (number) - The width of the lines of the check mark and box. Defaults to 2.0

  • hideBox (boolean) - boolean to control if the box should be hidden or not. Setting this property to true will basically turn the checkbox into a check mark. Defaults to false

  • boxType (string) - The type of box to use. Defaults to circle

    • circle
    • square

  • tintColor (string) - The color of the line around the box when it is Off. Defaults to #aaaaaa

  • onCheckColor (string) - The color of the check mark when it is On. Defaults to #007aff

  • onFillColor (string) - The color of the inside of the box when it is On. Defaults to transparent

  • onTintColor (string) - The color of the line around the box when it is On. Defaults to #007aff

  • animationDuration (number) - The duration in seconds of the animations. Defaults to 0.5

  • onAnimationType/offAnimationType (string) - The type of animation to use when the checkbox gets checked/unchecked. Defaults to stroke

    • stroke
    • fill
    • bounce
    • flat
    • one-stroke
    • fade

  • onValueChange (function) - every time the check box gets tapped, after its properties are updated, but before the animations are completed.

  • onAnimationEnd (function) - every time the check box finishes being animated.

Changelog

  • 0.3.2 Animate on value property set
  • 0.3.1 Updated podspec
  • 0.2.0 Added Example
  • 0.1.0 Initial release

License

Copyright 2016 Rifat Nabi
Licensed under the MIT License.