Image Resizing In React Native

This tutorial explains how to perform image resizing in react native application. Mobile devices come in multiple screen resolutions. When we display images it is important to ensure that the images displayed are optimized for screen resolution. The width and height style properties of Image components determine the size of what's rendered on the screen. For example, you will probably have to work with images at some point that have a larger resolution than you want displayed in your React Native application. Simply setting the width and height style properties on the Image is enough to properly scale the image. In that case you need to use resizeMode props in Image Component to resize your image.

Code snippet to resize the image :

<Image
  style={{ width: "100%", height: "100%" }}
  source={require("./images/11.jpg")}
  resizeMode="cover"
/>

         

Working with resizeMode prop of Image Component :

Lets see the different type of resizeMode category, which helps to resize the image in react native application.

• cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

         Screenshot :

       

   

• contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

          Screenshot :

       

      

• stretch: Scale width and height independently, This may change the aspect ratio of the src.

          Screenshot :

       

• center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

          Screenshot : 

       

• repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

Complete Source Code for App.js 

Lets checkout complete source code for image resize in react native. You can resize the image by specifying  resizeMode prop in image component. (Example : resizeMode="cover" )

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions
} from "react-native";

export default class HomeActivity extends Component {
  render() {

    return (
      <View style={styles.container}>
        <Image
          style={{ width: "100%", height: "100%" }}
          source={require("./images/11.jpg")}
          resizeMode="cover"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

This is all about image resizing in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.