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!