React Native Multi Select Dropdown Example

Hello everyone and welcome into my new article, where we are going to explore how to make a React Native Multi Select Dropdown.

Lately I have been working on option selection using the checkbox component.
And I have been trying to figure out new ways implementing the selection functionality.

In my last 2 articles. we tried to build a quiz app screen.

Multiple Select Checkbox In React Native
React Native Checkbox Component Example

We worked on checkbox component both single and multi select .
In this article I am going to make the selection part a dropdown, instead of being integrated inside the view.

Concept

So how exactly can we make our multi select checkbox screen we have worked on a dropdown.
I have searched for few hours, on all the multi select dropdown projects out there, and there are some interesting findings.
Some have problems with the scrollview etc.
So my idea is to build my own, using simple react native logic.
So to achieve a react native multi select dropdown, I am going to implement the Modal component.
Simply we will wrap our checkbox components from my old articles and wrap it inside a modal.
And have it display and hide every time the select button is clicked.
This will result in the desired functionality by simply adding a modal.

Let’s Get Started

So to get started, I am not going to make a new project, instead I will work on the code from my previous article.
Multiple Select Checkbox In React Native
You can copy and paste everything and start from there.

If you do so, this is the result you will be looking at

So like I said all we need is to wrap our list of checkbox components inside a modal, and display and hide it based on a button click.

Let’s start by importing the modal component, then add a state property to hold the modal visibility

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

I will make a simple function to manage the visibility of the modal, whenever we click the select button.

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

When I usually make a react native modal, I usually hold the component in a variable inside the render method.
This is the code you need to integrate a modal.

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}>
          <View style={{marginTop: 22}}>
            <View>
              <View style={styles.item}>
                  <CheckBox checked={this.state.selectedLang2} color="#fc5185" onPress={()=>this.setState({selectedLang2:!selectedLang2})}/>
                  <Text style={
                    {...styles.checkBoxTxt,
                      color:this.state.selectedLang2?"#fc5185":"gray",
                      fontWeight:this.state.selectedLang2? "bold" :"normal"
                    }}
                    >Javascript</Text>
              </View>


              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Close</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

And we will add our checkbox components inside the child view, I have added only one as an example, you can add as much as you can.

Now, add an onPress prop to both the Select button, and close button inside the modal to have them update the modal visibility.

onPress={()=>this.setModalVisible(true)}

That’s it, our app now looks like this.

And once you click on the Select button, it will show the modal with options.

And there you have it a React Native Multi Select Dropdown simple and easy.
I hope you enjoyed my article, I hope it was as informative as you expecting.
Take care and Happy Coding.