react-native-modest-checkbox

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-checkbox

Usage

// ... 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.