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

worked for me 👍

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 😃

This works fine for iOS but not for Android yet

For anyone still facing this issue here is the best solution that works for both IOS and Android : https://github.com/hoaphantn7604/react-native-element-dropdown

import { Dropdown } from "react-native-element-dropdown";

I tried so many package but this is by far the best one and it’s so customizable and easy to use. i wish i found this early when i started working on my project. Thank me later.

This issue should not be closed. The solutions provided are all hack that does not always work. It only work if the first opens down and the second opens up. Not reliable.

So what I managed to achieve is to fix the problem on iOS. Since my dropdown picker is used in Flatlist’s ListHeaderComponent I added to the flatlist also ListHeaderComponentStyle={{zIndex: 10}} and from then it seemed to work fine but only on iOS. Today I faced the same issue (the dropdown goes under the below Views on Android ) and the best I managed to do so far is to make the dropdown to go over everything as it should be, but unfortunately it is not clickable. The only way worked for me was to add these lines of code to the flatlist

CellRendererComponent={({ children, index, style, ...props }) => {
                          const cellStyle = [
                              style,
                              {
                                  zIndex: -1,
                                  elevation: -1,
                              },
                          ];

                          return (
                <View style={cellStyle} index={index} {...props}>
                    {children}
                </View>
                          );
                      }}

So now the dropdown is on the top of the world but not clickable 😄 … Is there any way for the dropdown to remain where it is and to appear on the top but to be clickable. I know that the elevation makes the dropdown untouchable but just could seem to find another way. Thanks in advance guys.

So what I managed to achieve is to fix the problem on iOS. Since my dropdown picker is used in Flatlist’s ListHeaderComponent I added to the flatlist also ListHeaderComponentStyle={{zIndex: 10}} and from then it seemed to work fine but only on iOS. Today I faced the same issue (the dropdown goes under the below Views on Android ) and the best I managed to do so far is to make the dropdown to go over everything as it should be, but unfortunately it is not clickable. The only way worked for me was to add these lines of code to the flatlist

CellRendererComponent={({ children, index, style, ...props }) => {
                          const cellStyle = [
                              style,
                              {
                                  zIndex: -1,
                                  elevation: -1,
                              },
                          ];

                          return (
                <View style={cellStyle} index={index} {...props}>
                    {children}
                </View>
                          );
                      }}

So now the dropdown is on the top of the world but not clickable 😄 … Is there any way for the dropdown to remain where it is and to appear on the top but to be clickable. I know that the elevation makes the dropdown untouchable but just could seem to find another way. Thanks in advance guys.

Thank you! I had issue with Dropdown options not appearing in FlatList. Adding ListHeaderComponentStyle={{zIndex: 10}} fixed the issue.

This was my solution. Considerations :

1. zIndex property is for IOS and elevate for Android.
2. Take into consideration when a sibling of the dropdown is present with a shadow and with the elevate property - only for Android. In my case, the problem was that on a few screens the next element had the elevate property

For IOS

<View style={[styles.dropdownWrap, Platform.OS !== "android" ? { zIndex:1} : null]}>
          <DropDownPicker
            items={items}
            placeholder="Select a item"
            defaultValue={1}
            containerStyle={{ height: 40 }}
            style={//any style}
            itemStyle={{ justifyContent: "flex-start" }}
            labelStyle={{
              fontSize: 14,
              textAlign: "left",
              color: "#000",
            }}
            selectedLabelStyle={{ color: "#000" }}
            onChangeItem={(item) => this.changeItem(item)}
          />
        </View>

       const styles = StyleSheet.create({
            dropdownWrap: { 
                    marginHorizontal: 18, 
                     marginVertical: 18 
           }
       });

For Android

Solution 1 - Use elevate property on parent’s dropdown

 <View style={[styles.dropDownContainer,Platform.OS !== "android" ? { zIndex:1} : null]}>
          <DropDownPicker
            items={items}
            placeholder="Select a item"
            defaultValue={1}
            containerStyle={{ height: 40 }}
            style={//any style}
            itemStyle={{ justifyContent: "flex-start" }}
            labelStyle={{
              fontSize: 14,
              textAlign: "left",
              color: "#000",
            }}
            selectedLabelStyle={{ color: "#000" }}
            onChangeItem={(item) => this.changeItem(item)}
          />
        </View>

const styles = StyleSheet.create({
  dropDownContainer: {
    marginHorizontal: 18,
    marginVertical: 18,
    elevation: 10,
  },
});

Solution 2 - Use minHeight property on parent’s dropdown with position absolute and your own needs (top,margin…)

<View style={[styles.dropDownContainer,Platform.OS !== "android" ? { zIndex:1} : null]}>
          <DropDownPicker
            items={items}
            placeholder="Select a item"
            defaultValue={1}
            containerStyle={{ height: 40 }}
            style={//any style}
            itemStyle={{ justifyContent: "flex-start" }}
            labelStyle={{
              fontSize: 14,
              textAlign: "left",
              color: "#000",
            }}
            selectedLabelStyle={{ color: "#000" }}
            onChangeItem={(item) => this.changeItem(item)}
          />
        </View>

        const style = StyleSheet.create({
           dropDownContainer: {
              minHeight: 200,
              width: "92%", //change based on your needs
              position: "absolute",
              marginHorizontal: 18,
              marginBottom: 30, //change based on your needs
              top: -1, //change based on your needs
              elevation: 10,
              zIndex: 1,
           },
       });