title: How do I lay out views using absolute positioning instead of flex?
body: <p>React native doesn't allow for zIndex and instead suggests layering views based on the order they're rendered in. I have a module on the top half of my screen and one on the bottom, I want the module on top to have a shadow that overlaps the bottom one. In order to achieve this I have to render the bottom half first. Easy enough with absolute positioning right?</p>
  
  <p>My react styles:</p>
  
  <pre><code>topContainer: {
      position: 'absolute',
      top: 0,
      left: 0, 
      right: 0,
      height: 200,
      backgroundColor: '#cccccc',
      shadowColor: "#000000",
      shadowRadius: 10,
      shadowOpacity: 0.5,
      shadowOffset: {
        h: 0,
        w: 0
      },
  },
  bottomContainer: {
      position: 'absolute',
      top: 100,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#333'
  }
  </code></pre>
  
  <p>My JSX:</p>
  
  <pre><code>&lt;View&gt;
      &lt;View style={styles.bottomContainer}&gt;
          &lt;ContentView results={this.state.results} /&gt;
      &lt;/View&gt;
      &lt;View style={styles.topContainer}&gt;
          &lt;SearchBar onSearch={this.onSearch} /&gt;
      &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>But when I do this, the bottomContainer doesn't fill the screen, it conforms to its content. But because of the variety of screen sizes I can't put a definite pixel size for the height and am therefore stuck.</p>