🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


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


    You May Also Like