React Native Image Style Resizemode Contain Example

React Native




Hi Guys,

In this blog, I will explain you how to use image style resizemode in react native. You can easily use image style resizemode in react native. First i will import namespace Image

, after I will make image resizemode attribute add image tag in react native.

Here, I will give you full example for simply display image style resizemode using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init ImageStyleResizemode

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";

import { View, Image, StyleSheet, Text } from "react-native";

const image = { uri: "" };

class ImageWithStyle extends Component {

render() {

return (

<View style={styles.container}>



style={{ resizeMode: "contain", height: 100, width: 200 }}








const styles = StyleSheet.create({

container: {

display: "flex",

justifyContent: "space-around",

alignItems: "center",

height: "100%",



export default ImageWithStyle;

Step 3 - Run project

In the last step run your project using bellow command.

npm start


It will help you...