Zindex does't work on IOS

[daniimd]

I have a form with four dropdowns, but when I open it, the input at the bottom overlaps the listing.
On android I solved the problem using zIndex: 1, but on IOS I still have the same problem.

Android:

IOS:

code:

 <Text style={styles.label}>Estado DE: *</Text>
    <DropDownPicker
    loading={loadingEstadoDe}
       translation={{
        NOTHING_TO_SHOW: "Não há nenhum item"
      }}
      style={styles.dropBox}
      searchable={true} 
      disableLocalSearch={true}
      searchPlaceholder="Pesquisar"
      listMode="SCROLLVIEW"
      placeholder='Estado DE:'
      onChangeSearchText={(text) => {handleFilterEstadoDe(text)}}
      placeholderStyle={{color: '#c1bccc'}}
      open={openEstadoDe}
      onOpen={onEstadoDeOpen}
      value={estadoDe}
      items={itemsEstadoDe}
      setOpen={setOpenEstadoDe}
      setValue={setEstadoDe}
      setItems={setItemsEstadoDe}
      onChangeValue={() => {handleFilterCidadeDe("")}}
    />
.......

CSS:

    dropBox: {
      height: 54,
      backgroundColor: '#FFF',
      borderRadius: 8,
      justifyContent: 'center',
      paddingHorizontal: 16,
      marginTop: 3, 
      borderWidth: 0,
      zIndex: 1,
    },

[hossein-zare]

See: #450 (comment)

[normanzb]

See: #450 (comment)

hi @hossein-zare , the mentioned solution doesn't work when the dropdown pops up ward. tbh i think use zIndex prop to fix the issue is a poor choice, because in RN the zIndex doesn't work the same way as in web. In web the zIndex works across element hierarchy as long as containing element doesn't have a zIndex prop, however in RN zIndex only works with sibling elements, example here (blue block is zindex 4, in web it is supposed to cover all the other element:

https://snack.expo.dev/MsYJxHPH5ow5I-AHj0Nz4

i think a better choice to implement it is to have a singleton <Portal /> element, the user of the lib should place the <Portal /> element in a place where it is guaranteed to be on top. then the lib "teleport" the dropdown layer to the <Portal /> location. that also solve the issue that multple dropdown layer can clash unless more control is added.