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

Question

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>
);
}
}

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? .

Answer 1

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.

Answer 2

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}}
    ....
/>

Answer 3

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"
 />

Answer 4

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