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.

[omarbakr2020]

Thanks @danielnmai . I did that, but unfortunately, It's still not working. I can't click on any option in the dropdown when it's open

Here's my code for the dropdown. Can you check it, please?

FYI: I'm using react-native : 0.64.4

const renderLabel = (label: string) => {
    return (
      <View style={tw`mt-[12px] ml-[16px]`}>
        <Text>{label}</Text>
      </View>
    );
  };

  const renderRadio = (item: any, props: any, hasPadding: boolean) => {
    const { label, value, parent } = item;
    const padding = hasPadding ? '30px' : '16px';
    let checked = 'unchecked';
    if (parent) {
      checked = value === sortFilterData[parent] ? 'checked' : 'unchecked';
    } else {
      checked = value === sortFilterData['category'] ? 'checked' : 'unchecked';
    }

    return (
      <TouchableOpacity onPress={() => props.onPress(props)}>
        <View style={tw`flex flex-row ml-[${padding}]`}>
          <RadioButton.Android
            value={value}
            status={checked}
            color="gray"
            onPress={() => {
              handleSortFilterData(parent || 'category', value);
            }}
          />
          <View style={tw`mt-[11px]`}>
            <Text>{label}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

<DropDownPicker
              placeholder="Sort By"
              open={openSortFilter}
              value={sortFilter}
              items={sortFilterItems}
              setOpen={handleOpenSortFilter}
              renderListItem={(props) => {
                const { item } = props;
                const { label, value, parent } = item;
                const isParent =
                  value === 'price' || value === 'date' || value === 'ratings';

                if (isParent) {
                  return renderLabel(label as string);
                } else {
                  return renderRadio(item, props, true);
                }
              }}
              setValue={setSortFilter}
              setItems={setSortFilterItems}
              style={[
                tw`max-w-30 w-25 h-10 font-manrope font-normal shadow-md border-transparent`,
                styles.filterDropdown,
              ]}
              dropDownContainerStyle={tw`w-50 mt-1 shadow flex shadow-md border-gray-300 border-opacity-25 rounded-lg`}
            />

[danielnmai]

@OmarBakr2020 what does your package.json look like? Make sure you have 2.9.0+ for the gesture handler

    "react-native-dropdown-picker": "5.4.7-beta.1",
    "react-native-gesture-handler": "^2.9.0",

Being unable to click on an item in the dropdown I don't think is related to this scrolling issue.

[KrisLau]

@OmarBakr2020 Create a snack repro. If it works in the snack, it is likely an issue with your setup / dev environment.

[hossein-zare]

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.

[heinhtetaungg]

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

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

[omarbakr2020]

Hey @hossein-zare , I followed your advice and apparently that there was an issue with my styles. It's working on my end right now, without needing to apply @danielnmai solution (Wrapping my App.tsx file with <GestureHandlerRootView> component. We can wait for more testing from other users before releasing a more stable version of it.

My list of packages:

 "react-native": "0.64.4",
  "react-native-gesture-handler": "^2.9.0",
  "react-native-dropdown-picker": "5.4.7-beta.1",

[epicdang]

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}}>
      ...
    </GestureHandlerRootView>
  );
}

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

Wrapping the root with GestureHandlerRootView was the only way I could get it to work. Thank you!

[ohidxy]

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}}>
      ...
    </GestureHandlerRootView>
  );
}

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

this solution doesn't work for me.

But the solution of importing FlatList and ScrollView from react-native-gesture-handler inside node_modules worked for me.

"react-native": "0.71.7",
"react-native-dropdown-picker": "5.4.7-beta.1",
"react-native-gesture-handler": "^2.10.0",

[markl-vesper]

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

[avadheshdev]

@markl-vesper :- Thanks it's working.

[bwjohns4]

I'm not able to get this to work. I am using it within a KeyboardAwareScrollView. Does that matter? When I try the nestedScrollEnabled={true} it completely messes up my format, zooms the page all weird, and still doesn't work. Is there any new development on this?

[Chirag-code1]

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

[psalkowski]

So, basically there is a fix for that already in repo but splitted in two comments: https://github.com/hossein-zare/react-native-dropdown-picker/commit/05d2e7339af58c091f6248868070ba988bdc1bb2 https://github.com/hossein-zare/react-native-dropdown-picker/commit/e38ea1bded7b0e95a72cb4dea3778dfeac77eed9

I checked and it works flawlessly, but I also replaced all of our with the one from react-native-gesture-handler.

If you are looking for pach-package script, here it is:

diff --git a/node_modules/react-native-dropdown-picker/src/components/Picker.js b/node_modules/react-native-dropdown-picker/src/components/Picker.js
index e3fb93b..de2dde0 100644
--- a/node_modules/react-native-dropdown-picker/src/components/Picker.js
+++ b/node_modules/react-native-dropdown-picker/src/components/Picker.js
@@ -14,10 +14,8 @@ import {
     TouchableOpacity,
     Text,
     Image,
-    FlatList,
     TextInput,
     Dimensions,
-    ScrollView,
     Modal,
     ActivityIndicator,
     BackHandler,
@@ -25,6 +23,8 @@ import {
     StyleSheet,
 } from 'react-native';

+import { FlatList, ScrollView } from 'react-native-gesture-handler';
+
 const { height: WINDOW_HEIGHT } = Dimensions.get('window');

 import Colors from '../constants/colors';

And remember to install react-native-gesture-handler by your own.

[sumit3001]

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

Thanks, Worked for me.

[Umair-max]

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

[ninefloor]

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

It works great, thank you. I'd like to see this updated on the package soon.

[thnha]

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, work for me!

[rajpootAbubakkar]

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

[billyprg]

THIS IS THE SOLUTION TO YOUR PROBLEM If you have used zIndex in your parent view, or if you are using this dropdown inside a scroll view. add these properties to fix the issue! dropDownContainerStyle={{ position: 'relative', // to fix scroll issue ... it is by default 'absolute' top: 0, //to fix gap between label box and container borderWidth: 0.5, borderColor: Colors.Black, }} listMode="SCROLLVIEW" scrollViewProps={{ nestedScrollEnabled: true, }}

[JAYsoni1018]

solved by adding nestedScrollEnabled={true} in all above ScrollView