React Native :Dropdown is overlapping with the below content in ios

user_9677980 0
Viewed 4989

I'm using a dropdown picker in my react native app and its working fine on android devices,but UI breaks on ios

code

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import DropdownPicker from '../DropdownPicker';
import { Platform } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import Icon from 'react-native-vector-icons/Feather';
export default class RadioButton extends Component {
state = {
value: null,
selectedPicker: null,
picker: 'No Minimum Duration',
itemsA: [
{ label: 'Owner for this place', value: 'opt1' },
{ label: 'France', value: 'france' },
{ label: 'Germany', value: 'germany' }
],
};
onChangeItem = (value, name) => {


}
onselectHandler = (value) => {
this.setState({
selectedPicker: value
})

}
componentDidMount() {



}

componentDidUpdate(prevProps, prevState) {


if (prevState.value !== this.state.value) {
switch (this.state.value) {
case 'No Minimum Duration':
break;
case 'Hour':
this.setState({
itemsA: [
{ label: '1 Hour', value: 1 },
{ label: '2 Hours', value: 2 },
{ label: '3 Hours', value: 3 },
{ label: '4 Hours', value: 4 },
{ label: '5 Hours', value: 5 },
{ label: '6 Hours', value: 6 },
{ label: '7 Hours', value: 7 },
{ label: '8 Hours', value: 8 },
{ label: '9 Hours', value: 9 },
{ label: '10 Hours', value: 10 },
{ label: '12 Hours', value: 12 },

]
})
break;
case 'Day':
this.setState({
itemsA: [
{ label: '1 Day', value: 1 },
{ label: '2 Days', value: 2 },
{ label: '3 Days', value: 3 },
{ label: '4 Days', value: 4 },
{ label: '5 Days', value: 5 },
{ label: '6 Days', value: 6 },
{ label: '7 Days', value: 7 },

]
})
break;
case 'Week':
this.setState({
itemsA: [
{ label: '1 Week', value: 1 },
{ label: '2 Weeks', value: 2 },
{ label: '3 Weeks', value: 3 },
{ label: '4 Weeks', value: 4 },
]
})
break;
case 'Month':
this.setState({
itemsA: [
{ label: '1 month', value: 1 },
{ label: '2 month', value: 2 },
{ label: '3 month', value: 3 },
{ label: '6 month', value: 6 },
]
})
break;
}
}

}

render() {
const { PROP } = this.props;
const { value } = this.state;


return (
<View>
{PROP.map(res => {

return (
<View key={res.key}>

<View style={styles.container}>

<TouchableOpacity
style={[value === res.key ? styles.radioCircleActive : styles.radioCircle]}
onPress={() => {

this.props.setRadioValue(res.key.toLowerCase())
this.setState({
value: res.key,
})

}}>
{value === res.key && <View style={styles.selectedRb} />}
</TouchableOpacity>
<Text style={styles.radioText}>{res.text}</Text>
</View>
{
value === res.key && res.key != 'No Minimum Duration' && !this.props.isHidedrpdwn ?

// <DropdownPicker

// items={this.state.itemsA}
// defaultValue={this.state.itemA}
// onselectHandler={this.onselectHandler}
// onChangeItem={value => this.props.setValue(value.value)}

// name='relation'

// />
<DropDownPicker
items={[
{ label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
{ label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
{ label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
]}
defaultValue={this.state.country}
containerStyle={{ height: 40 }}
style={{ backgroundColor: '#fafafa' }}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
onChangeItem={item => this.setState({
country: item.value
})}
/> : null
}
</View>
);
})}
{/ <Text> Selected: {this.state.value} </Text> /}
</View>
);
}
}

enter image description here

This code is working fine on android but UI breaks on ios, The screenshot is attached above .This happens on ios only. the dropdown just get overlapped by content below.How can I fix this issue? .

react-native
6 Answers

Add zIndex:100 property to ios along with Platform.OS === 'ios' in the style of the parent view of the picker. Use Platform.OS because the zIndex is not working correct in android and it will cause issues with the dropdown.

user_77333990

I faced same issue I fixed it by adding dropDownDirection="TOP" props into dropdown component which render dropdown container upside.

 <DropdownPicker
 items={this.state.itemsA}
 defaultValue={this.state.itemA}
 onselectHandler={this.onselectHandler}
 onChangeItem={value => this.props.setValue(value.value)}
 name='relation'
 dropDownDirection="TOP"
 />
user_165385440

the problem is due to the View elements that contain the dropdown, replace them with <></> and the problem will be solved.

user_154477690

I solved this by using height property in containerprops

Maybe it could help you too.

   <DropDownPicker
                containerProps={{
                  height: this.state.open === true ? 220 : null,
                  backgroundColor: "#fff",
                }}
                schema={{
                  label: "title",
                  value: "status",
                }}
                placeholder="Select status"
                // searchable={true}
                open={this.state.open}
                value={this.state.value}
                items={status_project}
                setOpen={this.setOpen}
                setValue={this.setValue}
                setItems={this.setItems}
                theme="LIGHT"
                listMode="SCROLLVIEW"
                showArrowIcon={true}
                showTickIcon={true}
                TickIconComponent={({style}) =>  <AntDesign
                style={{ marginRight: 5 }}
                color="green"
                name="check"
                size={20}
              />}
              itemSeparator={true}
              itemSeparatorStyle={{
                backgroundColor: "#e5e5e5",
              }} 
              />
user_144486940

Possible Solution: I couldn't find a way to make the dropdown clickable whether it was top or bottom, or even with zIndex.

In my case, the dropdown wouldn't overlap with the top component, only with the bottom component, and I figured out that the issue was with the marginTop inside of DropDownPicker. This may work for dropDownDirection="BOTTOM" as well. It makes the UI/UX look natural as well.

<DropDownPicker
    style={{marginTop: opened ? 175 : 20}}
    ....
/>
user_157438010

Use dropDownDirection="TOP" as follow to open the dropdown upwards.

<DropDownPicker
  dropDownDirection="TOP"
  ...
 />
user_49066010
Related