Reputation: 675
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:
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.
Upvotes: 6
Views: 19693
Reputation: 1
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>
Upvotes: 0
Reputation: 139
Make the zIndex: -1 for the components that are overlapping and zIndex: 1 for the dropdown picker
Upvotes: 1
Reputation: 41
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,
},
Upvotes: 4
Reputation: 1
Changing the DropDown Direction worked for me.
dropDownDirection ="TOP"
Upvotes: 0
Reputation: 306
<View style={{ zIndex: 999}}>
<DropDownPicker
...
/>
adding Zindex for View worked for me
Upvotes: 2
Reputation: 1524
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>
Upvotes: 11
Reputation: 624
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?
Upvotes: 0