React Native Responsive Image Scale To Fit Example - Android

This tutorial explains how to display responsive image in react native application. The best part about responsive image is automatically adjust to fit the size of the screen or auto fit to mobile device screen. if you are remember about <Image> component in react native application it does not keep image aspect ratio which results in the image being stretched or cropped. So here we are going to discuss about new library that helps to create responsive image in android or ios device easily.
react-native-scalable-image solves this problem by calculating the image size and resizing the image when rendering. This library provides an <Image/> component which scales width or height automatically to keep the aspect ratio.

Library used :

• react-native-scalable-image

Installation Command : 

npm install react-native-scalable-image --save

Lets refer the below screenshot during installation.

The following example creates an image which fits the full screen width and keeps the aspect ratio:

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
 
const image = (
   <Image
       width={Dimensions.get('window').width} // height will be calculated automatically
       source={{uri: '<image uri>'}}
   />

React Native Scalable Image Example :

Lets check out below simple example to create scalable image in react native application. The best part about this library is automatically adjust to fit the size of the screen.

App.js 

As you know In React Native, the component exported from App.js is the entry point (or root component) for react native application. 

1. In this example we are going to use <image> component from the react-native-scalable-image package that provides auto image scaling feature the image can automatically scale itself to given width, It automatically calculates the image height according to given width as respect of image.
2. Also We have placed four <Image> component with different image size and ratio inside the scroll view layout, while scrolling we you can clearly see the scalable image that auto fit to screen size in react application.

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

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Dimensions,ScrollView } from 'react-native';
import Image from 'react-native-scalable-image';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
       <ScrollView>
        <Text style={styles.headerText}> Example - 1  </Text>

        <Image
         width={Dimensions.get('window').width} // height will be calculated automatically
         source={{uri: 'https://scontent-sin6-1.cdninstagram.com/vp/ec3d2768cf3fea9f46b00f8d063496e8/5C829D3E/t51.2885-15/e35/39955778_132983540981108_5035102725543527132_n.jpg'}}
       />

       <Text style={styles.headerText}> Example - 2  </Text>
       <Image
        width={Dimensions.get('window').width} // height will be calculated automatically
        source={{uri: 'https://scontent-sin6-1.cdninstagram.com/vp/b332dfe6afb70fb22c62b17477eb61f0/5C726F8B/t51.2885-15/e35/14736276_1142115749229627_5661486251610472448_n.jpg'}}
      />

        <Text style={styles.headerText}> Example - 3  </Text>
        <Image
         width={Dimensions.get('window').width} // height will be calculated automatically
        source={{uri: 'https://scontent-sin6-1.cdninstagram.com/vp/fe70bc2b191352f4be36dec3795b9473/5C75594D/t51.2885-15/e35/14733312_1248595268517155_9138785640962326528_n.jpg'}}
        />

        <Text style={styles.headerText}> Example - 4  </Text>
        <Image
         width={Dimensions.get('window').width} // height will be calculated automatically
         source={{uri: 'https://scontent-sin6-1.cdninstagram.com/vp/dded6cee88aabdb420342d34abcfe549/5C742150/t51.2885-15/e35/36738130_269184743837735_4994613981004955648_n.jpg'}}
        />
      </ScrollView>
    </View>
      );
  }
}

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

Screenshot :

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Responsive%20Image%20Scale%20To%20Fit%20Example

This is all about React Native Responsive Image Scale To Fit 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.