title: React native - z-index in dropdown doesnt work
body: <p>I am trying to create a basic dropdown in React Native.</p>
  <p>I have created a dropdown component:</p>
  <pre><code>//Dropdown
  import React, { useState } from &quot;react&quot;;
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Platform,
  } from &quot;react-native&quot;;
  import { Feather } from &quot;@expo/vector-icons&quot;;
  import Responsive from &quot;../responsive&quot;;
  export default function DropDown({ options }) {
    const [isOpen, setIsOpen] = useState(false);
  
    const toggleDropdown = () =&gt; {
      setIsOpen((prev) =&gt; !prev);
    };
  
    return (
      &lt;TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}&gt;
        &lt;Text style={styles.selectedText}&gt;Round&lt;/Text&gt;
        &lt;Feather name=&quot;chevron-down&quot; size={24} /&gt;
        {isOpen &amp;&amp; (
          &lt;View style={styles.menu}&gt;
            {options.map((item) =&gt; (
              &lt;Text style={styles.option} key={item}&gt;
                {item}
              &lt;/Text&gt;
            ))}
          &lt;/View&gt;
        )}
      &lt;/TouchableOpacity&gt;
    );
  }
  
  const styles = StyleSheet.create({
    dropdownBox: {
      backgroundColor: &quot;#FDCD3C&quot;,
      width: Responsive.width(364),
      alignSelf: &quot;center&quot;,
      flexDirection: &quot;row&quot;,
      height: Responsive.height(50),
      alignItems: &quot;center&quot;,
      justifyContent: &quot;space-between&quot;,
      paddingHorizontal: Responsive.width(15),
      // position: &quot;absolute&quot;,
      borderRadius: 6,
      elevation: Platform.OS === &quot;android&quot; ? 50 : 0,
      marginVertical: Responsive.height(10),
      zIndex: 0,
    },
    selectedText: {
      fontFamily: &quot;airbnb-bold&quot;,
      // color: &quot;#fff&quot;,
      fontSize: Responsive.font(15),
    },
    menu: {
      position: &quot;absolute&quot;,
      backgroundColor: &quot;#fff&quot;,
      width: Responsive.width(364),
      paddingHorizontal: Responsive.width(15),
      paddingVertical: Responsive.height(10),
      // height: Responsive.height(20),
      // bottom: 0,
      top: Responsive.height(55),
      zIndex: 2,
      elevation: 2,
    },
    option: {
      height: Responsive.height(20),
    },
  });
  
  DropDown.defaultProps = {
    options: [],
    additionalStyles: {},
  };
  
  </code></pre>
  <p>but I have a problem with the zIndex</p>
  <p>the first dropdown is hiding under the second dropdown</p>
  <p>I tried to play with the z-index in both places but it has not worked</p>
  <p>Does anyone have an idea how I can solve this issue?</p>
  <p><a href="https://i.stack.imgur.com/jfh3y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jfh3y.png" alt="enter image description here" /></a></p>
  <pre><code>//Dropdowns container
  import React from &quot;react&quot;;
  import { StyleSheet, Text, View } from &quot;react-native&quot;;
  import GradientBackground from &quot;../../../shared/GradientBackground&quot;;
  import ListTable from &quot;../components/ListTable&quot;;
  import DropDown from &quot;../../../shared/DropDown&quot;;
  import Responsive from &quot;../../../responsive&quot;;
  export default function PriceList() {
    return (
      &lt;GradientBackground&gt;
        &lt;View&gt;
          &lt;DropDown
            options={[
              &quot;BR&quot;,
              &quot;PS&quot;,
              &quot;OV&quot;,
              &quot;PR&quot;,
              &quot;RAD&quot;,
              &quot;AC&quot;,
              &quot;EM&quot;,
              &quot;MQ&quot;,
              &quot;BAG&quot;,
              &quot;HS&quot;,
              &quot;CU&quot;,
              &quot;TRI&quot;,
            ]}
          /&gt;
          &lt;DropDown options={[&quot;1.50 - 1.99 carat&quot;]} /&gt;
          {/* &lt;ListTable /&gt; */}
        &lt;/View&gt;
      &lt;/GradientBackground&gt;
    );
  }
  
  const styles = StyleSheet.create({});
  </code></pre>