A modest checkbox component for React Native
Table of Contents
About
A customizable checkbox component for React Native that supports setting a custom image or component as the checkbox. Inspired by react-native-checkbox.
Install
$ npm install --save react-native-modest-checkbox$ yarn add react-native-modest-checkboxUsage
// ... Imagine imports here
import Checkbox from 'react-native-modest-checkbox'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Checkbox
label='Text for checkbox'
onChange={(checked) => console.log('Checked!')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
// Imagine some amazing styles right here..
})
AppRegistry.registerComponent('App', () => App);You can use your own images for the checkbox states:
<CheckBox checkedImage={require('./path/to/image.png')} uncheckedImage={require('./path/to/otherImage.png')} />It can also be used with your own components for the checkbox states:
// Using react-native-vector-icons
<CheckBox
checkedComponent={<Icon name="hand-peace-o" size={25} color="#222" />}
uncheckedComponent={<Icon name="hand-paper-o" size={25} color="#222" />}
label='Custom Component'
onChange={(checked) => console.log('Checked!')}
/>Props
| Property | Description | Default Value |
|---|---|---|
checkedComponent |
Custom component representing the checked state | <Text>Checked</Text> |
uncheckedComponent |
Custom component representing the unchecked state | <Text>Unchecked</Text> |
checked |
Checked value of checkbox | false |
checkboxStyle |
Styles applied to the checkbox | { width: 30, height: 30 } |
label |
Text that will be displayed next to the checkbox | 'Label' |
customLabel |
Customize label using React Component | null |
labelBefore |
Flag if label should be before the checkbox | false |
labelStyle |
Styles applied to the label | {fontSize: 16, color: '#222'} |
numberOfLabelLines |
The number of lines over which the label will be displayed | 1 |
containerStyle |
Styles applied to the container of label & checkbox | { flexDirection: 'row', alignItems: 'center'} |
checkedImage |
Image representing checked state (e.g. require('./path/to/image.png')) |
checked.png |
uncheckedImage |
Image representing unchecked state (e.g. require('./path/to/image.png')) |
unchecked.png |
onChange |
Callback that will be invoked when the checked state has changed. receives a object with name & checked properties as arguments |
none |
noFeedback |
Use TouchableWithoutFeedback as container of checkbox |
false |
Contribute
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Note: If editing the README, please conform to the standard-readme specification.
License
Licensed under the MIT License.
Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.