{"id":25860757,"url":"https://github.com/vivaxy/react-native-auto-height-image","last_synced_at":"2025-05-16T04:04:07.455Z","repository":{"id":44713276,"uuid":"89235823","full_name":"vivaxy/react-native-auto-height-image","owner":"vivaxy","description":"🖼️React native auto height image","archived":false,"fork":false,"pushed_at":"2024-05-24T05:23:33.000Z","size":1638,"stargazers_count":343,"open_issues_count":14,"forks_count":76,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-08T09:36:45.835Z","etag":null,"topics":["auto-height","image","react","react-native"],"latest_commit_sha":null,"homepage":"https://github.com/vivaxy/react-native-auto-height-image","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vivaxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"patreon":"vivaxy","open_collective":"react-native-auto-height-image","custom":["https://gist.github.com/vivaxy/58eed1803a2eddda05c90aed99430de2"]}},"created_at":"2017-04-24T12:08:13.000Z","updated_at":"2025-04-03T12:14:14.000Z","dependencies_parsed_at":"2024-11-08T03:33:11.870Z","dependency_job_id":"c0a1c974-0a8b-4c3e-acab-759d00ee04da","html_url":"https://github.com/vivaxy/react-native-auto-height-image","commit_stats":{"total_commits":201,"total_committers":19,"mean_commits":"10.578947368421053","dds":0.5074626865671642,"last_synced_commit":"0bb6a33e5cf3ace67329e77a1dad75ae40e64c8d"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Freact-native-auto-height-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Freact-native-auto-height-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Freact-native-auto-height-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Freact-native-auto-height-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vivaxy","download_url":"https://codeload.github.com/vivaxy/react-native-auto-height-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-height","image","react","react-native"],"created_at":"2025-03-01T22:57:27.033Z","updated_at":"2025-05-16T04:04:07.438Z","avatar_url":"https://github.com/vivaxy.png","language":"JavaScript","funding_links":["https://patreon.com/vivaxy","https://opencollective.com/react-native-auto-height-image","https://gist.github.com/vivaxy/58eed1803a2eddda05c90aed99430de2","https://opencollective.com/react-native-auto-height-image/contribute"],"categories":[],"sub_categories":[],"readme":"# react-native-auto-height-image\n\nInitialized by [vivaxy/gt-npm-package](https://github.com/vivaxy/gt-npm-package)\n\n[![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)\n[![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)\n[![MIT License](https://img.shields.io/npm/l/react-native-auto-height-image.svg?style=flat-square)](./LICENSE)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)\n[![Financial Contributors on Open Collective](https://opencollective.com/react-native-auto-height-image/all/badge.svg?label=financial+contributors\u0026style=flat-square)](https://opencollective.com/react-native-auto-height-image)\n[![Maintainers Wanted](https://img.shields.io/badge/maintainers-wanted-red.svg?style=flat-square)](https://github.com/vivaxy/react-native-auto-height-image/issues/88)\n[![DOI](https://zenodo.org/badge/89235823.svg)](https://zenodo.org/badge/latestdoi/89235823)\n\nThis 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.\n\nReact Native `Image` component needs users to set both `width` and `height` props.\n\nReact Native version requirements: \u003e=0.46.\n\n## Installation\n\n`yarn add react-native-auto-height-image`\n\n`npm install react-native-auto-height-image`\n\n## Usage\n\nUse local or remote files:\n\n```js\nimport React, { Component } from 'react';\nimport AutoHeightImage from 'react-native-auto-height-image';\n\nimport image from 'gallifrey-falls.png';\n\nexport default class Demo extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n\n        \u003cAutoHeightImage\n          width={100}\n          source={image}\n        /\u003e\n\n        \u003cAutoHeightImage\n          width={100}\n          source={{uri: 'http://placehold.it/350x150'}}\n        /\u003e\n\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nYou can even specify fallback images for when the source fails to load:\n\n```js\nimport React, { Component } from 'react';\nimport AutoHeightImage from 'react-native-auto-height-image';\n\nimport image from 'gallifrey-falls.png';\n\nexport default class Demo extends Component {\n  render() {\n    return (\n      \u003cAutoHeightImage\n        width={100}\n        source={{uri: 'https://vivaxy.github.io/404'}}\n        fallbackSource={image}\n      /\u003e\n    );\n  }\n}\n```\n\n### Props\n\n| name               | type             | isRequired    | default           | description                                                           |\n| ---                | ---              | ---           | ---               | ---                                                                   |\n| `width`            | number           | ✔             | N/A               | image width to fit                                                    |\n| `maxHeight`            | number           | ✖             | `Infinity`               | image max height                                                    |\n| `source`           | number or object | ✔             | N/A               | local (i.e. require/import) or remote image ({uri: '...'})            |\n| `fallbackSource`   | number or object | ✖             | N/A               | local (i.e. require/import) or remote image ({uri: '...'})            |\n| `onHeightChange`   | func             | ✖             | `(height) =\u003e {}`    | called when updating image height, the argument `height` might be `0` |\n| `animated`        | bool              | ✖              | `false`               | Use `Animated.Image` instead of `Image` |\n\nOther [image props](https://reactnative.dev/docs/image#props) except `resizeMode` are accepted.\n\n## Change Log\n\n[Change log](./CHANGELOG.md)\n\n## Contributing\n\n[Contributing](./CONTRIBUTING.md)\n\n## Licence\n\n[MIT](./LICENSE)\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/vivaxy/react-native-auto-height-image/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-native-auto-height-image/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-native-auto-height-image/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/react-native-auto-height-image\"\u003e\u003cimg src=\"https://opencollective.com/react-native-auto-height-image/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport 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)]\n\n\u003ca href=\"https://opencollective.com/react-native-auto-height-image\"\u003e\u003cimg src=\"https://opencollective.com/react-native-auto-height-image/organization.svg?width=890\"\u003e\u003c/a\u003e\n\n## Related Projects\n\n- [react-native-scalable-image](https://github.com/ihor/react-native-scalable-image)\n- [react-native-fit-image](https://github.com/huiseoul/react-native-fit-image)\n- [react-native-responsive-image-view](https://github.com/wKovacs64/react-native-responsive-image-view)\n- [react-native-auto-image](https://github.com/egorshulga/react-native-auto-image)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivaxy%2Freact-native-auto-height-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvivaxy%2Freact-native-auto-height-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivaxy%2Freact-native-auto-height-image/lists"}