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:
- Edge (outlined icon for both state)
- Fill (filled icon for both state)
- Mix (outlined for unchecked, filled for checked state)
Default checkboxes
Styled checkboxes
Installation guide
- First react-native-vector-icons must be installed and linked
- 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!