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

Question

Drop down scroll is not working inside another scroll in react-native-dropdown-picker

I already tried giving

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

 }}

to the as a prop. But still not working.

here is my code

<SafeAreaView edges={['right', 'left', 'bottom']} style={styles.container} >
                <ScrollView>
                    <View style={[globalStyles.contentWrap, { marginBottom: 16, height: 1000 }]}>
                        <View>

                            <View style={{ zIndex: 10 }}>

                                <DropDownPicker
                                    listMode="SCROLLVIEW"
                                    placeholder="Select your restaurant"
                                    style={{
                                        borderColor: Colors.borderColor,
                                        backgroundColor: '#fff',
                                        borderWidth: 1,
                                        paddingHorizontal: 12,
                                        paddingVertical: Platform.OS === 'ios' ? 12 : 6,
                                        fontSize: 16,
                                        borderRadius: 5,
                                        marginTop: 8,
                                        marginBottom: 16,
                                    }}
                                    dropDownContainerStyle={{
                                        borderColor: Colors.borderColor,
                                        color: Colors.black1,
                                        fontSize: 16,
                                        borderRadius: 5,
                                    }}
                                    placeholderStyle={{
                                        color: '#696969',
                                        fontSize: 16,
                                    }}
                                    textStyle={{
                                        fontSize: 16,
                                    }}
                                    dropDownMaxHeight={240}
                                    open={open}
                                    value={value}
                                    items={items}
                                    setOpen={setOpen}
                                    setValue={setValue}
                                    setItems={setItems}
                                    schema={{
                                        label: 'name',
                                        value: 'id',
                                    }}
                                />
                            </View>
                        </View>

                    </View>
                </ScrollView>
            </SafeAreaView>

The scroll bar shows in the dropdown but its not scrollable. here is a reference image..

I think you need to move the dropdown outside of the scrollView, because it's not detecting the target scrollable item (I mean the scrollView or the drop down) — Jamal, Dec 09 '21 at 07:40
There are many other input fields in the screen, so moving it outside wont fix the problem , The from should be scrollable, — Jeesmon Joy, Dec 09 '21 at 08:38
Add "nestedScrollEnabled={true}" property to the internal ScrollView (dropdown) and check it — Jamal, Dec 09 '21 at 08:46
@Jamal Tried giving nestedScrollEnabled={true} to the component not fixed — Jeesmon Joy, Dec 09 '21 at 09:00

Manojkanth · Answer 1 · 2021-12-09T09:16:47.597

1

As per their official documentation, you can't have a inside scrollview.

Notes#

The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning. If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise you have to use the MODAL mode.

See this link: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/list-modes

edited Dec 09 '21 at 09:16

answered Dec 09 '21 at 07:55

Manojkanth

1,071
11
27

Tried giving nestedScrollEnabled={true} to the component not fixed – Jeesmon Joy Dec 09 '21 at 09:00
1

@JeesmonJoy sorry, I have updated the answer. please check the link – Manojkanth Dec 09 '21 at 09:17

score 0 · Answer 2 · answered Sep 21 '22 at 07:35

0

If you are facing issue with nested scrolling. Use ScrollView of react-native-gesture-handler with nestedScrollEnabled={true}. It works better in android. You can also patch react-native-dropdown-picker for that.

answered Sep 21 '22 at 07:35

Yashwant Sandey

61
3

score 0 · Answer 3 · answered Jul 09 '23 at 18:02

In my case I have a ScrollView with a Flatlist inside, to solve this I added the property nestedScrollEnabled={true} to FlatList, like:

<FlatList
    nestedScrollEnabled={true}

It worked for me, but the device keeps giving a warning. So even though it works, I don't know if it's the best solution

score 0 · Answer 4 · answered Aug 30 '23 at 10:37

For anyone who stumbles on this, editing the nodemodules for react-native-dropdown-picker fixed this for me.

See this comment from the package owner https://github.com/hossein-zare/react-native-dropdown-picker/issues/647#issuecomment-1462990359

There's a 5.4.7-beta.1 version you can install if you don't want to maintain a patch with patch-package

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

4 Answers4