I am currently trying to create a custom dropdown tool with expo. I have created a custom dropdown component that includes a: DropdownMenu, SearchableDropdown, and Dropdown. When i was implementing these components, it worked as expected - however, it seems like the menu is displaying components behind other components.

I have tried making putting in the z-index into the css for the scrollview, but it did not work. So i have tried inspecting the elements from my webpage. it turns out that the first children below the root element it has a z-index of 0, when i removed it, the dropdown menu works.

this is the DropDown Menu code:

const DropdownMenu: React.FC<DropdownMenuProps> = ({ data, onClick }) => {

  const handleSelect = (item: DropdownItem) => {
    onClick(item);
  };

  return (
    <View>
      <View >
        <ScrollView>
          {data.map((item) => (
            <TouchableOpacity
              key={item.id.toString()}
              onPress={() => handleSelect(item)}
            >
              <Text>{item.label}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    </View>
  );
};

and this is my component that triggers the search:

<View style={styles.container}>
        {selectedItem ? (
          <TouchableOpacity
            onPress={() => {
              setDropdownVisible(false);
              setSearchText("");
              onSelect(null);
            }}
          >
         
            <Text>{selectedItem.label}</Text>
          </TouchableOpacity>
        ) : (
          <TextInput
            value={searchText}
            onChangeText={(text) => setSearchText(text)}
            onFocus={() => {
              setDropdownVisible(true);
            }}
            onBlur={() => {
              setTimeout(() => {
                if (!selectedItem) {
                  setDropdownVisible(false);
                }
              }, 200);
            }}
            placeholder="Search..."
          />
        )}
        {dropdownVisible && (
          <DropdownMenu data={itemsToDisplay} onClick={onSelect}/>
        )}
      </View>

Does anyone know how to fix this/if there are any other better ways?

Thank you very much for your help