title: React Native :Dropdown is overlapping with the below content in ios
body: <p>I'm using a dropdown picker in my react native app and its working fine on android devices,but UI breaks on ios</p>
  <p>code</p>
  <pre><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) =&gt; {
  
  
  }
  onselectHandler = (value) =&gt; {
  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 (
  &lt;View&gt;
  {PROP.map(res =&gt; {
  
  return (
  &lt;View key={res.key}&gt;
  
  &lt;View style={styles.container}&gt;
  
  &lt;TouchableOpacity
  style={[value === res.key ? styles.radioCircleActive : styles.radioCircle]}
  onPress={() =&gt; {
  
  this.props.setRadioValue(res.key.toLowerCase())
  this.setState({
  value: res.key,
  })
  
  }}&gt;
  {value === res.key &amp;&amp; &lt;View style={styles.selectedRb} /&gt;}
  &lt;/TouchableOpacity&gt;
  &lt;Text style={styles.radioText}&gt;{res.text}&lt;/Text&gt;
  &lt;/View&gt;
  {
  value === res.key &amp;&amp; res.key != 'No Minimum Duration' &amp;&amp; !this.props.isHidedrpdwn ?
  
  // &lt;DropdownPicker
  
  // items={this.state.itemsA}
  // defaultValue={this.state.itemA}
  // onselectHandler={this.onselectHandler}
  // onChangeItem={value =&gt; this.props.setValue(value.value)}
  
  // name='relation'
  
  // /&gt;
  &lt;DropDownPicker
  items={[
  { label: 'USA', value: 'usa', icon: () =&gt; &lt;Icon name=&quot;flag&quot; size={18} color=&quot;#900&quot; /&gt;, hidden: true },
  { label: 'UK', value: 'uk', icon: () =&gt; &lt;Icon name=&quot;flag&quot; size={18} color=&quot;#900&quot; /&gt; },
  { label: 'France', value: 'france', icon: () =&gt; &lt;Icon name=&quot;flag&quot; size={18} color=&quot;#900&quot; /&gt; },
  ]}
  defaultValue={this.state.country}
  containerStyle={{ height: 40 }}
  style={{ backgroundColor: '#fafafa' }}
  itemStyle={{
  justifyContent: 'flex-start'
  }}
  dropDownStyle={{ backgroundColor: '#fafafa' }}
  onChangeItem={item =&gt; this.setState({
  country: item.value
  })}
  /&gt; : null
  }
  &lt;/View&gt;
  );
  })}
  {/ &lt;Text&gt; Selected: {this.state.value} &lt;/Text&gt; /}
  &lt;/View&gt;
  );
  }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vKu1E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vKu1E.png" alt="enter image description here" /></a></p>
  <p>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? .</p>