React Native Image Style Resizemode Contain Example

React Native

Nicesnippets

592

17-07-2020


React Native Image Style Resizemode Contain Example

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: "http://aatmaninfotech.com/frontTheme/images/aatmaninfotech-logo.png" };

class ImageWithStyle extends Component {

render() {

return (

<View style={styles.container}>

<View>

<Image

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

source={image}

/>

</View>

</View>

);

}

}

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

Output

It will help you...