React Native dropDown Menu can not be clicked

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
  }


});