1.0.2 • Published 4 years ago

react-native-image-autosize v1.0.2

Weekly downloads
1
License
ISC
Repository
github
Last release
4 years ago

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

nametypedefaultdescription
heightnumbernoneMaximum image height
widthnumbernoneMaximum image width
onSizefunctionnonereturns an object {resized: {width, height}, original: {width, height}}
onLoadEndfunctionnoneis called when the image ends loading
animatedboolfalsewhen true, makes the component animatable