Rescaling an image to match parent width with React Native
<p>Coming from native Android, I'm having a hard time styling my layout. What I'm trying to achieve is very simple : center a picture with a height of 1/3 of the screen height and that match the screen width. 
I also want to keep the original ratio. 
It's working fine on iOS but not on Android.</p>

<p>This is what I get so far :</p>

<pre><code> 'use strict';

 import React,{
 Component,
 View,
 Image,
 Text,
 StyleSheet
 } from 'react-native';

import Dimensions from 'Dimensions';

export default class SplashScreen extends Component {
  render() {
    return(
        &lt;View style={{flex: 1, flexDirection: 'column', justifyContent:'center'}}&gt;
        &lt;View style={this.renderLogoContainerStyle()}&gt;
          &lt;Image
            style={this.renderLogo}
            source={require('./img/cat_logo.gif')}
          /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
   );
  }

  renderLogo(){
    return{
      height: Dimensions.get('window').height / 3,
      width: Dimensions.get('window').width,
      resizeMode: 'contain'
    };
  }
  renderLogoContainerStyle(){
    return{
      borderColor:'red',
      borderWidth:4
    };
   }
  }
}
</code></pre>

<p>And a screenshot of the result on an Android device :</p>

<p><a href="https://i.stack.imgur.com/NEibb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NEibb.png" alt="enter image description here"></a></p>

<p>Any clue why ? Is it a missing feature on Android ?</p>