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 |