title: React Native Image absolute positioning
body: <p>I am trying to position two images at the bottom border, each side with the 50% width, so as to properly scale to any device size. But I can't seem to get any absolute positioning to behave in a reproducible way.</p>
  <p>I've made an example Snack: <a href="https://snack.expo.io/rJd3OkVIM" rel="nofollow noreferrer">https://snack.expo.io/rJd3OkVIM</a></p>
  <p>The App component and the associated style is shown below:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { View, StyleSheet, Image } from 'react-native';
  
  
  export default class App extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Image
                  style={styles.img}
                  resizeMode=&quot;contain&quot;
                  resizeMethod=&quot;resize&quot;
                  source={require('./leftbg.png')}
              /&gt;
          &lt;Image
                  style={styles.imgr}
                  resizeMode=&quot;contain&quot;
                  resizeMethod=&quot;resize&quot;
                  source={require('./rightbg.png')}
              /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
    },
      img: {
        width: '50%',
        position: 'absolute',
        left: 0,
      },
      imgr: {
        width: '50%',
        position: 'absolute',
        right: 0,
      }
  });
  </code></pre>
  <p>Each device sets the image vertical centering to a random part of the screen, every time the project is opened the centering seems to change.</p>