Cannot Scroll in React Native +0.71 on Android

[n-ii-ma]

For some weird reason scrolling is no longer possible on Android in React Native +0.71. The only way I was able to scroll was to set the listMode to MODAL which of course is no solution whatsoever.

On iOS there's no such issue.

Along with zIndex issues and now scrolling, I'm afraid I'm obliged to use another library.

[alelaru]

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

[Akilramki]

Any solution regards this scroll issue

[n-ii-ma]

Any solution regards this scroll issue

No nothing.

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

[searain91]

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

[Akilramki]

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

[Bileeta123]

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

[omarbakr2020]

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

[n-ii-ma]

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

[Bileeta123]

import { ScrollView } from 'react-native-gesture-handler'

not working

[Kaherdin]

Same problem, when the is chilldren of a the scroll is not working on the picker... ` <ScrollView scrollEnabled={true} nestedScrollEnabled={true}

//scroll only working is scrollEnalbed is set to false. And then, I cannot scroll in my view, so.... `

[Bileeta123]

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.

[SaltyBait]

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.

[TomasSestak]

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

[hossein-zare]

Hi all,

Please create a snack, I'll try to help you if possible.

[Kaherdin]

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.

[TomasSestak]

Hi all,

Please create a snack, I'll try to help you if possible.

https://github.com/TomasSestak/dropdown-picker-scroll-issue

[hossein-zare]

Please install v5.4.5 and run your app without workarounds. Note that some issues are similar but not exactly the same, Most likely a zIndex issue.

[omarbakr2020]

Hey, @hossein-zare Any updates on this bug? It's happening on Android

[hossein-zare]

Hi @OmarBakr2020 Install the latest version (v5.4.5)

[hossein-zare]

@OmarBakr2020 Your code is impossible to be debugged for me and others. Try to make it as simple as possible, Create a Snack

[hossein-zare]

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

[TomasSestak]

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

Works for me aswell

[omarbakr2020]

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

Still not working..

[hossein-zare]

Beta version with react-native-gesture-handler

npm i react-native-dropdown-picker@5.4.7-beta.0

[TomasSestak]

imma test it

[Bileeta123]

Beta version with react-native-gesture-handler

npm i react-native-dropdown-picker@5.4.7-beta.0

scrolling is still not working for me😔

[nrlnv]

@hossein-zare works when changed inside node_modules, but android crashes when install beta version

Error: Requiring module "node_modules/react-native-dropdown-picker/node_modules/react-native-gesture-handler/src/index.ts", which threw an exception: Invariant Violation: Tried to register two views with the same name RNGestureHandlerRootView

[TomasSestak]

Beta version with react-native-gesture-handler

npm i react-native-dropdown-picker@5.4.7-beta.0

Also not working for me

[hossein-zare]

@TomasSestak What is the error message?

[hossein-zare]

Please try beta.1

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

[Joel-SD]

Please try beta.1

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

Oh nicee, this fix my problem

[TomasSestak]

Please try beta.1

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

hmmm not working in provided repo

[alelaru]

This happened in my case and i solved it this way using R 18.2.0, RN 0.71.4 and Dropdown-Picker 5.4.7-beta.0:

I am using a KeyboardAwareScrollView and inside i have TextInputs, Toggle buttons and dropdown pickers maybe you have one of these problems:

