Dropdown not scrollable on Android under specific conditions

[alex-gale]

I'm having some trouble using this component within the guidance of the designs I'm working with and wondered if anyone had any insight. We have a pre-defined Panel component which I need the dropdown to sit within:

When the dropdown opens, it looks like this:

But everything below the line is not scrollable on Android - I can still press on the buttons themselves, but scrolling when my finger starts below the red line is ignored.

The Panel component has the styles backgroundColor: 'white', elevation: 8, which obviously is advised against in the rules (and everything works perfectly when these styles are removed), but I'm unsure how to approach making this look right and working at the same time.

I've spent a few hours trying various suggested solutions with z-indexes and such to no avail, am I missing something? Thank you ❤️

[rgupta2423]

Yes... Same issue i am also facing.

[pvicensSpacedev]

Don't know if you fixed it or not but I was having the exact same issue because a parent View had a zIndex. Not using elevation though. Passed zIndex as a prop to DropdownPicker seemed to help as well

[CrisangerA]

I have the same error. In my case for style reasons I also need to apply zIndex.

• react: 17.0.2
• react-native: 0.68.1

[psalkowski]

Same here.. I need to apply zIndex as I have another "View" after this one. Select looks fine, I can select values but I can't scroll inside the select.

[criss02-cs]

Same issue, i have to set zIndex to make my dropdown visible out of parent view, i can select and search values but i can't scroll, please fix soon, maybe you can offer the possibility to make a custom dropdown box, or make the dropdown box like a modal, in order to put in over all views

[psprowls]

Yep. Me too.

[HardMode2015]

any example to fix this problem

[psprowls]

I couldn't figure anything out and switched to react-native-picker-select. It seems to work fine and didn't take too long to convert. I think there were some visual tradeoffs but I was able to get it to do what I needed.

[KailashGnath]

Any solutions?

[juhaniahola]

Yup, I'm having the same issue and tweaking parent Views zIndex doesn't seem to have any effect... this only happens on Android

[pvicensSpacedev]

Guys, use zIndex prop from DropdownPicker, don't add it to your own Views. Its the only workaround I found

These are all the props I'm currently using and I can scroll fine and there is no overlap between dropdowns (by changing zIndex prop)

        listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
        }}
        ArrowUpIconComponent={renderUpIcon}
        ArrowDownIconComponent={renderDownIcon}
        style={styles.dropdownStyle}
        searchContainerStyle={styles.searchContainer}
        dropDownContainerStyle={styles.dropdownContainer}
        textStyle={styles.text}
        labelStyle={styles.label}
        open={open}
        value={value || ''}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholder={placeholder}
        onSelectItem={onSelectItem}
        zIndex={zIndex || 0}
      />

[DaneHoward]

This feels like a critical bug.

Removing zIndex from surrounding Views allowed for scrolling but the built-in zIndex did not bring the dropdown above surrounding components.

For anyone that is in an absolutely desperate situation and has to make it work, I made it work by setting the containing view height on a ternary with open value. Example:

<View style={{minHeight: open ? '50%' : '20%'}}><DropDownPicker open={open} ... /></View>

I know this is a gross fix but it works 👍

[malekkbh]

just add listMode prop => listMode="SCROLLVIEW" did it for me

<DropDownPicker searchable={searchable} open={open} value={value} items={itemsData} setOpen={setOpen} setValue={setValue} setItems={setItemsData} onChangeValue={text => onChangeHandle(text || '')} placeholder={placeHolder} ArrowDownIconComponent={() => images.down()} ArrowUpIconComponent={() => images.up()} closeAfterSelecting arrowIconContainerStyle={selectCustomStyles.arrowIcon} searchContainerStyle={selectCustomStyles.searchBox} searchTextInputStyle={selectCustomStyles.searchBoxText} searchPlaceholderTextColor={colors.gray} placeholderStyle={selectCustomStyles.placeHolder} style={[selectCustomStyles.container, {marginBottom: error ? 0 : 35}]} listItemContainerStyle={selectCustomStyles.listBox} textStyle={selectCustomStyles.text} labelStyle={selectCustomStyles.label} translation={{ NOTHING_TO_SHOW: noResFound, SEARCH_PLACEHOLDER: searchPlaceholder, }} listMode="SCROLLVIEW" />

[ade5791]

<DropDownPicker ... containerStyle={{ height: 300 }} ... /> Make sure to move the component below back up with the following

<View style={{ marginTop: -300 }}>

[mariusgaciu]

Hey guys. I've had this issue as well because I was using a custom wrapper to the drop-down picker. I managed to get it fixed. Hope it helps someone.

import React, { useState } from 'react';
import { StyleSheet, View, Image, Platform } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

function AppDropDown({
  zIndex,
  elevation,
  items,
  initialValue,
  icon,
  dropdownPadding,
  containerPadding,
  error,
  errorVisible,
  ...otherProps
}) {
  const [isOpen, setOpen] = useState(false);
  const [isValues, setValues] = useState(initialValue);
  const [isItems, setItems] = useState(items);

  const iconElevation = elevation + 1;

  return (
    <View
      style={styles.mainContainer}
      zIndex={Platform.OS === 'ios' ? zIndex : undefined}
      elevation={Platform.OS === 'ios' ? elevation : undefined}
    >
      <DropDownPicker
        scrollViewProps={{
          nestedScrollEnabled: true,
        }}
        zIndex={zIndex}
        elevation={elevation}
        open={isOpen}
        value={isValues}
        items={isItems}
        setOpen={setOpen}
        setValue={setValues}
        setItems={setItems}
        dropDownDirection="AUTO"
        dropDownContainerStyle={[
          dropdownPadding,
          styles.dropdownContainer,
          icon && { paddingLeft: 50 },
        ]}
        style={[
          styles.dropdownStyle,
          containerPadding,
          icon && { paddingLeft: 58 },
        ]}
        listItemContainerStyle={styles.itemContainer}
        containerStyle={styles.container}
        searchContainerStyle={styles.dropDownSearchContainerStyle}
        {...otherProps}
      />
      {icon && (
        <View
          style={[
            styles.iconContainer,
            { zIndex: iconElevation, elevation: iconElevation },
          ]}
        >
          <Image style={styles.icon} source={icon} resizeMode="contain" />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    width: '92%',
  },
  iconContainer: {
    position: 'absolute',
    justifyContent: 'center',
    height: 74,
  },
  icon: {
    height: 24,
    width: 24,
    marginLeft: 18,
  },
  pickerContainer: {
    width: '92%',
  },
  dropdownContainer: {
    borderWidth: 0.5,
    borderRadius: 12,
    paddingLeft: 10,
  },
  dropdownStyle: {
    borderWidth: 0.5,
    borderRadius: 12,
    height: 58,
    marginVertical: 8,
    paddingLeft: 18,
  },
  dropDownSearchContainerStyle: {
    paddingRight: 20,
    borderBottomWidth: 0,
  },
});

export default AppDropDown;