1.0.2 • Published 4 years ago
react-native-image-autosize v1.0.2
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 |