Multiple Dropdown zIndex doesnt work

Hello

I got 2 dropdowns one above the other. Only in Android i got 2 problems :

• The first dropdown list go under the closed dropdown of the second list the zindex prop doesnt seems to work on Android and elevation is not recognized as a prop for DropDownPicker
• The button just under (Touchable opacity) is unreachable (unclickable)

Thanks a lot for support or help provided

<View style={[styles.crenContainer, styles.shadow, { backgroundColor, height: openDate? 520 : openHour? 580 : 280 }]}>
         

        <Text style={[styles.dateText, { color: textColor, fontFamily:'geometria-regular' }]}>
          Sélectionnez la date
        </Text>
        <DropDownPicker
          open={openDate}
          value={selectedDay}
          items={daystobook}
          setOpen={setOpenDate}
          setValue={setSelectedDay}
          setItems={setDaystobook}
          placeholder="Date ..."
          maxHeight={300}
          style={[styles.dropdown, styles.shadow]}
          labelStyle={styles.labeldropdown}
          textStyle={{fontFamily:'geometria-regular', color:"white"}}
          placeholderStyle={styles.labeldropdown}
          zIndex={3000}
          zIndexInverse={1000}
          dropDownContainerStyle={styles.dropdown}
        />
      

        <Text style={[styles.hourText, { color: textColor,  fontFamily:'geometria-regular', marginTop: openDate? 120 : 20 }]}>
          Sélectionnez l'heure 
        </Text>
        <DropDownPicker
          open={openHour}
          value={selectedHour}
          items={hourstobook}
          setOpen={setOpenHour}
          zIndex={2000}
          zIndexInverse={2000}
          setValue={setSelectedHour}
          setItems={setHourstobook}
          textStyle={{fontFamily:'geometria-regular', color:"white"}}
          placeholder="Heure ..."
          maxHeight={300}
          style={[styles.dropdown, styles.shadow]}
          labelStyle={styles.labeldropdown}
          placeholderStyle={styles.labeldropdown}
          dropDownContainerStyle={styles.dropdown}
        />

        {
          !openDate &&
          <View
            style={[
              styles.btnNextContainer,
              styles.shadow,
              { opacity: selectedDay === "" || selectedHour === "" ? 0.5 : 1 },
            ]}
          >
            <TouchableOpacity
              onPress={() => {
                console.log("pressed to go")
                console.log(selectedDay)

                setCrenModalVisible(false)
                setstripeAccIdRestoValue(myintcust.stripeAccId)
                navigation.navigate(goto, {
                  restoId: route.params.restoId,
                  bookingType: bookingType,
                  day: moment.tz(selectedDay, "YYYY-MM-DD", "America/Martinique").format(),
                  hour: selectedHour,
                })
              }}
              style={styles.btnNext}
           //   disabled={selectedDay === "" || selectedHour === ""}
            >
              <Ionicons
                name="arrow-back"
                size={25}
                color="white"
                style={styles.arrow}
              />
            </TouchableOpacity>
          </View>
        }
        {selectedDay !== "" &&
          !loading &&
          hourstobook &&
          hourstobook.length == 0 && (
            <View>
              <Text style={styles.textstrong}>
                Plus d'horaires disponibles ! 🤷🏽‍♂️
              </Text>
           
            </View>
          )}
        {loading && (
          <View style={styles.wrapindicator}>
            <ActivityIndicator size="large" color="#F50F50" />
          </View>
        )}
      </View>

Styles :

crenContainer: {
    position:'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: 20,
    borderRadius: 10
  },
  dropdown: {
    borderColor: "transparent",
    backgroundColor: "#ff5050",
    color:'white',
    fontFamily:'geometria-regular'
  },
  labeldropdown: {
    color: "white",
  //  fontWeight: "bold",
    fontFamily:'geometria-bold'
  },
  dateText: {
    marginBottom: 10,
    fontSize: 14,
    color:'white',
    fontFamily:'geometria-bold'
  },
  hourText: {
    fontFamily:'geometria-bold',
    marginTop: 20,
    marginBottom: 10,
    fontSize: 14,
    color:'white'
  },
  btnNextContainer: {
    position: "absolute",
    bottom: 20,
    right: 20,
    borderRadius: 25,
    color:'white',
    backgroundColor: "#ff5050"
  },
  btnNext: {
    height: 50,
    width: 50,
    color:'white',
    justifyContent: "center",
    alignItems: "center",
  },
 crenText: {
    fontSize: 16,
    padding: 4,
    fontFamily: "geometria-regular",
  },
  shadow: {
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
  },

[hossein-zare]

Add zIndex to the btnNextContainer style.

btnNextContainer: {
  zIndex: 4000
  ...
}

[hossein-zare]

Hello,

elevation is causing the behavior, So take out the styles.shadow from the style property.

style={[styles.dropdown, styles.shadow]}

// to

style={styles.dropdown}