react-native-auto-height-image

Initialized by vivaxy/gt-npm-package


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.

ReactNative Image component needs users to set both width and height props.

Installation

yarn add react-native-auto-height-image

npm install react-native-auto-height-image

Usage

Use local or remote files:

``js
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 (


width={100}
source={image}
/>

width={100}
source={{uri: 'http://placehold.it/350x150'}}
/>


);
}
}
`

You can even specify fallback images for when the source fails to load:

`js
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 (
width={100}
source={{uri: 'https://vivaxy.github.io/404'}}
fallbackSource={image}
/>
);
}
}
`

$3

| 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

Change log

Contributing

Contributing

Licence

MIT

Contributors

$3

This project exists thanks to all the people who contribute. [Contribute].

$3

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]

Related Projects

- react-native-scalable-image
- react-native-fit-image
- react-native-responsive-image-view
- react-native-auto-image