React Native Custom Checkbox Component iOS Android Example

React Native Custom Checkbox Component iOS Android Example

02/05/2019 By Administrator

As we all know react native just launch its new 0.58 stable version but there is still a lot’s of components are missing and one of them is Checkbox. React native currently dose not provide us Checkbox component so we need to make our own custom checkbox. It is a two states handler button which can be checked and unchecked. Checkbox is used to get same type of multiple values from user in both android and iOS applications. Checkbox is very popular among developers because of its functionality to get multiple values from user. In this tutorial we would create Custom Checkbox Component for both iOS Android applications in react native.

Paste below into your component

 

class Checkbox extends Component {

  constructor() {

    super();

    this.state = { checked: null }
  }

  componentWillMount() {

    if (this.props.checked) {
      this.setState({ checked: true }, () => {
        this.props.selectedArrayObject.pushItem({
          'key': this.props.keyValue,
          'label': this.props.label,
          'value': this.props.value
        });
      });
    }
    else {
      this.setState({ checked: false });
    }
  }

  toggleState(key, label, value) {
    this.setState({ checked: !this.state.checked }, () => {
      if (this.state.checked) {
        this.props.selectedArrayObject.pushItem({ 'key': key, 'label': label, 'value': value });
      }
      else {
        this.props.selectedArrayObject.getArray().splice(this.props.selectedArrayObject.getArray().findIndex(x => x.key == key), 1);
      }
    });
  }

  render() {
    return (

              onPress={this.toggleState.bind(this, this.props.keyValue, this.props.label, this.props.value)}
        underlayColor="transparent"
        style={{ marginVertical: 10 }}>

       

         
            {
              (this.state.checked)
                ?
                (
                 
                )
                :
                ()
            }

         

          {this.props.label}

       

     
    );
  }
}

Write a comment




HAVE ANY NEW IDEA IN MIND??

[email protected]

Connect With Us