How to close dropdown box view on open another? [React - Native]

Question

I am using this library to implement dropdown option. I have multiple dropdown view in a screen. All are showing nicely but the problem is when one box view is opened I am going to open another dropdown. In that time both boxes are in open state.

What I want to achieve? - When one box is opened and I clicked another dropdown to open previous dropdox box will automatically get closed. How could I achieve that?

Below is my code of two dropdown-

<View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>

                               <View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
                                    <View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755, }}>

                                    </View>

                                    <DropDownPicker
                                         zIndex={3000}
                                         zIndexInverse={1000}
                                         searchable={true}
                                         onOpen={() => { this.setState({ dropdown_visible: false }), console.log("opened"), this.stateOpen()  }}
                                         // onClose={() => this.setState({ dropdown_visible: false })}
                                         // style = {{marginTop: 50}}
                                         open={this.state.state_open}

                                         containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.07, alignSelf: 'center', left: 1, right: 1 }}
                                         itemStyle={{ justifyContent: 'flex-start' }}
                                         dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
                                         items={states}
                                         placeholder="Select State"
                                         placeholderStyle={{
                                              color: 'gray',
                                              textAlign: 'left'
                                         }}
                                         controller={instance => this.controller = instance}
                                         onChangeList={(states, callback) => {
                                              this.setState({
                                                   states // items: items
                                              }, callback);
                                         }}

                                         defaultValue={this.state.value}
                                         onChangeItem={(item, index) => (this.setState({
                                              state_name: item.value, state_id: states_with_id[index].id
                                         }), this.getCity(states_with_id[index].id))}
                                    />
                               </View>

                          </View>


                          <View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>

                               <View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
                                    <View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755 }}>

                                    </View>

                                    <DropDownPicker
                                         zIndex={2000}
                                         zIndexInverse={2000}
                                         controller={instance => controller = instance}
                                         searchable={true}
                                         onOpen={() => { this.setState({ dropdown_visible: false }), this.cityOpen() }}
                                         // onClose={() => this.setState({ dropdown_visible: false })}
                                         // style = {{marginTop: 50}}
                                         open={this.state.city_open}
                                         containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.0755, alignSelf: 'center', left: 1, right: 1 }}
                                         itemStyle={{ justifyContent: 'flex-start' }}
                                         dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
                                         items={cities}
                                         placeholder="Select City"
                                         placeholderStyle={{
                                              color: 'gray',
                                              textAlign: 'left'
                                         }}
                                         controller={instance => this.controller = instance}
                                         onChangeList={(cities, callback) => {
                                              this.setState({
                                                   cities // items: items
                                              }, callback);
                                         }}

                                         defaultValue={this.state.value}
                                         onChangeItem={(item, index) => this.setState({
                                              city_name: item.value, city_id: cities_with_id[index].id
                                         })}
                                    />
                               </View>

                          </View>

Answer 1

You could use variables in your state that relate directly to the opening of the dropdown menus.

For example: dropdown1, dropdown2. In your first render, they should be set to false.

Now, whenever opening a dropdown with the function onOpen(), you should set the state of the dropdown you want to open to true, and the rest to false:

Dropdown 1 example

onOpen={() => { this.setState({ dropdown1: true, dropdown2: false }), this.cityOpen() }}

And then only show the dropdown that you need by using conditions.