react-native-dropdown-picker: Cannot Scroll in React Native +0.71 on Android

The bug is still there. Unfortunately things are different in RN +0.71.

Can someone do these?

1. Install v5.4.6
2. Open and Edit ./node_modules/react-native-dropdown-picker/src/components/Picker.js
3. Unimport FlatList and ScrollView from react-native
4. Add the following line

   import { FlatList, ScrollView } from 'react-native-gesture-handler';
   

5. Run your app

please check below link #57

This was somewhat helpful:

Adding the following to the DropDownPicker made it scrollable again HOWEVER it messed up all my styles when opening the dropdown, due to the position: ‘relative’.

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

dropDownContainerStyle={{
    position: 'relative',
    top: 0
}}

I hope it will help you.

I ended up going for the previously recommended react-native-element-dropdown, which was less of a hustle than restyling the whole screen.

I strongly recommend switching to react-native-element-dropdown.

It is actively maintained and offers many advantages over this package. For instance:

• No scroll issues
• No zIndex issues
• Supports closing the dropdown by pressing outside of it or by pressing the back button, out of the box
• Less boilerplate code

What works for me:

1. Install 2.9.0+ react-native-gesture-handler

yarn add react-native-gesture-handler

1. Wrap the RootView in the App.tsx

import {GestureHandlerRootView} from 'react-native-gesture-handler';

function App() {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      ...
    </GestureHandlerRootView>
  );
}

export default App;

1. Install the beta.1 version

yarn add react-native-dropdown-picker@5.4.7-beta.1

1. Kill the app and restart cache

yarn start --reset-cache
yarn android

We had the issue with the dropdowns showing up behind other screen elements

updating to beta version and adding the below to the dropdowns fixed it for us

<DropDownPicker
...
  dropDownContainerStyle={{
      position: 'relative',
      top: 0
  }}
/>

Please try beta.1

1. npm uninstall react-native-dropdown-picker
2. npm i react-native-dropdown-picker@5.4.7-beta.1

Removing zIndex and minHeight from styling solved my problem. incase you are worried about the dropdown list being hidden behind another component. Then give <DatePicker> an absolute position and you will have dropdowns coming above other component so your ui will also look good.

please check below link #57

This was somewhat helpful:

Adding the following to the DropDownPicker made it scrollable again HOWEVER it messed up all my styles when opening the dropdown, due to the position: ‘relative’.

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

dropDownContainerStyle={{
    position: 'relative',
    top: 0
}}

I hope it will help you.

I ended up going for the previously recommended react-native-element-dropdown, which was less of a hustle than restyling the whole screen.

Thanks, for me, only adding listMode=“SCROLLVIEW” was enough. I recommend this plugin, I can do a gist of a nice single/muliple picker with icons/images and more if wanted.

@hossein-zare It worked really well for me. Not sure if anyone else has tested it yet.

---

@LeQuy-123

gotta make sure using patch-package to save the change in node modules

The release is already in v5.4.7-beta.1 and seems like @hossein-zare is about to release it to a new stable version

please check below link https://github.com/hossein-zare/react-native-dropdown-picker/issues/57

Any solution regards this scroll issue

No nothing.

If no fix is provided, I’m obliged to use another package.

The bug is still there. Unfortunately things are different in RN +0.71.

Can someone do these?

1. Install v5.4.6
2. Open and Edit ./node_modules/react-native-dropdown-picker/src/components/Picker.js
3. Unimport FlatList and ScrollView from react-native
4. Add the following line

   import { FlatList, ScrollView } from 'react-native-gesture-handler';
   

5. Run your app

Thank you, but it worked for me only in IOS devices not for Android. Also it works in android device for multiselect dropdown when I select an option the scroll start working. But work fine in IOS. Please @hossein-zare help me to fix this issue??

Here is my package.json:

“react-native”: “0.73.4”, “react-native-dropdown-picker”: “^5.4.7-beta.1”, “react-native-gesture-handler”: “^2.9.0”,

If @danielnmai 's solution works for everyone, I’ll release a new version.

I strongly recommend switching to react-native-element-dropdown.

It is actively maintained and offers many advantages over this package. For instance:

• No scroll issues
• No zIndex issues
• Supports closing the dropdown by pressing outside of it or by pressing the back button, out of the box
• Less boilerplate code

even this is not scrolling when used inside view with flexbox. working when used as the first ui element inside the parent element.

Guys, Is there any proper solution for this? I can’t scroll through the dropdown on Android

i’m also having the same scroll issue with android on react native 0.71.2.

I was facing the same issue , i was using it inside of scrollView, the dropdownpicker was working well in IOS but on android the scroll the dropdownpicker was not working so i applied nestedScrollEnabled in parent scrollView or flatlist , then the scroll issue resolved on android

If @danielnmai 's solution works for everyone, I’ll release a new version.

It works ,but not in modal view. Please test it also.

Hi @OmarBakr2020

Install the latest version of the react-native-gesture-handler package. (If it’s scrollable, Skip installing another version) Make sure you’ve not violated the Avoid inappropriate styles rule.

My advice is to try the package without applying additional styles. If it works, It means your styles are inappropriate.

The bug is still there. Unfortunately things are different in RN +0.71.

Can someone do these?

1. Install v5.4.6
2. Open and Edit ./node_modules/react-native-dropdown-picker/src/components/Picker.js
3. Unimport FlatList and ScrollView from react-native
4. Add the following line

   import { FlatList, ScrollView } from 'react-native-gesture-handler';
   

5. Run your app

this work for me gotta make sure using patch-package to save the change in node modules

We are too deep with this dropdown we cant migrate easily - did anyone find solution for it?

Same problem, when the <Picker> is chilldren of a <ScrollView> the scroll is not working on the picker… <ScrollView scrollEnabled={true} nestedScrollEnabled={true} > <DropDownPicker /> //scroll only working is scrollEnalbed is set to false. And then, I cannot scroll in my view, so.... </ScrollView>

import { ScrollView } from ‘react-native-gesture-handler’

not working

Can anyone help me? I also can’t scroll it on Rn 0.71. I can use zIndex to fix this issue about its shown behind the other elements, but still not scroll. I must set height to containerStyle to can scroll but UI isn’t right

Any solution regards this scroll issue

If you remove the zIndex added to some styling properties the scrolling works but it will be shown behind the other elements, in my case the containerStyle solved the problem of the dropdown shown behind other elements but i cannot scroll, what i couldn’t fix was to be able to have both things working on Android. The last resource was to change the position to relative but then if you continue the scrolling it will match the one of the screen and you will be to able to scroll both at the same time + a dropdown in the bottom will not show the content directly…

In my case we also took the decision to move to another library