React Native Elements: Disabling the Checkbox Component

Song of the Week

While working on a React Native app this week I ran into a problem. How do I make a checkbox component that accepted four specific properties? Those properties were checked, onChange, disable, and size or style. The first place I looked was React Native's core components and was surprised to discover that they didn't have a checkbox component. I could have used the button component, but that would have involved a lot of customizing and I thought, "Surely someone else has made a checkbox component, so why reinvent the wheel?"

Then I found the Native Base checkbox component that works on both iSO and Android. I got excited only to learn from the documentation that it didn't have a disable or style property, again adding to the amount of customization needed.

React Native Elements CheckBox

Finally, I found the CheckBox component from React Native Elements! It had everything; checked, onPress, size, containerStyle, checkedIcon, uncheckedIcon...the list went on. I was particularly excited by those last two properties because I was eventually going to have to add a custom checkbox icon. But wait, no disabled property? Really? Yeah, not ideal, but it was the best I could find. So it was time to customize.

Setting Up Your Environment

Online Development Environment

To play around with this code in an online development environment, go to Expo Snack.

Local Development Environment

If you already have your local environment set up to run React Native apps, then you can just install React Native Elements and skip the rest. Otherwise, follow the installation directions below.

To run locally, this is what you'll need to have installed:

• Node and npm
  • Click to learn how to install Node and npm.
• React JS
  • npm install react
• React Native
  • npm install react-native
• React Native Elements
  • npm install react-native-elements

Adding Disable Functionality

import React, { Fragment, Component } from 'react';
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { CheckBox } from 'react-native-elements';

class Checkbox extends Component {
  constructor(props) {
      super(props)
      this.state = {
          checked: this.props.checked
      }
  }

  handleOnPress = () => this.setState({checked: !this.state.checked})

  // Returns an enabled or disabled Checkbox depending on the value of this.props.disabled
  isDisabled = () => {
    if (this.props.disabled) {
      return (
        <CheckBox 
          Component={TouchableWithoutFeedback}
          size={this.props.size}
          title={"I'm a Checkbox"}
          iconRight={true}
        />
      )
    }
    return (
      <CheckBox 
        Component={TouchableOpacity}
        size={this.props.size}
        checked={this.state.checked} 
        onPress={this.handleOnPress}
        title={"I'm a Checkbox"}
        iconRight={true}
      />
    )
  }

  render() {
      return (
          <Fragment>
              {this.isDisabled()}
          </Fragment>
      )
  } 
}
export default Checkbox;

Since the React Native Elements CheckBox component didn't have a disabled property, I added one in my custom component by writing a class component function called isDisabled. The function returns either an enabled or a disabled version of the CheckBox component based on the value of this.props.disabled. So when the function is called within the render() function, only the desired version of the <CheckBox /> is rendered.

If you'd like to see how this code works you can click these two clicks to my Expo Snack account.

Checkbox Example: disabled = false
Checkbox Example: disabled = true

Takeaways

If you're new to React or React Native, remember this trick. I've found that executing a function in render() is a really powerful way to implement all kinds of behaviors. Maybe, like the example above, you want to conditionally render certain components. Or maybe you want to loop through an array of components and display all or some of the components in that array. There are lots of possibilities.

And finally, like many of you I'm always looking for the best ways of tackling these problems. So if you know of a better way to implement this checkbox example, please leave comment and share you're approach.

References

Cover Image
React Native - Button
Native Base - CheckBox
React Native Elements - CheckBox
freeCodeCamp.org - how to install Node and npm.
stackoverflow - How to disable react-native-element's checkbox touchable opacity?