React Native Responsive Image Width and Height Example

This tutorial explains how to create and display responsive image in react native application. In order to display responsive image, we are using Dimensions Component of react-native package. Dimensions.get('window').width  helps to calculate the size of the image. For example, if the ratio is always 16x9, the height is 9/16th of the width of the image. The width equals device width.

Code snippet to display responsive image :

let dimensions = Dimensions.get("window");
    let imageHeight = Math.round((dimensions.width * 9) / 16);
    let imageWidth = dimensions.width;

    return (
      <View style={styles.container}>

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/3.jpg")}
          />

      </View>
    );

React Native Responsive Image example : 

Lets follow the below steps to display responsive image in React Native.

Project Structure :

Place the images inside the images folder.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4 : Implement render method and return Image component wrapped by root View component. Dimensions.get('window').width  of react-native package helps to calculate the size of the image.

    /*
       With the help of Dimension component we are calculating the image size
       and setting the width and height in image component
    */
    let dimensions = Dimensions.get("window");
    let imageHeight = Math.round((dimensions.width * 9) / 16);
    let imageWidth = dimensions.width;

Step-5 : Apply the below style sheet design.

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

Complete Source Code for App.js 

Lets see the complete source code that helps to display responsive image in view layout with the help of Dimensions Component in react native application.

/**
 * 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() {
    /*
       With the help of Dimension component we are calculating the image size
       and setting the width and height in image component
    */
    let dimensions = Dimensions.get("window");
    let imageHeight = Math.round((dimensions.width * 9) / 16);
    let imageWidth = dimensions.width;

    return (
      <View style={styles.container}>
      
          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/3.jpg")}
          />

      </View>
    );
  }
}

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

Screenshot :

This is all about react native responsive image example. 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.