React Native component for scaling an Image within the parent View

react-native-responsive-image-view

React Native component for scaling an Image within the parent View.

The problem

You want to display an image in your React Native app that fills the width of its container and scales its height according to the aspect ratio of the image. If you're coming from front-end web development, you may be familiar with Bootstrap 3's img-responsive class or manually applying max-width: 100% and height: auto to an image. Unfortunately, auto is not a valid value for height in React Native, so that technique doesn't quite translate.

This solution

This is a component that calculates the aspect ratio of your image for you (or uses a fixed value, if you supply one) and provides you with the appropriate props to apply to a View container and an Image inside it which will produce the results you're looking for. The secret sauce is setting both the height and width attributes of the style prop on the Image to 100% and wrapping it with a View that has its aspectRatio prop set to match the aspect ratio you want. It uses a render prop which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.

Installation

Using [yarn][yarn]:

yarn add react-native-responsive-image-view

Or, [npm][npm]:

npm install --save react-native-responsive-image-view

This package also depends on react, prop-types, and react-native. Please
make sure you have those installed as well.

Usage

import React from 'react';
import { Image, View } from 'react-native';
import ResponsiveImageView from 'react-native-responsive-image-view';

export default ({ imageUri }) => (
  <ResponsiveImageView source={{ uri: imageUri }}>
    {({ getViewProps, getImageProps }) => (
      <View {...getViewProps()}>
        <Image {...getImageProps()} />
      </View>
    )}
  </ResponsiveImageView>
);

GitHub