A modest checkbox component for React Native

Downloads in past


5423.3.05 years ago7 years agoMinified + gzip package size for react-native-modest-checkbox in KB



A modest checkbox component for React Native

<a href="">
  <img src="" alt="NPM version" />
<a href="">
<img src="" alt="Downloads" />
<a href="">
  <img src="" alt="Standard" />
<a href="">
  <img src="" alt="Travis Build" />
<a href="">
  <img src="" alt="Standard Readme" />
<a href="">
  <img src="" alt="GitHub version" />

Table of Contents

Table of Contents
  • About
  • Install
  • Usage
  • Props
  • Contribute
  • License
  • About

    A customizable checkbox component for React Native that supports setting a custom image or component as the checkbox. Inspired by react-native-checkbox.


    $ npm install --save react-native-modest-checkbox

    $ yarn add react-native-modest-checkbox



    // ... Imagine imports here
    import Checkbox from 'react-native-modest-checkbox'
    export default class App extends Component {
      render() {
        return (
          <View style={styles.container}>
              label='Text for checkbox'
              onChange={(checked) => console.log('Checked!')}
    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
      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!')}


    <th>Default Value</th>
    <td>Custom component representing the checked state</td>
    <td>Custom component representing the unchecked state</td>
    <td>Checked value of checkbox</td>
    <td>Styles applied to the checkbox</td>
    <td><code>{ width: 30, height: 30 }</code></td>
    <td>Text that will be displayed next to the checkbox</td>
    <td>Customize label using React Component</td>
    <td>Flag if label should be before the checkbox</td>
    <td>Styles applied to the label</td>
    <td><code>{fontSize: 16, color: '#222'}</code></td>
    <td>The number of lines over which the label will be displayed</td>
    <td>Styles applied to the container of label & checkbox</td>
    <td><code>{ flexDirection: 'row', alignItems: 'center'}</code></td>
    <td>Image representing checked state (e.g. <code>require('./path/to/image.png')</code>)</td>
    <td>Image representing unchecked state (e.g. <code>require('./path/to/image.png')</code>)</td>
    <td>Callback that will be invoked when the checked state has changed. receives a object with <code>name</code> & <code>checked</code> properties as arguments</td>
    <td>Use <code>TouchableWithoutFeedback</code> as container of checkbox</td>


    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.


    Licensed under the MIT License.
    Icon made by Freepik from is licensed by CC 3.0 BY.