Newtonian Particle Motion

    react-native-checkbox-heaven

    0.1.6 • Public • Published

    react-native-checkbox-heaven

    ReactNative Checkbox components which contains 17 design type.Built in with the help of react-native-vector-icons. Currently supports icon sets:

    I categorized checkboxes to 3 type:

    1. Edge (outlined icon for both state)
    2. Fill (filled icon for both state)
    3. Mix (outlined for unchecked, filled for checked state)

    Default checkboxes

    Imgur

    Styled checkboxes

    Imgur

    Installation guide

    1. First react-native-vector-icons must be installed and linked
    2. Run: $ npm install react-native-checkbox-heaven --save

    Examples

    1.Import component

    import CheckBox from 'react-native-checkbox-heaven';

    2.Basic use (default icon is iosMix)

     <CheckBox
        onChange={(val) => alert(val)}
        checked={true}
    />

    3.Full

     
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
     
    import CheckBox from 'react-native-checkbox-heaven'
     
    export default class checkboxDemo extends Component {
      state = {
        checked: false
      }
      handleOnChange(val) {
        this.setState({ checked: val })
      }
      render() {
     
        return (
          <View style={styles.container}>
            <CheckBox
              label='demo label'
              labelStyle={styles.labelStyle}
              iconSize={28}
              iconName='matMix'
              checked={this.state.checked}
              checkedColor='#008080'
              uncheckedColor='#8b0000'
              onChange={this.handleOnChange.bind(this)}
              disabled={true}
              disabledColor='red'
            />
          </View>
        );
      }
    }
     
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      labelStyle: {
        marginLeft: 4,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#2f4f4f'
      }
    });
     
    AppRegistry.registerComponent('checkboxDemo', () => checkboxDemo);
     

    API

    Property Type Default Value Description
    style object {} Style for TouchableOpacity
    checked bool false Checbox state
    onChange func Handler function for button press. Required
    labelPosition string 'right' Position for label ('right' or 'left')
    labelStyle object {fontSize:16,marginLeft:3} Style for Text
    iconName string 'iosMix' Icon name
    iconStyle object {} Custom style for Icon react-native-vector-icons
    iconSize number 30 Icon size
    checkedColor string '#464646' Icon color for checked state
    uncheckedColor string '#464646' Icon color for checked state
    disabled bool false Disable checkbox
    disabledColor string '#888' Disabled color

    License

    This project is licenced under the MIT License.

    Contribution

    Speacial thanks to udarts, Maksim Degtyarev and pitchourou. Any contribution welcome!

    Install

    npm i react-native-checkbox-heaven

    DownloadsWeekly Downloads

    214

    Version

    0.1.6

    License

    ISC

    Unpacked Size

    29.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • ismayilmalik