Does this work with expo managed flow? dropDown Items not selecting.

[Jsh007]

dropDown Items not selecting: When I press to select a dropdown Item, it doesn't get selected and the dropdown remains open. Expo version: 38.0.8

[hossein-zare]

Hello,

Send your code please.

[cescoallegrini]

Hi @hossein-zare, same here. I tried both on Android and iOS and the bug seems to happen just on Android.

Device: OnePlus Nord Android version: 10 Build number: Oxygen OS 10.5.8

<DropDownPicker
    items={[ { ... } ]} // just value and label
    placeholder="Filter by category"
    onChangeItem={item => console.log('selected', item.value)}
    containerStyle={{ height: 70 }}
    dropDownMaxHeight={500}
    style={{ paddingHorizontal: 24, backgroundColor: colors.primary, borderWidth: 0 }}
    itemStyle={{ height: 70, paddingHorizontal: 24, justifyContent: 'flex-start', borderBottomWidth: 2, borderBottomColor: '#e7e7e7' }}
    dropDownStyle={{ backgroundColor: colors.whiteDark, paddingHorizontal: 0, paddingBottom: 0, borderBottomWidth: 0 }}
    labelStyle={{ fontFamily: 'Neue-Medium', fontSize: 16, lineHeight: 16 }}
    arrowSize={20}
/>

Thanks for the support and for the nice lib!

UPDATE: onChangeItem seems not to work when there's no content below the component

[MisaelMa]

I have the same problem in android 9, some solutions?

[mikeslinkman]

Encountering the same on Android as well, though it does not seem limited to android 9 only

[ShiromMakkad]

I had the same problem. I solved it by putting a view underneath it with a height taller than the dropdown is when open. It seems there must be some element under the dropdown.

<DropDownPicker
                    items={[
                        { label: 'USA', value: 'usa' },
                        { label: 'UK', value: 'uk' },
                        { label: 'France', value: 'france' },
                    ]}
                    defaultValue='usa'
                    containerStyle={{ height: 40 }}
                    onChangeItem={item => {alert(item.value)}}
                />
                <View style={{height: 200}} />

[shivamkj]

Please fix this issue as it makes it unusable on android, as we can't select any item.

[naldyn]

Please fix this issue as it makes it unusable on android, as we can't select any item.

containerStyle={{ ... zIndex:5000 }}

[Vaneste]

Please fix this issue as it makes it unusable on android, as we can't select any item.

Same here, no chance with @naldyn or @ShiromMakkad workaround :(

Please note that I've been able to select items from the dropdown by commenting containerstyle (doc section : zIndex conflicts (Untouchable Items, Overlapping pickers), but my containerstyle has only a height value, nothing more, so that's quite strange.

Without containerstyle property it seems quite difficult to to design the picker correctly :(

[Vaneste]

Ok, I finally managed to get it working :)

I had to :

• move heigth from containerSize to style. => got it working but with placeholder invisible and arrow misplaced.

• add flex-direction:"row" to containerStyle

Voilà !

[ghost]

First of all, thanks for putting the time into this lib. It works great for me on iOS but I'm stuck with this same issue and it's the only thing holding me up from pushing this build. Any updates?

Thanks!

[hossein-zare]

Hello again, 😶

I'm really sorry for the late response, Github didn't notify me about comments in this issue.

This issue depends on your parent elements, if they have backgroundColor, borderColor props, The dropdown box will be visible but not touchable. I've used position: absolute in the package that's why React Native doesn't let the dropdown box be touchable. I'm not 100% sure if that's why it's not working.

Can someone please add full component code (DropDownPicker itself isn't enough) and an expo snack? 🤔

Similar issue: https://github.com/hossein-zare/react-native-dropdown-picker/issues/204

[ghost]

After I stopped being an idiot and learned how to read, I read your notes about this issue and found the issue. If memory serves, it was having a borderwidth/color on the drop down container style. Moving those to a different style resolved it for me.

[sheikx1221]

I was able to make this work !

This is one difficult component to handle Inside the dropdown is a scrollView, that will not work if height is given implicitly, therefor this configuration did work... Also managed to remove borderWidth from the component.

            <DropDownPicker
                    items={[
                        { label: "Relevenace", value: "Relevance" },
                        { label: "Price High to Low", value: "Price High to Low" },
                        { label: "Price Low to High", value: "Price Low to High" }
                    ]}
                    defaultValue={filterSelected}
                    onChangeItem={(item) => {
                        console.log(item);
                        setFilterSelected(item.value)
                    }}
                    containerStyle={{
                        flex: 0.4
                    }}
                    style={{
                        width: 150,
                        borderWidth: 0
                    }}
                    labelStyle={{
                        fontSize: 13,
                        fontFamily: 'NotoSans-Bold',
                        color: colors.primary,
                    }}
                >
            </DropDownPicker>

[erkankarabulut]

I didn't specify any static height(but I have flexWrap: 'wrap', which I can't remove really since it would mess up my UI) and removed background color/width, borderWidth. And still doesn't work. Are there any other updates on this issue?

[eo-sdev]

Same issue on Android. Are there any updates?

[thanhdevapp]

Same issue on Android. Are there any updates?

[mikehardy]

@thanhdevapp https://hackernoon.com/i-thought-i-understood-open-source-i-was-wrong-cf54999c097b

[Nestor231]

After I stopped being an idiot and learned how to read, I read your notes about this issue and found the issue. If memory serves, it was having a borderwidth/color on the drop down container style. Moving those to a different style resolved it for me.

Hi! I'm stuck with this issue here on my end. May I ask what did you mean by moving to a different style? Thanks for the reply in advance.

This issue depends on your parent elements, if they have backgroundColor, borderColor props, The dropdown box will be visible but not touchable.

@hossein-zare , i'd like to ask, by parent elements, does it mean the immediate parent elements of the picker? or does it include the parents of the parent element/component as well?

Same as the other guys above, I'm only encountering this issue on Android, it works seamlessly in iOS

[mikehardy]

@Nestor231 probably https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules#avoid-inappropriate-styles

[Nestor231]

@mikehardy Yeah I saw this, thing is i didn't even have those styles on my picker's immediate parent. nor have i set those styles in the containerstyle property

[hossein-zare]

@Nestor231 All of your nested containers should follow the rules.

See: https://github.com/hossein-zare/react-native-dropdown-picker/issues/450#issuecomment-976497649

[Nestor231]

@hossein-zare Thanks! I got it working now, For those having the same issues, posting this link for reference

[manawaraquevix]

I solved it like this https://github.com/hossein-zare/react-native-dropdown-picker/issues/204#issuecomment-1375368537