Cannot get background image to work with React-Native and NativeBase
<p>I am trying to use NativeBase with ReactNative and have a picture as the background.  I've been googling for a while and here is the code I've come up with:</p>

<pre><code>export default class WelcomeScreen extends Component {
    render(){
        return (
            &lt;Container&gt;
                &lt;Header&gt;
                    &lt;Button transparent&gt;
                        &lt;Icon name='ios-arrow-back' /&gt;
                    &lt;/Button&gt;
                &lt;/Header&gt;
                &lt;Content&gt;
                    &lt;Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} /&gt;
                    &lt;Text&gt;Do you ever feel like you dont have a partner&lt;/Text&gt;
                &lt;/Content&gt;
            &lt;/Container&gt;
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});
</code></pre>

<p>The problem is that this stretches the image a great deal so that it's unrecognizable in the simulator.  Here's a picture of what's in the simulator compared to the actual image:</p>

<p><a href="https://i.stack.imgur.com/2wUOO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2wUOO.png" alt="Simulator Image"></a></p>

<p>and here's the actual image:</p>

<p><a href="https://i.stack.imgur.com/eeNz9.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/eeNz9.jpg" alt="Actual Picture"></a></p>

<p>How do I fix this?</p>