Problem 1: In my case the dropdown was shown behind other elements (I managed to bring the dropdown to the front by using containerStyle setting a zIndex when opened, this gave a zIndex directly to the Picker component

Problem 2: The scrolling it does work but in a very strange way, you can see in my Snack that scrolling works only at the bottom of the View if you drag close to the element "coco", try it several times and its gonna scroll eventually -> https://snack.expo.dev/@alelaru/dropdown-picker

Problem 3: In my case i have a KeyawareScroll and inside elements (Toggles / Textinputs -> which makes it bigger than the screen size) plus the dropdowns which have another ScrollView, when i managed to scroll (By clicking close to the bottom of the View) if i reached the end, then my Keyawarescrollview will scroll too.

Solution: Looking at the code i removed the "nestedScrollEnabled" from the ScrollView inside the Picker component because i dont expect to have long names inside there and maybe those properties in different Scrollviews mess everything up, i can scroll in the whole view and it does not keeps scrolling after reaching top or bottom. It works good on Android and IOS and im using the latest beta version

Regardless if the scrolling is fixed removing the nestedScroll im not sure because in the Snack i used the latest non beta Version available, somebody must try it. From my experience this looks like an issue with the ScrollView, @hossein-zare maybe you can try using KeyAwareScrollbar instead of ScrollView, we try to avoid using the last one alone because it creates problems most of the times

[omarbakr2020]

Hey @hossein-zare . The issue for scrolling through the dropdown component is resolved, but right now, I cannot click on any item in the dropdown, I tried to add a z-index to many different aspects of the component, such as (dropDownConatinerStyle, ContainerStyle, style) but nothing of these worked out. Could you please check this out?

Is there a specific package or version should I install after the new beta version for react-native-dropdown-picker?

[hossein-zare]

Hi again,

@OmarBakr2020 Unfortunately I can't run React Native because Google doesn't let me download dependencies. You can create an Expo Snack and reproduce the behavior.

[Joel-SD]

Hey @hossein-zare . The issue for scrolling through the dropdown component is resolved, but right now, I cannot click on any item in the dropdown, I tried to add a z-index to many different aspects of the component, such as (dropDownConatinerStyle, ContainerStyle, style) but nothing of these worked out. Could you please check this out?

Is there a specific package or version should I install after the new beta version for react-native-dropdown-picker?

had the same issue, but fixed trying diferents zIndex's even in the tags around(parents), i not saying that would fix yours, but dont go crazy with index's, also try using negative values in the index.

[rdhox]

Is there any update to come for solving this issue?

[TomasSestak]

I tried everything but was at the end forced to downgrade to Expo 47 with the RN 0.70.5

[KrisLau]

Please try beta.1

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

@hossein-zare I've been using a workaround for this issue since like RN v0.69 or 0.68 (on 0.70.6 currently) by using MODAL mode for Android so I really appreciate this! react-native-dropdown-picker@5.4.7-beta.1 worked fantastic for my project.

Just a tip for anyone else having issues it might have to do with a couple things:

• Add nestedScrollEnabled={true} & keyboardShouldPersistTaps={'always'} to parent ScrollViews
• If you have multiple pickers it might also be an index issue. So add a parent View around your picker then set the style for that parent View to zIndex: 1 when the picker is open and to zIndex: 0 when closed. Even if you dont have multiple it might be worth a shot
• The other thing i have in my code which might be related (tbh I don't remember why I initially added it) is zIndex on the dropdown is set to 1000 and zIndexInverse is set to 7000

[danielnmai]

Got this error after updating to beta.1 version

[danielnmai]

What works for me:

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

   yarn add react-native-gesture-handler

2. Wrap the RootView in the App.tsx

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

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

export default App;

3. Install the beta.1 version

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

4. Kill the app and restart cache

yarn start --reset-cache yarn android

[LeQuy-123]

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

[hossein-zare]

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

[KrisLau]

@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

[mrdigitalau]

beta 1 worked for me too THANK YOU sir

[Sadikalivk]

This may break your design , but may be for some case this will help

containerStyle={open ? { height: 260 } : { height: 60 }}

[omarbakr2020]

Hey @hossein-zare , Does your solution requires a specific version for react-native-gesture-handler in the root project?

Because right now, I'm able to scroll through my dropdown list but can't click on any element. Anyone can help with this?

I use these versions:

react-native-dropdown-picker: 5.4.7-beta.1 react-native-gesture-handler: 1.10.3

[danielnmai]

@OmarBakr2020 believe the gesture handler version has to be 2.9.0+. See this

[omarbakr2020]

@danielnmai hmm, Is step 2 needed in order to make it work? If so, Can you help me with where to put this exactly? Here's my App.tsx file

Note this is before upgrading to 2.9.0

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import 'react-native-gesture-handler';

// Import React and Component
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { MenuProvider } from 'react-native-popup-menu';
import { Provider } from 'react-redux';
import store from './src/store';

import LandingStack from './src/navigation/auth';
import Auth from './src/components/auth-provider';
import ToastProvider from './src/components/toast-provider';
const App = () => {
  return (
    <Provider store={store}>
      <ToastProvider>
        <Auth>
          <MenuProvider>
            <NavigationContainer>
              <LandingStack />
            </NavigationContainer>
          </MenuProvider>
        </Auth>
      </ToastProvider>
    </Provider>
  );
};

export default App;

[danielnmai]

@OmarBakr2020 It has to be the outermost component for it to work. Like this:

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

export default App;