Nothing happening after clicking DropDownPicker

[manishpatelgt]

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 ?

[tomzhou87]

Same problem!

[Vir-al]

For me, it is opening the dropdown component. But not able to click on the items of the dropdown.

I am giving elevation to the parent component of the dropdown. Does that cause any issues?

Any help will be appreciated. (will try to give the reproducible demo if I can)

[hossein-zare]

Hello,

I tested the package, it's working fine. @Vir-al Please try to create a simple snack.

[KubilayKerim]

I have the same problem its working fine on device and not in emulator

[xsephtion]

Same problem, doesn't work on device and emulator.

[KubilayKerim]

I have the same problem its working fine on device and not in emulator

btw my version was 4.0.2 i did upgrade 4.0.9 still same figure out mine was a zIndex issue is weird since it was working on android normally and i only changed data to that page I gave indexes to pickers like 5000 4000 3000 idk where i read that it was a fix for android but its not working anymore i guess

[hossein-zare]

Please send me a example (snack) to reproduce the behavior, And 4.x versions have been deprecated. Upgrade to v5.1.19.

[SRJDEV]

Same issues, Nothing happening after clicking.

[gessic-apps]

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.

[gessic-apps]

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.

Actually, updating to the latest version fixed this. I was using v 5.0.0, now updated to v 5.1.19

Thanks!

[bala2explore]

Try with onChangeValue onChangeItem wont work.

[xsephtion]

I fixed this by adding setOpen and setValue props.

<DropDownPicker
  value={selected}
  items={list}
  open={open}
  setOpen={setOpen}
  setValue={setSelected}
  onChangeValue={(value)=>{
    setErrorSelection(false)
  }}
/>

[saschageyer]

still experiencing the same issue in v5.1.19 items not clickable on Android (OnePlus)

[xsephtion]

For those people who's still experiencing this problem you can try to check my example on how to make dropdown picker work:

https://snack.expo.io/@xsephtion/example-dropdownpicker

[Einere]

in my case

• FLATLIST listMode in Expo snack works fine.
• FLATLIST listMode in react-native CLI not working.
• MODAL listMode in react-native CLI works fine.

works means that is able to touch list item, setValue is triggered. i think maybe there is another factor exist like styling (not platform). because official document notice do not use inappropriate style. but i don't know what factor cause malfunction... 😭 so i just using it with MODAL listMode...

in addition, if you developing Android, try elevation style property. it is redraw style property like backgroundColor, border, etc. (which docs tells inappropriate style)

[satyamdorville]

Hello

I ve got the same issue only on android

<View style={[
      styles.crenContainer,
        // styles.shadow, 
      { backgroundColor, height: openDate? 520 : openHour? 580 : 280 }]}>

        <Text style={[styles.dateText, { color: textColor, fontFamily:'geometria-regular' }]}>
          Sélectionnez la date
        </Text>

        <DropDownPicker
          open={openDate}
          value={selectedDay}
          items={daystobook}
          setOpen={setOpenDate}
          setValue={setSelectedDay}
          setItems={setDaystobook}
          placeholder="Date ..."
          maxHeight={300}
          style={[styles.dropdown]}
          onChangeValue={item => alert(item)}
          labelStyle={styles.labeldropdown}
          textStyle={{fontFamily:'geometria-regular', color:"white"}}
          placeholderStyle={styles.labeldropdown}
          zIndex={3000}
          zIndexInverse={1000}
          dropDownContainerStyle={styles.dropdown}
        />

        <Text style={[styles.hourText, { color: textColor,  fontFamily:'geometria-regular', marginTop: openDate? 120 : 20 }]}>
          Sélectionnez l'heure 
        </Text>
        <DropDownPicker
          open={openHour}
          value={selectedHour}
          items={hourstobook}
          setOpen={setOpenHour}
          zIndex={2000}
          zIndexInverse={2000}
          setValue={setSelectedHour}
          setItems={setHourstobook}
          textStyle={{fontFamily:'geometria-regular', color:"white"}}
          placeholder="Heure ..."
          maxHeight={300}
          style={[styles.dropdown]}
          labelStyle={styles.labeldropdown}
          placeholderStyle={styles.labeldropdown}
          dropDownContainerStyle={styles.dropdown}
        />

crenContainer: { position:'absolute', bottom: 0, left: 0, right: 0, padding: 20, borderRadius: 10, }, dropdown: { borderColor: "transparent", backgroundColor: "#ff5050", color:'white', fontFamily:'geometria-regular' }, labeldropdown: { color: "white", fontWeight: "bold", fontFamily:'geometria-bold' }, dateText: { marginBottom: 10, fontSize: 14, color:'white', fontFamily:'geometria-bold' }, hourText: { fontFamily:'geometria-bold', marginTop: 20, marginBottom: 10, fontSize: 14, color:'white' }, btnNextContainer: { position: "absolute", bottom: 20, right: 20, borderRadius: 25, color:'white', backgroundColor: "#ff5050" }, btnNext: { height: 50, width: 50, color:'white', justifyContent: "center", alignItems: "center", },

