React Native dropDown Menu can not be clicked - react-native

Question

I have a dropDown Menu which is needed to be clicked, but when I click on its items, the underlying items which are a searchBar and a Flatlist which is also clickable, are clicked. I want the menu to be clicked, not the searchBar or Flatlist. what should i do?
Here is a screenshot of my simulator:
I can not click on "Arabic" and "persian" on the menu.
Here is parts of my code:
import React, { Component } from 'react';
import {StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import { List, ListItem, SearchBar } from 'react-native-elements';
import DropdownMenu from 'react-native-dropdown-menu';
import {Header, Left, Right, Icon} from 'native-base'
var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'test.sqlite', createFromLocation: '~dictionary.sqlite'})
var data = [["English", "Arabic", "Persian"]];
export default class App extends Component {
constructor(props) {
super(props)
...
db.transaction((tx) => {
...
}
searchFilterFunction = text => {
...
};
render() {
return (
<View style = {styles.container}>
<Header style={styles.headerStyle}>
...
</Header>
<View style={{height: 3 }}/>
<View style={styles.menuView}>
<DropdownMenu
bgColor={"#B38687"}
activityTintColor={'green'}
titleStyle={{color: '#333333'}}
zIndex={100}
handler={(selection, row) => this.setState({text4: data[selection][row]})}
data={data}
>
</DropdownMenu>
<Icon name="arrow-round-forward" style={styles.iconStyle}/>
<DropdownMenu
bgColor={"#B38687"}
activityTintColor={'green'}
titleStyle={{color: '#333333'}}
zIndex={100}
handler={(selection, row) => this.setState({text: data[selection][row]})}
data={data}
>
</DropdownMenu>
</View >
<View >
<View style={styles.viewBorder}>
<SearchBar
...
/>
</View>
<View style={styles.viewBorder}>
<List containerStyle={{ flexDirection: 'column-reverse', borderTopWidth: 0, borderBottomWidth: 0 }} >
<FlatList
...
onPress={() =>{this.props.navigation.navigate('Meaning', {data: (item.word_english +'\n' + item.word_arabic)} ); }}
...
/> )}
/>
</List>
</View>
</View>
</View>);}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CBEFDD',
// flexDirection: 'column'
},
iconStyle:{
backgroundColor:'#CBEFDD',
color:'#84B071',
marginLeft: '5%',
marginRight: '5%',
marginTop: 7,
// height:30,
// alignContent:'center'
},
menuView:{
// flex:1,
// height: 50,
marginLeft: 3,
marginRight: 3,
flexDirection:'row',
zIndex:100,
},
rezvanText:{
flex:1 ,
fontSize: 20,
color: 'white',
justifyContent:'flex-end'
},
headerStyle:{
backgroundColor : "#84B071"
},
viewBorder: {
backgroundColor: 'white',
borderWidth: 2,
borderColor: '#B38687',
marginVertical:3,
marginLeft: 3,
marginRight: 3
}
});

Answer 1

Thanks to Andrew and this I could solve the problem, I put the answer incase someone needs it!
The solution is to assign a minHeight to the View which contains the DropDown menu, and also assign a position: 'absolute' to it. Then set the constraints in order to keep them from overlapping, and Voila!.. I repost the styles here:
const styles = StyleSheet.create({
container: {
...
},
iconStyle:{
...
},
menuView:{
// flex:1,
// height: 50,
**minHeight:215,**
marginLeft: 3,
marginRight: 3,
marginTop:60,
flexDirection:'row',
zIndex:100,
**position: 'absolute'**
},
rezvanText:{
...
},
headerStyle:{
...
},
searchBarView: {
backgroundColor: 'white',
borderWidth: 2,
borderColor: '#B38687',
**marginTop:51,**
marginLeft: 3,
marginRight: 3
},
flatListVew:{
backgroundColor: 'white',
borderWidth: 2,
borderColor: '#B38687',
marginVertical:3,
marginLeft: 3,
marginRight: 3
}
});