React Native BEMCheckbox

React Native bridge for awesome BEMCheckBox

iOS Only

Content

• Installation
• Usage example
  • Basic usage
• Component properties
• Changelog
• License

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.