React Native Auto Scale Image

React Native <Image /> alternative to automatically scale width or height of the Image given only one style, preserving aspect ratio. It takes all the usual props of <Image /> component except uri instead of source (because it only works with URIs for now) and returns an auto scaled image view.

It is useful when you don't know the aspect ratio in advance (e.g. user-uploaded content) but want to render the entire image while restricting either width or height only and preserve aspect ratio.

Example:

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

Also works with styled-components.

Install

npm install react-native-auto-scale-image --save

Props

name	type	default	description
style	object	none	Style object with either width or height defined as a number
uri	string	none	URI or the image

Support

react-native-auto-scale-image uses hooks and is only compatible with react-native version >=0.59.0.