crenText: { fontSize: 16, padding: 4, fontFamily: "geometria-regular", }, shadow: { elevation: 4, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.5, shadowRadius: 2, }, });

[hossein-zare]

zIndex conflicts (Untouchable Items, Overlapping pickers) https://github.com/hossein-zare/react-native-dropdown-picker/tree/4.x#zindex-conflicts-untouchable-items-overlapping-pickers

Many of you may have broken the Avoid inappropriate styles rule: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules/#avoid-inappropriate-styles

[satyamdorville]

@hossein-zare I think i have followed every of your recommendations. I have commented every style tag for testing purpose.... But it still doesnt click on the dropdown... only in Android I ve also tried to delete zIndex : Items still unreachable android only. PS : dropDownStyle is not recognized as a valid prop for me (?) dropDownContainerStyle is

What am i missing there ?

const CrenSelectScreen = () => {
    return (
      <View style={{ 
        position:'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      padding: 20,
      //   styles.shadow, 
        ...(Platform.OS !== 'android' && {
          zIndex: 10
      }),

        //backgroundColor, 
        height: openDate? 520 : openHour? 580 : 280 }}>

        <Text style={[styles.dateText, { color: textColor, fontFamily:'geometria-regular' }]}>
          Sélectionnez la date
        </Text>

        <DropDownPicker
          open={openDate}
          value={selectedDay}
          items={daystobook}
          setOpen={setOpenDate}
          setValue={setSelectedDay}
          setItems={setDaystobook}
          placeholder="Date ..."
          maxHeight={300}
       //   style={[styles.dropdown]}
       //   onChangeValue={item => alert(item)}
        //  labelStyle={styles.labeldropdown}
      //    textStyle={{fontFamily:'geometria-regular', color:"white"}}
        //  placeholderStyle={styles.labeldropdown}
          zIndex={3000}
          zIndexInverse={1000}
       //   dropDownContainerStyle={styles.dropdown}
        />

        <Text style={[styles.hourText, { color: textColor,  fontFamily:'geometria-regular', marginTop: openDate? 120 : 20 }]}>
          Sélectionnez l'heure 
        </Text>
        <DropDownPicker
          open={openHour}
          value={selectedHour}
          items={hourstobook}
          setOpen={setOpenHour}
          zIndex={2000}
          zIndexInverse={2000}
          setValue={setSelectedHour}
          setItems={setHourstobook}
       //   textStyle={{fontFamily:'geometria-regular', color:"white"}}
          placeholder="Heure ..."
          maxHeight={300}
   //       style={[styles.dropdown]}
     //     labelStyle={styles.labeldropdown}
       //   placeholderStyle={styles.labeldropdown}
       //   dropDownContainerStyle={styles.dropdown}
        />

        {
          !openDate &&
          <View
            style={[
              styles.btnNextContainer,

              { opacity: selectedDay === "" || selectedHour === "" ? 0.5 : 1 },
            ]}
          >
            <TouchableOpacity
              onPress={() => {

                setCrenModalVisible(false)

                setstripeAccIdRestoValue(myintcust.stripeAccId)
                navigation.navigate(goto, {
                  restoId: route.params.restoId,
                  bookingType: bookingType,
                  day: moment.tz(selectedDay, "YYYY-MM-DD", "America/Martinique").format(),
                  hour: selectedHour,
                })
              }}
              style={styles.btnNext}
              disabled={selectedDay === "" || selectedHour === ""}
            >
              <Ionicons
                name="arrow-back"
                size={25}
                color="white"
                style={styles.arrow}
              />
            </TouchableOpacity>
          </View>
        }
        {selectedDay !== "" &&
          !loading &&
          hourstobook &&
          hourstobook.length == 0 && (
            <View style={{ backgroundColor:"transparent" }}>
              <Text style={styles.textstrong}>
                Plus d'horaires disponibles ! 🤷🏽‍♂️
              </Text>

            </View>
          )}
        {loading && (
          <View style={styles.wrapindicator}>
            <ActivityIndicator size="large" color="#F50F50" />
          </View>
        )}
      </View>
    )
  }

Views embeding the one upside

