unable to select item from react-native-dropdown-picker

user_11719400 0
Viewed 13920

am using React-native-dropdown-picker, however am unable to select any item from the dropdown list, the items are being overlapped by the below view. I have tried adding position:'absolute, zIndex:2 but still the itemlist is being overlapped as follows: enter image description here

I have written the code for dropdown component as follows

 return (
    <View>
      <View style={styles.container}>
        {console.log('new array', dateArr)}
        {console.log('arr', arr)}
        <Icon
          name="arrow-left"
          size={20}
          color="#fff"
          style={{marginTop: 12}}
        />
        {console.log('----------date', dateArr)}
        {dateArr != null && (
          <DropDownPicker
            onValueChange={(value) => onValSelect(value)}
            items={dateArr}
            itemStyle={{
              // justifyContent: 'flex-start',
              flexDirection:'row'
            }}
            
            containerStyle={{height: 40,width:'80%',zIndex:2}}
          />
        )}
       
      </View>
      <DaysInAWeek daysInAWeek={daysInAWeek} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FE017E',
    // height: 56,
    width: '100%',
    flexDirection: 'row',
    padding: 10,
  },
});

onValSelect() is as follows:

 function onValSelect(val) {
    if (val.length > 1) {
      let arr = [];
      for (let i = val[0]; i <= val[1]; i += 86400000) {
        let date = getMonthDate(new Date(i));
        arr.push(date);
      }

      console.log('final arr', arr);
      setDaysInAWeek(arr);
    } else {
      console.log('single date', new Date(val));
      setDaysInAWeek(new Date(val));
    }
  }

please let me know the issue any help would be appreciated.

react-native-ios react-native reactjs
7 Answers

If somebody still didn't get this, here something I found This is all related to the parent element, so if DropDownPicker component does not have a parent element with some height then this would not let you select even if you see the options.

just give parent element minHeight:300px or any height you want Example -

<View style={{minHeight: 300}}>
          
             <DropDownPicker
               items={timeslots}
               defaultValue={this.state.selected2}
               containerStyle={{height: 40}}
               style={{backgroundColor: '#fafafa'}}
               itemStyle={{
                 justifyContent: 'flex-start',
               }}
               dropDownStyle={{backgroundColor: '#fafafa'}}
               onChangeItem={(item) => 
                 this.setState({
                   selected2: item.value,
                 });
               }
             />
        
         </View>
user_87316740

I solved this problem in this way:

const [open, setOpen] = useState(false);
      ...
<View style={[style.viewContainer, Platform.OS === 'android' && open && style.androidContainer]}>
      <DropDownPicker
        open={open}
        setOpen={setOpen}
...

styles:

   viewContainer: { marginHorizontal: 16, zIndex: 1 },
    androidContainer: {
      minHeight: 500,
      marginBottom: -428,
    },
user_168021460 
 <View style={{ zIndex: 999}}>
       <DropDownPicker
           ...
         />
adding Zindex for View worked for me
user_101664420

Make the zIndex: -1 for the components that are overlapping and zIndex: 1 for the dropdown picker

user_110450680 
 cost dataArr=[
        {label: 'USA', value: 'usa'},
        {label: 'UK', value: 'uk' },
        {label: 'France', value: 'france'},
    ];   
<DropDownPicker
    items={dataArr}
    defaultValue="Select Country"
    containerStyle={{height: 40}}
    style={{backgroundColor: '#fafafa'}}
    itemStyle={{
        justifyContent: 'flex-start'
    }}
    dropDownStyle={{backgroundColor: '#fafafa'}}
    onChangeItem={item => this.setState({
        country: item.value
    })}
/>

I guess the problem is with your item style. can you change the flex-direction to column?

user_75399270

Changing the DropDown Direction worked for me.

dropDownDirection ="TOP"

user_158301720 
const heightDropItem = 40 // your height items        
<View style={{minHeight: open ? (items.length + 1) * heightDropItem : heightDropItem}}>
                <DropDownPicker
                  style={{
                    borderWidth: 2,
                    borderRadius: 4,
                    borderColor: colors.textHiragino,
                    fontSize: 16,
                  }}
                  placeholder="2022年"
                  open={open}
                  value={value}
                  items={items}
                  setOpen={setOpen}
                  setValue={setValue}
                  setItems={setItems}
                  multiple={false}
                />
              </View>
user_154066190
Related