react-native-checkbox-heaven

ReactNative Checkbox components which contains 17 design type.Built in with the help of react-native-vector-icons. Currently supports icon sets:

• fa prefix for FontAwesome by Dave Gandy
• ios prefix for Ionicons by Ben Sperry
• mat prefix for MaterialCommunityIcons by MaterialDesignIcons.com

I categorized checkboxes to 3 type:

1. Edge (outlined icon for both state)
2. Fill (filled icon for both state)
3. Mix (outlined for unchecked, filled for checked state)

Default checkboxes

Styled checkboxes

Installation guide

1. First react-native-vector-icons must be installed and linked
2. Run: $ npm install react-native-checkbox-heaven --save

Examples

1.Import component

import CheckBox from 'react-native-checkbox-heaven';

2.Basic use (default icon is iosMix)

 <CheckBox
    onChange={(val) => alert(val)}
    checked={true}
/>

3.Full

 
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
 
import CheckBox from 'react-native-checkbox-heaven'
 
export default class checkboxDemo extends Component {
  state = {
    checked: false
  }
  handleOnChange(val) {
    this.setState({ checked: val })
  }
  render() {
 
    return (
      <View style={styles.container}>
        <CheckBox
          label='demo label'
          labelStyle={styles.labelStyle}
          iconSize={28}
          iconName='matMix'
          checked={this.state.checked}
          checkedColor='#008080'
          uncheckedColor='#8b0000'
          onChange={this.handleOnChange.bind(this)}
          disabled={true}
          disabledColor='red'
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  labelStyle: {
    marginLeft: 4,
    fontSize: 16,
    fontWeight: 'bold',
    color: '#2f4f4f'
  }
});
 
AppRegistry.registerComponent('checkboxDemo', () => checkboxDemo);
 

API

Property	Type	Default Value	Description
style	object	{}	Style for TouchableOpacity
checked	bool	false	Checbox state
onChange	func		Handler function for button press. Required
labelPosition	string	'right'	Position for label ('right' or 'left')
labelStyle	object	{fontSize:16,marginLeft:3}	Style for Text
iconName	string	'iosMix'	Icon name
iconStyle	object	{}	Custom style for Icon react-native-vector-icons
iconSize	number	30	Icon size
checkedColor	string	'#464646'	Icon color for checked state
uncheckedColor	string	'#464646'	Icon color for checked state
disabled	bool	false	Disable checkbox
disabledColor	string	'#888'	Disabled color

License

This project is licenced under the MIT License.

Contribution

Speacial thanks to udarts, Maksim Degtyarev and pitchourou. Any contribution welcome!