React Native Elements: Disabling the Checkbox Component
Tags: reactnative, beginners
Published: 2020-05-04 01:43:47

###Song of the Week
{% soundcloud https://soundcloud.com/benbadaboom/ben-bada-boom-blossom %}

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.](https://expo.io/tools#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.](https://www.freecodecamp.org/news/how-to-install-node-js-and-npm-on-windows/)
* React JS
 * `npm install react`
* React Native
 * `npm install react-native`
* React Native Elements
 * `npm install react-native-elements`


##Adding Disable Functionality
```jsx
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](https://snack.expo.io/@lofiandcode/checkbox-example---disabled-=-false)
[Checkbox Example: disabled = true](https://snack.expo.io/@lofiandcode/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](https://atendesigngroup.com/blog/radios-checkboxes-and-drupal%E2%80%99s-admin-interface)
[React Native - Button](https://reactnative.dev/docs/button)
[Native Base - CheckBox](https://docs.nativebase.io/Components.html#checkbox-headref)
[React Native Elements - CheckBox](https://react-native-elements.github.io/react-native-elements/docs/checkbox.html)
[freeCodeCamp.org - how to install Node and npm.](https://www.freecodecamp.org/news/how-to-install-node-js-and-npm-on-windows/)
[stackoverflow - How to disable react-native-element's checkbox touchable opacity?](https://stackoverflow.com/questions/56869192/how-to-disable-react-native-elements-checkbox-touchable-opacity)