luanvuhlu
12/31/2017 - 9:41 AM

React native: Display photo with ratio

React native: Display photo with ratio

<View style={styles.container}>
    <Image source={{uri: this.props.image}}
        resizeMode={Image.resizeMode.center}
        style={{ 
            width: this.state.width,
            height: this.state.height
        }} />
</View>
Image.getSize(this.props.image, (srcWidth, srcHeight) => {
  const maxHeight = Dimensions.get('window').height;
  const maxWidth = Dimensions.get('window').width;

  const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  this.setState({ width: srcWidth * ratio, height: srcHeight * ratio });
}, error => {
  console.log('error:', error);
});