[Android] DropDownPicker scrollview will scroll the parent ScrollView

[calinciubotariucinch]

Problem:

I have a DropDownPicker inside a ScrollView in my RN project. When I try to scroll inside the dropdown list and the scroll reaches the bottom of the dropdown box list, then the parent ScrollView scrolls down.

What I tried to do is to catch when the inner ScrollView scrolls to disable the outer ScrollView. But unfortunately it does not work.

The weird thing is that on iOS I don't have this issue. On iOS, the inner scroll view just bounces.

Code:

<ScrollView
      style={homeStyles.scrollView}
      nestedScrollEnabled={true}
      scrollEnabled={enableMainScroll}
      onScrollBeginDrag={() => setIsPressed(true)}
    >

...........

  <View style={[headerStyles.container, Platform.OS === 'ios' ? { zIndex: 100 } : {}]}>
    <DropDownPicker
          listMode={'SCROLLVIEW'}
          scrollViewProps={{
            nestedScrollEnabled: true,
            onMomentumScrollBegin: () => setMainScrollState(false),
            onMomentumScrollEnd: () => setMainScrollState(true),
          }}
          open={open}
          value={value}
          items={items}
          style={{ ...style, ...dropdownStateStyle }}
          placeholder={placeholder}
          setOpen={setDropdownState}
          onOpen={onOpen}
          setValue={setValue}
          setItems={setItems}
          disabled={disabled}
          textStyle={disabled ? dropdownStyles.disabledText : dropdownStyles.defaultText}
          zIndex={zIndex}
          zIndexInverse={zIndexInverse}
          props={{ activeOpacity: 1 }}
          arrowIconContainerStyle={dropdownStyles.arrow}
          autoScroll={true}
          closeOnBackPressed={true}
    />
  <View>
...........
<ScrollView/>

• setMainScrollState enables/disables the enableMainScroll state

Did anyone encountered this problem?

Thank you. Any info is much appreciated.

[parsa-j42]

@calinciubotariucinch I had a similar problem because I was using absolute positioning for the dropdown. Does dropDownContainerStyle={{position: 'relative', }} solve your problem by any chance?

[vozaldi]

Have you tried disabling <ScrollView /> when the picker is open?

<ScrollView
  style={homeStyles.scrollView}
  nestedScrollEnabled={true}
  scrollEnabled={!open}
  onScrollBeginDrag={() => setIsPressed(true)}
>...

With that, you can remove both onMomentumScrollBegin and onMomentumScrollEnd in your scrollViewProps.

<DropDownPicker
  listMode={'SCROLLVIEW'}
  scrollViewProps={{
    nestedScrollEnabled: true,
  }}
  ...
/>

[doziben]

I had this same issue on android. From my experience, wrapping the dropdown picker inside a view is one major cause of this bug. Also when used together with a <ScrollView /> , you have to disable scroll when the picker is open just like @vozaldi commented. In my case, I managed the 'scroll enabled' prop as a global state and added callbacks for onOpen and onClose to the dropdown picker.

<DropDownPicker onOpen={() => { setScroll(false); }} onClose={() => { setScroll(true); }} />