title: zIndex isn't working for a react native project
body: <p>I'm trying to have a card shown on top of a card in React Native and set <code>zIndex = 1</code> for the top card and <code>zIndex = 0</code> for the bottom card and placed them in a view like below:</p>
  <pre><code>&lt;View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}&gt;
    {this.props.subscribed ? (
      &lt;CardSubscribe
        style={{zIndex: 2}}
      /&gt;
    ) : (null)}
    {this._renderTextItems()}
  &lt;/View&gt; 
  </code></pre>
  <p>However, there's no overlap between two cards. The bottom card starts after the top card:</p>
  <p><a href="https://i.stack.imgur.com/pON8k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pON8k.png" alt="enter image description here" /></a></p>
  <p>I have also tried to debug with inspector and it shows the top card has the property of <code>zIndex = 1</code> :</p>
  <p><a href="https://i.stack.imgur.com/EgRRX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EgRRX.png" alt="enter image description here" /></a></p>
  <p>and the bottom card has the property of <code>zIndex = 0</code> :</p>
  <p><a href="https://i.stack.imgur.com/DyeS1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DyeS1.png" alt="enter image description here" /></a></p>
  <p>I have also tried to place the top card after the bottom card but it just shows below the bottom card, like <code>zIndex</code> isn't doing anything. How should I fix this?</p>