# react-native-auto-height-image > react-native auto height image Latest version **3.2.4** (published 2021-02-04) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-auto-height-image pnpm add react-native-auto-height-image yarn add react-native-auto-height-image bun add react-native-auto-height-image ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.2.4 | | Published | 2021-02-04 | | First published | 2017-04-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 25.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 344 | | Author | vivaxy | | Maintainers | vivaxy | | Keywords | react-native, image, auto-height, react, images | ## Links - npm: https://www.npmjs.com/package/react-native-auto-height-image - Repository: https://github.com/vivaxy/react-native-auto-height-image - Homepage: https://github.com/vivaxy/react-native-auto-height-image#readme - Issues: https://github.com/vivaxy/react-native-auto-height-image/issues - npm.io page: https://npm.io/package/react-native-auto-height-image ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.2.4 (latest) — 2021-02-04 - 3.2.3 — 2020-10-17 - 3.2.2 — 2020-07-25 - 3.2.1 — 2020-06-08 - 3.2.0 — 2020-05-27 - 3.1.3 — 2020-05-07 - 3.1.2 — 2020-04-18 - 3.1.1 — 2020-04-04 - 3.1.0 — 2020-03-31 - 3.0.0 — 2020-01-17 - 2.0.0 — 2020-01-09 - 1.1.3 — 2019-10-16 - 1.1.1 — 2019-08-13 - 1.1.0 — 2019-03-07 - 1.0.5 — 2018-10-22 - … 15 more at https://npm.io/package/react-native-auto-height-image/versions ## README # react-native-auto-height-image Initialized by [vivaxy/gt-npm-package](https://github.com/vivaxy/gt-npm-package) [![NPM Version](http://img.shields.io/npm/v/react-native-auto-height-image.svg?style=flat-square)](https://www.npmjs.com/package/react-native-auto-height-image) [![NPM Downloads](https://img.shields.io/npm/dt/react-native-auto-height-image.svg?style=flat-square)](https://www.npmjs.com/package/react-native-auto-height-image) [![MIT License](https://img.shields.io/npm/l/react-native-auto-height-image.svg?style=flat-square)](./LICENSE) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org) [![Financial Contributors on Open Collective](https://opencollective.com/react-native-auto-height-image/all/badge.svg?label=financial+contributors)](https://opencollective.com/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. 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 ( ); } } ``` 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) --- _Source: https://npm.io/package/react-native-auto-height-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._