Problem with the zIndex where my picker goes under below Views

Hi everyone. Sorry if this has already been asked but I couldn’t find a working solution. So My code is this: <View style={styles.oddsSelectorContainer}> <Text style={styles.oddsShownLabel}>ODDS SHOWN</Text> <View style={{ ...(Platform.OS !== 'android' && { zIndex: 10, }), }} > <DropDownPicker items={[ { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> }, { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> }, ]} defaultValue={this.state.country} style={{ backgroundColor: '#fafafa', width: 174 }} itemStyle={{ justifyContent: 'flex-start', }} dropDownStyle={{ backgroundColor: '#fafafa' }} onChangeItem={(item) => this.setState({ country: item.value, })} /> </View> </View> And the picker still goes under the views which are under it. Tried to increase the wrapping View zIndex also added zIndex to teh Dropdown picker but nothing seems to work for me. Thanks in advance. 😃. If more information is needed I will add it.

[crackerjackjay21]

  <View style={{zIndex: 2000}}>
    <DropDownPicker />
  </View>
  <View style={{zIndex: 1000}}>
    <DropDownPicker />
  </View>
 </>

worked for me 👍

[petkovv]

Hi everyone. Thanks all for the help. Let me share what I found out and how I managed to fix my problem. So I managed to rework my component. Initially I had a component with Flatlist which Flatlist had ListHeaderComponent and all of the content that had to be rendered above the items, so basically the whole screen was a flatlist 😄. And I managed to make it work on iOS with the zIndex in ListHeaderComponentStyle of the Flatlist, but the only way to show the dropdown above the items on Android was to use elevation, which elevation was simply making the dropdown not touchable. The solution was to remove the ListHeaderComponent from the Flatlist and to put the header in separate function which I called above the Flatlist (of course you can put the content of the ListHeaderComponent in separate component, function or just in a View or Fragment above the Flatlist). That way it just worked as it should on Android with no workarounds and hacks, the only thing I needed to add was:

 <View style={{
                ...(Platform.OS !== 'android' && {
                    zIndex: 10,
                }),
            }}
            >

SO the dropdown goes above the items of the Flatlist in iOS also. Only the check is needed because otherwise on Android the dropdown becomes untouchable again. I added the View that way ->

...
 <View style={{
                ...(Platform.OS !== 'android' && {
                    zIndex: 10,
                }),
            }}
            >
   <BookmakerSelectionDropdown /> // That is my component which contains the dropdown
</View
....

I will close the issue, if anyone had same problems feel free to reopen it and I will try to help 😃