Show how different Image resizeMode works

image-resizeMode.js

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

const mallandro = require('./assets/rah.png');

const HEIGHT = 170;

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      
        <View style={styles.photoContainer}>
          <Image
            style={{ flex: 1, height: HEIGHT,  width: null }}
            resizeMode="cover"
            source={mallandro}
          />
        </View>

        <View style={styles.photoContainer}>
          <Image
            style={{ flex: 1, height: HEIGHT,  width: null }}
            resizeMode="contain"
            source={mallandro}
          />
        </View>

        <View style={styles.photoContainer}>
          <Image
            style={{ flex: 1, height: HEIGHT, width: null }}
            resizeMode="stretch"
            source={mallandro}
          />
        </View>
        
        <View style={styles.photoContainer}>
          <Image
            style={{ flex: 1, height: HEIGHT, width: null }}
            resizeMode="center"
            source={mallandro}
          />
        </View>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  photoContainer: {
    flexDirection: 'row',
    height: HEIGHT,
    backgroundColor: 'cyan',
    marginTop: 20,
  },
});