return (
    <View style={[styles.container, (Platform.OS !== 'android' && {
      zIndex: 10
  })]}>
      <Modal
        isVisible={crenModalVisible}
        swipeDirection="down"
        onModalHide={() => { setOpenDate(false); setOpenHour(false); }}
        onSwipeComplete={(e) => setCrenModalVisible(false)}
        onBackButtonPress={() => setCrenModalVisible(false)}
        onBackdropPress={() => setCrenModalVisible(false)}
        style={{padding: 0, margin: 0, height: 280,
          ...(Platform.OS !== 'android' && {
            zIndex: 10
        })}}
      >
        <CrenSelectScreen/>
      </Modal>

[satyamdorville]

I setup the list mode to MODAL and it works DropDownPicker.setListMode("MODAL"); Not so nice as UX but it works

[rishiankush]

I can confirm it is working fine by adding setOpen and setValue props:

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      onChangeValue={item => console.log(item.label, item.value)}
    />
  );
}

This is working as expected. Secondly use onChangeValue instead of onChangeItem

[narumolp]

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.

[douugdev]

same issue as @narumolp, didn't even change the basic usage one:

 const [open, setOpen] = useState<boolean>(false);
const [value, setValue] = useState<any>('apple');
const [items, setItems] = useState<any>([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
]);
...
<DropDownPicker
            open={open}
            value={value}
            items={items}
            setOpen={setOpen}
            setValue={setValue}
            setItems={setItems}
            onChangeValue={item => console.log('changed')}
          />```

[P0SEID0N]

This is still an issue for me as well. Components that are "rendered" underneith the actual dropdown (with the list of items) receives the touch. I have followed every recommendation listed in the documentation and all the issues ive found here in the issue list. It creates a really awful user experience, the dropdown needs to have touch ABOVE all other elements. ZIndex doesnt seem to change anything when added.

[mikehardy]

@P0SEID0N zIndex is a lot more subtle then I thought it was, when I first attempted to use this library. Other libraries attempt to solve this by using absolute positioning (which clobbers zIndex, so it works, but then you have all the problems with absolute vs flex)

So the first step is to realize that views are rendered in a parent->child->etc hierarchy and that zIndex rules never cross hierarchies. So if you draw a dropdown from one hierarchy on another hierarchy, it doesn't matter what you do with the zIndexes if they are still only within one hierarchy.

My solution was to watch dropdown picker state (open or not) and for the one that was open, move zIndex up, while pinning everything else on the whole screen (all view hierarchies) at a lower zIndex. That worked

https://github.com/hossein-zare/react-native-dropdown-picker/issues/376

The issue is made even more complicated because it looks like you can violate zIndex rules just a little bit in react-native, on Android specifically. That's because Android does a special optimization hack as it renders views natively where if it is a style-only view, it will collapse it to the first non-style parent, possibly making it look like your zIndex is working outside of the view hierarchies you see, but in reality it is only because some were squashed during render. That optimization isn't present on iOS which makes it confusing.

If you chew through that and give it a try, I think it will work for you

[P0SEID0N]

@mikehardy

I have to say thank you very much for all this detail. Yeah I am aware of the issues with zIndex, in reality it isnt really something that I feel works or was supposed to be included or worked with in a mobile application (if that makes sense). But I did not know about the violation case that you mentioned with Android and primarily our app is being released on Android first so a lot of these issues that we are seeing are with android specifically (I don't trust how the dropdown works on the emulator anymore haha).

I will give all of this a try and report back!

[BiplovQss]

https://stackoverflow.com/a/66077413/8526684 Solved : Not able to click on items in android

[Pragati1419]

const DropDown = () => { const [selectedValue, setSelectedValue] = useState(1);

return ( <View style={{ flex: 1, padding: 30 }}>

Select your option:

  <Picker
    selectedValue={selectedValue}
    onValueChange={(itemValue) => setSelectedValue(itemValue)}
  >
    <Picker.Item label="Posts" value={1} />
    <Picker.Item label="Sessions" value={2} />
    <Picker.Item label="Posts & Sessions" value={3} />
  </Picker>
</View>

); };
For me also dropdown component is not working

[AshChan850]

I did just a simple implementation of the library and currently using version 5.4.6. I cannot select the items from the list. Not a single event is being fired upon clicking, I don't know why. While writing the code, it was working fine but since when I have re-compiled the code, it is not working. Below is my code, any help would mean a lot.

<DropDownPicker items={items} open={companyOpen} value={selectedValue} setOpen={setCompanyOpen} placeholder={placeholder} placeholderStyle={styles.placeholderStyles} searchable setValue={setSelectedValue} listMode="MODAL" disableLocalSearch={true} style={styles.dropdown} renderListItem={renderLabel} // addCustomItem={true} onChangeSearchText={(text)=>{ let filtered_items = handleSearch(text,dataSet) console.log('Autocomplete wrapper on change---> ', filtered_items) setItems(filtered_items) console.log("Filtered items",items); }} />

[franluz]

I know this issue is close for moths by now BUT I got the answer for this one-> use property renderItem={this.renderItem} and inside the render put a touchableOpacity to set value to your state it does work very well