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

I solved this by using height property in containerprops

Maybe it could help you too.

   <DropDownPicker
                containerProps={{
                  style: {
                    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",
              }} 
              />

Answer 2

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