Items are not selectable when inside a fixed height view

[Yigityakut]

Describe the bug Items are not selectable when inside a fixed height view To Reproduce <View style={{ flexDirection: 'row', alignItems: 'center', height: 100 }}>

{Strings.chooseTime}

                    <DropDownPicker
                        items={hours}
                        defaultValue={this.state.time}
                        containerStyle={{ height: 35, width: 200 }}
                        style={{ backgroundColor: '#fafafa' }}
                        itemStyle={{
                            justifyContent: 'flex-start'
                        }}
                        dropDownStyle={{ backgroundColor: '#fafafa' }}
                        onChangeItem={item => this.setState({ time: item.value })}
                        disabled={false}
                    />

Screenshots

Expected behavior All items should be clickable

Info (please complete the following information):

• OS: Android
• Package version 3.8.0

[hossein-zare]

Hello,

Currently there's no solution for this (until ReactNative fixes the bug), Tricks can be found for the issue, so keep it open.

[eacanalg]

My fix for this bug was to dynamically change the view height when the options are displayed/hidden.

[erkankarabulut]

Any updates on this issue? Dynamically changing height of the parent view won't work in my case, since this would mess up some other components in my UI.

[manawaraquevix]

Same issue here. any update?

[ghost]

I had a similar issue implementing a flatlist with items that contained a dropdown which overflowed past the item row's view. The solution/workaround I found for this was to change the RenderListItem.js in node modules, wrapping the component in a TouchableOpacity from 'react-native-gesture-handler' instead of the one from 'react-native'.

https://github.com/hossein-zare/react-native-dropdown-picker/blob/1bd0d40b626e6cebbc0a8d20569e74c82589e645/src/components/RenderListItem.js#L9

[parmarkamlesh]

same issue +1

[rohandavid]

@yael-montufar hi i tried your solution but after i replace the touchable opacity from the gesture handler the items are not selecting at all, also tried replacing the touchable opacity with a base button from gesture handler, still the picker is not clickable outside the parent view, any other workarounds u know of? thanks in advance, any help would be appreaciated

[seabravitor]

Same issue +1

[ghost]

@rohandavid I forgot to mention one detail regarding my solution. I believe each item in a FlatList has a default z-index for the row containers (item parent container) which cannot be overwritten (actually there is a way but it causes some undesirable behavior). The next item always having precedence over the one before and so on (i.e. list item indexes => [0,1,2,3,4,5]). I got passed this restraint by inverting my FlatList, essentially rearranging the items so that the first item has precedence over the next (i.e. inverted list item indexes => [5,4,3,2,1]), allowing the overflowing drop-down to overlap the next item (also had to make up for this by reversing the data passed to the list). After doing this is when I came across the issue which I solved in my last comment.

[Aexonic-Abhishek]

getting same issue

[ThomasHaas15]

Same issue +1

[Sofianel5]

Same issue, though it sometimes works depending on the index of the currently selected item.

[eo-sdev]

Same issue. Are there any updates?

[parmarkamlesh]

i don't know. i left that job

[manawaraquevix]

I have same problem. My items have label and id keys only. I added value key now its working fine. items should be [{"label": "any_label", "value": "any_value"}, {"label": "any_label", "value": "any_value"}]