How to close dropdown box view on open another? [React - Native] - 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.