react-native-dropdown-picker: The dropdown picker scroll inside another scroll is not working

Hi, I had the same issue, the library provides listMode props. Adding this props solved my issue.

 listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
  }}

check this documentation for more information https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/next/advanced/list-modes#scrollviewprops

I resolved the scroll issue of dropdown container by using position: 'relative' in dropDownContainerStyle

dropDownContainerStyle={{
borderColor: theme.colors.gray4,
    position: 'relative', // to fix scroll issue ... it is by default 'absolute'
    top: 0, //to fix gap between label box and container
}}

Hi,

I’m unable to scroll the Dropdown item list, If I place the Dropdown inside the scrollview. I need to show 15 dropdown in one single screen. As you can see in the below screenshot “Filter Thickness (in)” consists of more than 4 items. If I try to scroll Dropdown item list it’s not scrolling instead complete screen will scroll.

any workaround or any solution for this? Please let me know. Many thanks in advance.

I am also facing the same issue!!

+1. I am also facing a similar issue

Hi,

I’m unable to scroll the Dropdown item list, If I place the Dropdown inside the scrollview. I need to show 15 dropdown in one single screen. As you can see in the below screenshot “Filter Thickness (in)” consists of more than 4 items. If I try to scroll Dropdown item list it’s not scrolling instead complete screen will scroll.

any workaround or any solution for this? Please let me know. Many thanks in advance.

Hi, I had the same issue, the library provides listMode props. Adding this props solved my issue.

 listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
  }}

check this documentation for more information https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/next/advanced/list-modes#scrollviewprops

Still not working Here is my code by using scroll View it is not even showing the list items.

{/* <ScrollView nestedScrollEnabled={true}> /} <DropDownPicker open={open} value={value} items={items} showTickIcon={true} closeAfterSelecting={true} setOpen={setOpen} stickyHeader={true} onSelectItem={(item => { console.log(item.type); setValue(item.id) })} listMode=“SCROLLVIEW” scrollViewProps={{ nestedScrollEnabled: true, }} dropDownContainerStyle={{borderColor:‘#AAB8DB’}} maxHeight={100} style={{borderColor: ‘#AAB8DB’}} placeholderStyle={{color: ‘#AAB8DB’, fontSize: 16,}} placeholder=“Credit Card , Utility…” setItems={setItems} itemKey=‘id’ listItemContainerStyle={{backgroundColor:‘pink’}} listItemLabelStyle={{color: ‘#AAB8DB’,padding:5}} schema={{ label: ‘type’, value: ‘id’ }} /> {/ </ScrollView> */} </View>

just use this with optimized flatlist

flatListProps={{ nestedScrollEnabled: true, }}

Hello,

I tried to reproduce the behavior with your code snippet but it’s working fine. https://snack.expo.io/@hossein-zare/scrollview-issue

Are you using zIndex in the style of the parent element? In short, my problem was that I was using the zIndex of <View> element that is the parent. The solution is to use zIndex as a DropDownPicker prop:

            <DropDownPicker
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setResult}
                setItems={setItems}
                zIndex={zIndex}
                placeholder={placeHolder}
            />

To anyone who can’t even get the items to show on Android:

You need to have contentContainerStyle={{ flexGrow: 1 }} added to the container ScrollView. To silence the FlatList warning - set listMode="SCROLLVIEW" in the DropDownPicker.

After some testing - nestedScrollEnabled doesn’t seem to be necessary, but nesting the picker deeper into different views might cause some issues - in some cases it should be fixable with some styling, but I didn’t go that deep. Best results would be to place it directly within a ScrollView and avoid nesting.

Hi, I had the same issue, the library provides listMode props. Adding this props solved my issue.

 listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
  }}

check this documentation for more information https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/next/advanced/list-modes#scrollviewprops

this solution should be on top, it works for me.

I think, I found the solution

in the source code check the styles. It uses position:‘absolute’ for dropdown items list, if you get rid of it, the list will be shown accurately

dropDownBox: {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
       alignItems: 'center',
       justifyContent: 'center',
       textAlign: 'center',
       position: 'relative',// It was absolute
       width: '100%'
   },

and then if you want to get rid of the gap, you need to get rid of the top: this.state.top section

{
 top: this.state.top,
 maxHeight: this.props.dropDownMaxHeight,
 zIndex: this.props.zIndex
}

Unfortunately this makes the views below to be pushed to bottom

The problem is that if the dropdown is in scrollview, and there is no content below dropdown. It does not know how much height the dropdown list can have therefore the list won’t be visible. This is only an android issue.

I resolved the scroll issue of dropdown container by using position: 'relative' in dropDownContainerStyle

dropDownContainerStyle={{
borderColor: theme.colors.gray4,
    position: 'relative', // to fix scroll issue ... it is by default 'absolute'
    top: 0, //to fix gap between label box and container
}}

This solution should be on Top. 😃 Thanks @rajAmukhliS

I resolved the scroll issue of dropdown container by using position: 'relative' in dropDownContainerStyle

dropDownContainerStyle={{
borderColor: theme.colors.gray4,
    position: 'relative', // to fix scroll issue ... it is by default 'absolute'
    top: 0, //to fix gap between label box and container
}}

you might also need to use listMode=‘SCROLLVIEW’, as in my case.

Thanks, saved me.

tried solutions here it isn’t working…