Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nothing happening after clicking DropDownPicker

See original GitHub issue

Nothing is happing when I clicked on DropDownPicker.

<DropDownPicker
                              items={[
                                  { label: 'Select Issue Level', value: 'Select Issue Level', icon: () => <Image source={myImages.select_issue} style={styles.iconStyle} /> },
                                  { label: 'Very important', value: 'Very important', icon: () => <Image source={myImages.select_issue} style={styles.iconStyle} /> },
                                  { label: 'Medium level', value: 'Medium level', icon: () => <Image source={myImages.select_issue} style={styles.iconStyle} /> },
                                  { label: 'Information', value: 'Information', icon: () => <Image source={myImages.select_issue} style={styles.iconStyle} /> },
                              ]}
                              value={issue}
                              containerStyle={{ marginTop: 20 }}
                              labelStyle={styles.labelStyle}
                              style={{ backgroundColor: '#D8D8D8', height: 70, borderRadius: 14 }}
                              itemStyle={{
                                  justifyContent: 'flex-start'
                              }}
                              ArrowDownIconComponent={({ style }) => <Image source={myImages.arrow_down} style={{
                                  margin: 10,
                                  justifyContent: 'center',
                                  alignItems: 'center',
                              }} />}
                              placeholderStyle={{
                                  fontSize: 15,
                                  fontFamily: "Montserrat-Regular",
                                  fontWeight: '700',
                                  color: '#30313F'
                              }}
                              onChangeItem={item => setIssue(item.value)}
                          />

I just updated

"react-native-dropdown-picker": "^5.1.19",

What’s wrong here ?

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:26 (3 by maintainers)

Top GitHub Comments

4reactions

narumolpcommented, Jul 1, 2021

I am having the same issue here. When I open a dropdownpicker and click on one of the items to select, a component underneath it that actually receives the touch. I have setOpen, setValue and onChangeValue set as props on the picker.

3reactions

gessic-appscommented, May 29, 2021

I’m having the same issue. The problem is that when the picker is drawn over other items, only on android, you can’t click the drop down. For example, here’s a simple reproduction:

<View style={{flex: 1,zIndex: 1,  alignItems: 'flex-end', }}>
  <DropdownPicker />
<View>
<View style={{flex: 5, zIndex: 0}} >
  <Text> some text </Text>
</View>

If I remove flex-end from the dropdown parent and increase it’s flex, then the entire dropdown is clickable, and it is drawn inside its own view.

When adding flex-end, it doesnt work any more on android , even though the zindex shows its being drawn above the other view, it’s just not clickable.

I’ve tried solutions in other issues but can’t seem to figure this out yet.