react-native-modest-checkbox

3.3.0 • Public • Published
banner

A modest checkbox component for React Native

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.

    Install

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

    Usage

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

    Package Sidebar

    Install

    npm i react-native-modest-checkbox

    Weekly Downloads

    429

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    671 kB

    Total Files

    12

    Last publish

    Collaborators

    • tiaanduplessis