title: react-native-dropdown-picker, how to fix the dropdown picker overlay on other component
body: <p>I have used react-native-dropdown-picker to show multiple dropdown based on Button click. The dropdown showing as overlay on another component and i can't able to pick items. Anyone can help to fix the problem?</p>
  <p><a href="https://i.stack.imgur.com/Q0dXt.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Q0dXt.jpg" alt="enter image description here" /></a></p>
  <p>Example code:</p>
  <pre><code>import * as React from 'react';
  import {View, Text, ScrollView, StyleSheet} from 'react-native';
  import DropDownPicker from 'react-native-dropdown-picker';
  import {Button, Card} from 'react-native-paper';
  //import Constants from 'expo-constants';
  
  // You can import from local files
  //import AssetExample from './components/AssetExample';
  
  // or any pure javascript modules available in npm
  //import { Card } from 'react-native-paper';
  
  export default function App() {
    const [myArray, setMyArray] = React.useState([]);
    const [open, setOpen] = React.useState(false);
    const [value, setValue] = React.useState(null);
    const [items, setItems] = React.useState([
      {label: 'Apple', value: 'apple'},
      {label: 'Banana', value: 'banana'},
      {label: 'Orange', value: 'orange'},
      {label: 'Lemon', value: 'lemon'},
    ]);
  
    const test = () =&gt; {
      console.log('Function called');
      setMyArray([{name: 'hello'}]);
    };
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Button mode=&quot;contained&quot;&gt;
          Button 1
        &lt;/Button&gt;
        &lt;Text&gt;Hello world&lt;/Text&gt;
  
        &lt;Button mode=&quot;contained&quot; &gt;
          Button 2
        &lt;/Button&gt;
  
        &lt;Text&gt;Hello world&lt;/Text&gt;
  
        &lt;Button mode=&quot;contained&quot; &gt;
          Button 3
        &lt;/Button&gt;
        &lt;Text&gt;Hello world&lt;/Text&gt;
  
        &lt;Button mode=&quot;contained&quot; onPress={() =&gt; test()} &gt;
          ADD DropDown
        &lt;/Button&gt;
        
  
        {myArray.map((item, index) =&gt; {
          
          return (
            &lt;Card key={index} style={{height: 40}}&gt;
              &lt;DropDownPicker
                dropDownDirection=&quot;TOP&quot;
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                zIndex={3000}
                zIndexInverse={1000}
                containerStyle={{position: 'relative', width: '70%', left: '15%', paddingTop: 10}}
                childrenContainerStyle={{
                  height: 1030,
                }}
                style={{
                  backgroundColor: '#fafafa',
                  zIndex: 10,
                  position: 'relative',
                }}
                itemStyle={{justifyContent: 'flex-start'}}
                dropDownStyle={{backgroundColor: '#fafafa', height: 100}}
                dropDownContainerStyle={{
                  backgroundColor: 'white',
                  zIndex: 1000,
                  elevation: 5000,
                }}
              /&gt;
            &lt;/Card&gt;
          );
        })}
  
        &lt;Button mode=&quot;contained&quot;&gt;
          Button 4
        &lt;/Button&gt;
        &lt;Text&gt;Hello world&lt;/Text&gt;
  
        &lt;Button mode=&quot;contained&quot; &gt;
          Button 5
        &lt;/Button&gt;
  
        &lt;Text&gt;Hello world&lt;/Text&gt;
  
        &lt;Button mode=&quot;contained&quot; &gt;
          Button 6
        &lt;/Button&gt;
        &lt;Text&gt;Hello world&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
    },
  });
  </code></pre>
  <p>Expected: Want to show dropdown without overlay and items should be selectable.</p>