react-native-auto-height-image
This component provides you a simple way to load a remote image and automatically set Image
height to the image dimension which fits the provided width.
React Native Image
component needs users to set both width
and height
props.
React Native version requirements: >=0.46.
Installation
yarn add rn-auto-height-img
npm install rn-auto-height-img
Usage
Use local or remote files:
import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';
import image from 'gallifrey-falls.png';
export default class Demo extends Component {
render() {
return (
<View>
<AutoHeightImage
width={100}
source={image}
/>
<AutoHeightImage
width={100}
source={{uri: 'http://placehold.it/350x150'}}
/>
</View>
);
}
}
You can even specify fallback images for when the source fails to load:
import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';
import image from 'gallifrey-falls.png';
export default class Demo extends Component {
render() {
return (
<AutoHeightImage
width={100}
source={{uri: 'https://aelroba.github.io/404'}}
fallbackSource={image}
/>
);
}
}
Props
name | type | isRequired | default | description |
---|---|---|---|---|
width |
number | N/A | image width to fit | |
maxHeight |
number | Infinity |
image max height | |
source |
number or object | N/A | local (i.e. require/import) or remote image ({uri: '...'}) | |
fallbackSource |
number or object | N/A | local (i.e. require/import) or remote image ({uri: '...'}) | |
onHeightChange |
func | (height) => {} |
called when updating image height, the argument height might be 0
|
|
animated |
bool | false |
Use Animated.Image instead of Image
|
Other image props except resizeMode
are accepted.
Change Log
Contributing
Licence
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]