https://github.com/vivaxy/react-native-auto-height-image
🖼️React native auto height image
https://github.com/vivaxy/react-native-auto-height-image
auto-height image react react-native
Last synced: 24 days ago
JSON representation
🖼️React native auto height image
- Host: GitHub
- URL: https://github.com/vivaxy/react-native-auto-height-image
- Owner: vivaxy
- License: mit
- Created: 2017-04-24T12:08:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-24T05:23:33.000Z (11 months ago)
- Last Synced: 2025-04-03T15:58:12.974Z (29 days ago)
- Topics: auto-height, image, react, react-native
- Language: JavaScript
- Homepage: https://github.com/vivaxy/react-native-auto-height-image
- Size: 1.56 MB
- Stars: 343
- Watchers: 8
- Forks: 76
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Citation: CITATION.cff
Awesome Lists containing this project
README
# react-native-auto-height-image
Initialized by [vivaxy/gt-npm-package](https://github.com/vivaxy/gt-npm-package)
[](https://www.npmjs.com/package/react-native-auto-height-image)
[](https://www.npmjs.com/package/react-native-auto-height-image)
[](./LICENSE)
[](https://conventionalcommits.org)
[](https://opencollective.com/react-native-auto-height-image)
[](https://github.com/vivaxy/react-native-auto-height-image/issues/88)
[](https://zenodo.org/badge/latestdoi/89235823)
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 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 (
);
}
}
```
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 (
);
}
}
```
### 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](https://reactnative.dev/docs/image#props) except `resizeMode` are accepted.
## Change Log
[Change log](./CHANGELOG.md)
## Contributing
[Contributing](./CONTRIBUTING.md)
## Licence
[MIT](./LICENSE)
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-native-auto-height-image/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-native-auto-height-image/contribute)]
## Related Projects
- [react-native-scalable-image](https://github.com/ihor/react-native-scalable-image)
- [react-native-fit-image](https://github.com/huiseoul/react-native-fit-image)
- [react-native-responsive-image-view](https://github.com/wKovacs64/react-native-responsive-image-view)
- [react-native-auto-image](https://github.com/egorshulga/react-native-auto-image)