react-native-dropdown-picker icon indicating copy to clipboard operation
react-native-dropdown-picker copied to clipboard

Dropdown not scrollable on Android under specific conditions

Open alex-gale opened this issue 2 years ago • 15 comments

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:

Screenshot 2022-09-30 at 10 58 08 am

When the dropdown opens, it looks like this:

download

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 ❤️

alex-gale avatar Sep 30 '22 10:09 alex-gale

Yes... Same issue i am also facing.

rgupta2423 avatar Nov 02 '22 09:11 rgupta2423

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

pvicensSpacedev avatar Nov 18 '22 20:11 pvicensSpacedev

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

CrisangerA avatar Nov 22 '22 16:11 CrisangerA

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.

psalkowski avatar Dec 02 '22 07:12 psalkowski

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

criss02-cs avatar Dec 22 '22 14:12 criss02-cs

Yep. Me too.

psprowls avatar Jan 04 '23 16:01 psprowls

any example to fix this problem

HardMode2015 avatar Jan 21 '23 20:01 HardMode2015

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.

psprowls avatar Jan 21 '23 23:01 psprowls

Any solutions?

KailashGnath avatar Jan 24 '23 11:01 KailashGnath

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

juhaniahola avatar Jan 24 '23 14:01 juhaniahola

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}
      />

pvicensSpacedev avatar Jan 24 '23 14:01 pvicensSpacedev

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 👍

DaneHoward avatar Jan 24 '23 20:01 DaneHoward

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" />

malekkbh avatar Jan 30 '23 22:01 malekkbh

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

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

ade5791 avatar Feb 02 '23 02:02 ade5791

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;

mariusgaciu avatar Mar 01 '23 10:03 mariusgaciu