CODEWITHSUNDEEP
react-nativereact-native-flatlistreact-native-scrollviewreact-native-dropdown-picker
Jeesmon Joy
Jeesmon Joy

Reputation: 246

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

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..

here is a image

Upvotes: 4

Views: 20244

Answers (7)

Gowshik M
Gowshik M

Reputation: 11

flatListProps={{nestedScrollEnabled:true}} use this prop in your DropdownPicker

Upvotes: 1

Mark
Mark

Reputation: 73

For anyone experiencing issues with the dropdown picker not scrolling when used within a react-native-modal modal. To fix try putting propagateSwipe prop as true onto the modal and it should now allow your picker to be scrollable

Upvotes: 1

Cazcade
Cazcade

Reputation: 1

I found out that giving flexDirection: row to the parent will make the dropdown picker scroll not to work

Upvotes: 0

O. O
O. O

Reputation: 1

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

Upvotes: 0

Mateus Enrick Pitura
Mateus Enrick Pitura

Reputation: 51

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

Upvotes: 0

Yashwant Sandey
Yashwant Sandey

Reputation: 61

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.

Upvotes: 0

Manojkanth
Manojkanth

Reputation: 1169

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

Upvotes: 1

Related Questions