/react-native-image-autosize

Automatically sets your image dimension in order to preserve the aspect ratio

Primary LanguageJavaScript

react-native-image-autosize

Tired of struggling to keep the aspect ratio on a image using React Native? This component will help you, just set the width and it will auto adjust the height in order to keep the aspect ratio and vice versa.

It also uses FastImage to cache everything.

Installing

First you need to install FastImage.

yarn add react-native-fast-image && cd ios && pod install

Then...

yarn add react-native-image-autosize

Usage

import AutoSizeImage from 'react-native-image-autosize';
import { Dimensions } from 'react-native';

const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

...

      <AutoSizeImage
        source={{
          uri:
            'https://www.tenhomaisdiscosqueamigos.com/wp-content/uploads/2020/03/marnie-dog-1280x720.jpg',
        }}
        width={screenWidth}
        height={screenHeight}
        onSize={res => setSize(res.resized)}
      />

props

name type default description
height number none Maximum image height
width number none Maximum image width
onSize function none returns an object {resized: {width, height}, original: {width, height}}
onLoadEnd function none is called when the image ends loading
animated bool false when true, makes the component animatable