Git Product home page Git Product logo

react-native-icon-checkbox's Introduction

react-native-icon-checkbox

react native Checkbox / RadioButton component implement with react-native-vector-icons

use Material Icons

Gif

Installation

  1. need to Install react-native-vector-icons first
  2. npm install react-native-icon-checkbox --save

Usage

import React, {
  View,
  Component,
} from 'react-native';
import CheckBox from 'react-native-icon-checkbox';

export default class Policies extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isChecked: false,
      isRadioSelected: true,
    };
  }

  handlePressCheckedBox = (checked) => {
    this.setState({
      isChecked: checked,
    });
  }

  handleSelectedRadionButton = (checked) => {
    this.setState({
      isRadioSelected: checked,
    });
  }

  render() {
    return (
      <View style={{ flex: 1, padding: 20 }}>
        <CheckBox
          label="Checkbox"
          size={30}
          checked={this.state.isChecked}
          onPress={this.handlePressCheckedBox}
        />
        {/* You can use other Icon */}
        {/* Here is the example of Radio Icon */}
        <CheckBox
          label="RadioButton"
          size={30}
          checked={this.state.isRadioSelected}
          onPress={this.handleSelectedRadionButton}
          uncheckedIconName="radio-button-unchecked"
          checkedIconName="radio-button-checked"
        />
      </View>
    );
  }
}

Properties

Prop PropType Default Value Description
size number 30 icon size
checked bool false checked state
uncheckedIconName string 'check-box' material icons (need to replace space with '-' )
checkedIconName string 'check-box-outline-blank' material icons (need to replace space with '-' )
label string {fontSize: 16} label of button
labelStyle object style of label
iconStyle object {marginLeft: -10} color of the icon
checkedIconStyle object icon style when checked
color string '#000' icon color
backgroundColor string 'rgba(0,0,0,0)' background color of the button
onPress func A function called when the button is pressed.
underlayColor string 'rgba(0,0,0,0)' prop of TouchableHighlight
activeOpacity number 1 prop of TouchableHighlight
borderRadius number 5 borderRadius of button

Other Props :

TouchableHighlight's Props

https://github.com/oblador/react-native-vector-icons#properties-1

react-native-icon-checkbox's People

Contributors

kyoyadmoon avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

axsann

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.