Hello and welcome everyone, In this article we will explore how to make Multiple Select Checkbox In React Native.
This is not the first time I write about React native Checkbox, I actually I had an old article React Native Checkbox Component Example.
That that article we built a sample quiz app screen, and explored how to make React Native Checkbox components.
This is our final result.

Multiple Select Checkbox In React Native old article


in that article we only had one options select checkbox.
And in this article we’re going to make the Checkbox Multiple Select

So, I will not re invent the wheel and rewrite the entire steps on how to make this screen.
You can read my old article, in this article I will try to add just the functionality to have a multiple select checkbox.

Getting Started

Following my old article React Native Checkbox Component Example.
In order to make the checkbox multiple select, we will only need to change the state and how the value of the option each changes.


Instead of having one selection property in our state, we will instead add 4 for each option we will have.
And Have each property map to a checkbox and display its value when it changes.
We will also need to update our checkbox option text style.

So let’s get started by updating our state

  state={
    selectedLang1:false,
    selectedLang2:false,
    selectedLang3:false,
    selectedLang4:false,

  }

Now, we need to update the checkbox component.
First get the options from the state using object destructuring, so that we don’t repeat this.state everywhere.

const {selectedLang1,selectedLang2,selectedLang3,selectedLang4} = this.state


Let’s update the checked prop value to get it’s value from the new state property,
next, update the onPress function to update the checkbox select value.
We will also need to update the checkbox select option text for our new state.


Our code for the checkbox view will look like this.

<View style={styles.item} >
    <CheckBox checked={selectedLang1} color="#fc5185" onPress={()=>this.setState({selectedLang1:!selectedLang1})}/>
    <Text style={
      {...styles.checkBoxTxt,
        color:this.state.selectedLang1?"#fc5185":"gray",
        fontWeight:this.state.selectedLang1? "bold" :"normal"
      }}
      >Python</Text>
</View>

Repeat this step for all your Checkbox components and by now your checkboxes can multiple select and deselect.

Our Quiz app screen now looks like this.

Multiple Select Checkbox In React Native Result

There you have it a Multiple Select Checkbox In React Native. Easy and simple.
You can check this project’s on github and expo.io
I hope you enjoyed reading my article.
Happy Coding.