React Native - Vertical align image with resizeMode “contain”

Question

When an image has a resize mode \"contain\" it seems to align/justify the actual image in the center, the image content however is aligned/justified at flex start.

Answer 1

You need to use styles on your Image to set the vertical alignment you want.

var SampleApp = React.createClass({
  render: function() {
    return (
      
        
          
            Hello !
            
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 500,
    justifyContent: "space-around",    //  <-- you can use "center", "flex-start",
    resizeMode: "contain",             //      "flex-end" or "space-between" here
  },
  instructions: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: "transparent",
    fontSize: 25,
  },
});

See https://rnplay.org/apps/9D5H1Q for a running example