[
{
"path": ".editorconfig",
"content": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\ncurly_bracket_next_line = false\nspaces_around_operators = true\nindent_brace_style = 1tbs\n\n[*.js]\nquote_type = single\n\n[*.{html,less,css,json}]\nquote_type = double\n"
},
{
"path": ".github/FUNDING.yml",
"content": "patreon: vivaxy\nopen_collective: react-native-auto-height-image\ncustom: ['https://gist.github.com/vivaxy/58eed1803a2eddda05c90aed99430de2']\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a report to help us improve\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Codes:\n```js\n....\n```\n2. Click on '....'\n3. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Dependencies versions (please complete the following information):**\n - react: \n - react-native: \n\n**Additional context**\nAdd any other context about the problem here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: Feature request\nabout: Suggest an idea for this project\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
},
{
"path": ".gitignore",
"content": ".idea\n.DS_Store\n/build\nnode_modules\nnpm-debug.log\nyarn-error.log\n"
},
{
"path": ".husky/.gitignore",
"content": "_"
},
{
"path": ".husky/commit-msg",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn commitlint --edit $1\n"
},
{
"path": ".husky/pre-commit",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint-staged\n"
},
{
"path": ".npmignore",
"content": ".idea\nnode_modules\n.DS_Store\nnpm-debug.log\n.editorconfig\n/ExampleApp\n"
},
{
"path": ".npmrc",
"content": "registry=https://registry.npmjs.org/\n"
},
{
"path": ".prettierignore",
"content": "CHANGELOG.md\nREADME.md\npackage.json\nExampleApp/app.json\n"
},
{
"path": ".yarnrc",
"content": "--registry \"https://registry.npmjs.org/\"\n"
},
{
"path": "AnimatableImage.js",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Image, ImageBackground } from 'react-native';\n\nfunction AnimatableImage(props) {\n const { animated, children, ...rest } = props;\n\n const ImageComponent = children\n ? ImageBackground\n : animated\n ? Animated.Image\n : Image;\n\n return {children};\n}\n\nAnimatableImage.propTypes = Image.propTypes | Animated.Image.propTypes;\n\nAnimatableImage.defaultProps = {\n animated: false\n};\n\nexport default AnimatableImage;\n"
},
{
"path": "AutoHeightImage.js",
"content": "/**\n * @since 2017-04-11 19:10:08\n * @author vivaxy\n */\nimport React, { useEffect, useState, useRef } from 'react';\nimport ImagePolyfill from './ImagePolyfill';\nimport AnimatableImage from './AnimatableImage';\nimport PropTypes from 'prop-types';\n\nimport { getImageSizeFitWidth, getImageSizeFitWidthFromCache } from './cache';\nimport { NOOP, DEFAULT_HEIGHT } from './helpers';\n\n// remove `resizeMode` props from `Image.propTypes`\nconst { resizeMode, ...ImagePropTypes } = AnimatableImage.propTypes;\n\nfunction AutoHeightImage(props) {\n const {\n onHeightChange,\n source,\n width,\n style,\n maxHeight,\n onError,\n ...rest\n } = props;\n const [height, setHeight] = useState(\n getImageSizeFitWidthFromCache(source, width, maxHeight).height ||\n DEFAULT_HEIGHT\n );\n const mountedRef = useRef(false);\n\n useEffect(function () {\n mountedRef.current = true;\n return function () {\n mountedRef.current = false;\n };\n }, []);\n\n useEffect(\n function () {\n (async function () {\n try {\n const { height: newHeight } = await getImageSizeFitWidth(\n source,\n width,\n maxHeight\n );\n if (mountedRef.current) {\n // might trigger `onHeightChange` with same `height` value\n // dedupe maybe?\n setHeight(newHeight);\n onHeightChange(newHeight);\n }\n } catch (e) {\n onError(e);\n }\n })();\n },\n [source, onHeightChange, width, maxHeight]\n );\n\n // StyleSheet.create will cache styles, not what we want\n const imageStyles = { width, height };\n\n // Since it only makes sense to use polyfill with remote images\n const ImageComponent = source.uri ? ImagePolyfill : AnimatableImage;\n return (\n \n );\n}\n\nAutoHeightImage.propTypes = {\n ...ImagePropTypes,\n width: PropTypes.number.isRequired,\n maxHeight: PropTypes.number,\n onHeightChange: PropTypes.func,\n animated: PropTypes.bool\n};\n\nAutoHeightImage.defaultProps = {\n maxHeight: Infinity,\n onHeightChange: NOOP,\n animated: false\n};\n\nexport default AutoHeightImage;\n"
},
{
"path": "CHANGELOG.md",
"content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n### [3.2.4](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.2.3...v3.2.4) (2021-02-04)\n\n\n### Features\n\n* supports `ImageBackground` [@SoniaComp](https://github.com/SoniaComp)\n\n### [3.2.3](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.2.2...v3.2.3) (2020-10-17)\n\n\n### Bug Fixes\n\n* **deps:** update dependency expo to v39 ([9cf60e4](https://github.com/vivaxy/react-native-auto-height-image/commit/9cf60e4798742a4ef648cc39cd96af6380b7180e))\n* **deps:** update dependency react to v16.14.0 ([ed45e7e](https://github.com/vivaxy/react-native-auto-height-image/commit/ed45e7ebf50b677ccdc501a01ae813258660cfc6))\n* **deps:** update dependency react-native-web to ^0.14.0 ([1ad617f](https://github.com/vivaxy/react-native-auto-height-image/commit/1ad617fa514cb307fc72a3c34e8254843e19d9d0))\n\n### [3.2.2](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.2.1...v3.2.2) (2020-07-25)\n\n\n### Bug Fixes\n\n* **deps:** update dependency expo to v38 ([6b24bd8](https://github.com/vivaxy/react-native-auto-height-image/commit/6b24bd8c1a2f1bf7fafcb0ba3c7b558318d7d152))\n* **deps:** update dependency react-native-web to ^0.13.0 ([82d6270](https://github.com/vivaxy/react-native-auto-height-image/commit/82d6270e7e45855864fcc4fcf1ec62ee97695300))\n\n### [3.2.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.2.0...v3.2.1) (2020-06-08)\n\n## [3.2.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.1.3...v3.2.0) (2020-05-27)\n\n\n### Features\n\n* :sparkles: support `maxHeight` prop, reuse image cache on initial rendering to optimize the performance ([e5055c8](https://github.com/vivaxy/react-native-auto-height-image/commit/e5055c8e97a800581d7049140392cdedad035f48))\n\n### [3.1.3](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.1.2...v3.1.3) (2020-05-07)\n\n\n### Bug Fixes\n\n* :bug: fix `Can't perform a React state update on an unmounted component.` ([035e6a8](https://github.com/vivaxy/react-native-auto-height-image/commit/035e6a86ba39daf3c16d75d7467f925d94537023)), closes [#44](https://github.com/vivaxy/react-native-auto-height-image/issues/44)\n\n### [3.1.2](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.1.1...v3.1.2) (2020-04-18)\n\n\n### Bug Fixes\n\n* add missing symbol ([7498b82](https://github.com/vivaxy/react-native-auto-height-image/commit/7498b823bb8ac8a0f1f509fb0f083a61e57e192d))\n\n### [3.1.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.1.0...v3.1.1) (2020-04-04)\n\n\n### Bug Fixes\n\n* android crash at imagePolyfill ([21dc084](https://github.com/vivaxy/react-native-auto-height-image/commit/21dc0841c452a4178202db1beedfc7e2e72d7665))\n\n## [3.1.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v3.0.0...v3.1.0) (2020-03-31)\n\n\n### Features\n\n* animated image support ([97ff786](https://github.com/vivaxy/react-native-auto-height-image/commit/97ff786c40143599228524c1b12d4e29ba496e57))\n\n## [3.0.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v2.0.0...v3.0.0) (2020-01-17)\n\n\n### ⚠ BREAKING CHANGES\n\n* **changelog:** Drop support for react before 16.8 and react-native before 0.59\n\n* **changelog:** :memo: commit a breaking change ([03c9b81](https://github.com/vivaxy/react-native-auto-height-image/commit/03c9b81))\n\n\n### Bug Fixes\n\n* fix for fallback images ([d825375](https://github.com/vivaxy/react-native-auto-height-image/commit/d825375))\n\n\n### Features\n\n* **deps:** bumped React to ^16.8 & React Native to ^0.59.0 ([24edbc2](https://github.com/vivaxy/react-native-auto-height-image/commit/24edbc2))\n\n## [2.0.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.1.3...v2.0.0) (2020-01-09)\n\n\n### ⚠ BREAKING CHANGES\n\n* incorporated imagepolyfill in codebase, removed from deps\n\n### Features\n\n* incorporated imagepolyfill in codebase, removed from deps ([bfdca6f](https://github.com/vivaxy/react-native-auto-height-image/commit/bfdca6f))\n\n\n## [1.1.3](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.1.2...v1.1.3) (2019-10-16)\n\n\n\n\n## [1.1.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.1.0...v1.1.1) (2019-08-13)\n\n\n### Reverts\n\n* **open collective:** :rewind: revert changes to package.json ([37f3b17](https://github.com/vivaxy/react-native-auto-height-image/commit/37f3b17))\n\n\n\n\n# [1.1.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.5...v1.1.0) (2019-03-07)\n\n\n### Features\n\n* :sparkles:updateImageHeight with safe check ([a2c9275](https://github.com/vivaxy/react-native-auto-height-image/commit/a2c9275))\n\n\n\n\n## [1.0.5](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.4...v1.0.5) (2018-10-22)\n\n\n### Bug Fixes\n\n* :bug:Fix updating the image size after change of the source ([cfe1566](https://github.com/vivaxy/react-native-auto-height-image/commit/cfe1566))\n\n\n\n\n## [1.0.4](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.3...v1.0.4) (2018-10-09)\n\n\n### Bug Fixes\n\n* :bug:Remove trailing comma ([89713a5](https://github.com/vivaxy/react-native-auto-height-image/commit/89713a5))\n\n\n\n\n## [1.0.3](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.2...v1.0.3) (2018-10-09)\n\n\n### Features\n\n* Allowing Image props.\n\n\n\n\n## [1.0.2](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.1...v1.0.2) (2018-10-07)\n\n\n### Features\n\n* Add type definitions.\n\n\n\n\n## [1.0.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v1.0.0...v1.0.1) (2018-07-13)\n\n\n### Features\n\n* Reformat codes.\n\n\n\n\n# [1.0.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.4.0...v1.0.0) (2018-01-18)\n\n\n### Features\n\n* Support local images and fallback sources.\n\n\n### Breaking changes.\n\n* Remove `imageURL`, use `source` instead.\n\n\n\n\n# [0.4.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.3.4...v0.4.0) (2018-01-16)\n\n\n### Features\n\n* **onError:** :sparkles:Propagate errors to onError ([4d9a14d](https://github.com/vivaxy/react-native-auto-height-image/commit/4d9a14d))\n\n\n\n\n## [0.3.4](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.3.3...v0.3.4) (2017-12-20)\n\n\n### Features\n\n* Update image size on width change. ([7a09dc0](https://github.com/vivaxy/react-native-auto-height-image/commit/7a09dc0))\n\n\n\n\n## [0.3.3](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.3.2...v0.3.3) (2017-08-22)\n\n\n### Features\n\n* Optimize error handling from `Image.getSize`. ([80158e7](https://github.com/vivaxy/react-native-auto-height-image/commit/80158e7))\n\n\n\n\n## [0.3.2](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.3.1...v0.3.2) (2017-08-22)\n\n\n### Bug Fixes\n\n* **rejection:** :bug:Fix `Possible Unhandled Promise Rejection` warning. ([02441ba](https://github.com/vivaxy/react-native-auto-height-image/commit/02441ba)), closes [#4](https://github.com/vivaxy/react-native-auto-height-image/issues/4)\n\n\n\n\n## [0.3.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.3.0...v0.3.1) (2017-08-08)\n\n\n### Bug Fixes\n\n* :bug:Fixed syntax error in index.js. ([c384cd6](https://github.com/vivaxy/react-native-auto-height-image/commit/c384cd6))\n\n\n\n\n# [0.3.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.2.2...v0.3.0) (2017-07-31)\n\n\n### Features\n\n* **onHeightChange:** :sparkles:Provides a new api to extract the calculated height. ([18c86e6](https://github.com/vivaxy/react-native-auto-height-image/commit/18c86e6))\n\n\n\n\n## [0.2.2](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.2.1...v0.2.2) (2017-05-27)\n\n\n### Documents\n\n* Update documents.\n\n\n\n\n## [0.2.1](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.2.0...v0.2.1) (2017-04-24)\n\n\n### Bug Fixes\n\n* :bug:Fix hasLoaded logic ([1b8264c](https://github.com/vivaxy/react-native-auto-height-image/commit/1b8264c))\n\n\n\n\n# [0.2.0](https://github.com/vivaxy/react-native-auto-height-image/compare/v0.1.0...v0.2.0) (2017-04-24)\n\n\n### Features\n\n* :sparkles:Support all image props ([4088b73](https://github.com/vivaxy/react-native-auto-height-image/commit/4088b73))\n\n\n\n\n# 0.1.0 (2017-04-24)\n\n\n### Features\n\n* :tada:First Commit ([243c394](https://github.com/vivaxy/react-native-auto-height-image/commit/243c394))\n"
},
{
"path": "CITATION.cff",
"content": "cff-version: 1.1.0\nmessage: \"If you use this software, please cite it as below.\"\nauthors:\n - family-names: Xu\n given-names: Ye\n orcid: https://doi.org/10.5281/zenodo.7813210\ntitle: vivaxy/react-native-auto-height-image\nversion: v3.2.4\ndate-released: 2023-04-10\n"
},
{
"path": "CONTRIBUTING.md",
"content": "# How to initialize project?\n\n* Clone this repository.\n* Run `yarn install`. (Install `yarn` globally.)\n* Make sure you have `watchman` installed. (If not, run `brew install watchman`.)\n\n# How to run ExampleApp?\n\n* Run `cd ExampleApp`.\n* Run `yarn install`.\n* Run `yarn start`.\n\n# How to make a change?\n\n* Supply a proper test case and test your changes in ExampleApp.\n* Git commit with [Conventional Commits](https://conventionalcommits.org/).\n* Bump version and publish with `npm run release`. This will update `CHANGELOG.md` automatically.\n\n# How to release a beta/test version?\n\n* Run `yarn release:beta`.\n\n# How to release a stable version?\n\n* Run `yarn release`.\n"
},
{
"path": "ErrorableImage.js",
"content": "import React, { useState } from 'react';\n\nimport AutoHeightImage from './AutoHeightImage';\n\nfunction ErrorableImage(props) {\n const { source, fallbackSource, onError, ...rest } = props;\n\n const [error, setError] = useState(false);\n\n const shouldUseFallbackSource = error && fallbackSource;\n\n return (\n {\n // if an error hasn't already been seen, try to load the error image\n // instead\n if (!error) {\n setError(true);\n }\n\n // also propagate to error handler if it is specified\n onError && onError(_e);\n }}\n {...rest}\n />\n );\n}\n\nexport default ErrorableImage;\n"
},
{
"path": "ExampleApp/.expo-shared/assets.json",
"content": "{\n \"f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd\": true,\n \"89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44\": true\n}\n"
},
{
"path": "ExampleApp/.gitignore",
"content": "node_modules/**/*\n.expo/*\nnpm-debug.*\n*.jks\n*.p8\n*.p12\n*.key\n*.mobileprovision\n*.orig.*\nweb-build/\nweb-report/\n"
},
{
"path": "ExampleApp/.watchmanconfig",
"content": "{}\n"
},
{
"path": "ExampleApp/App.js",
"content": "import React, { Component } from 'react';\nimport AutoHeightImage from 'react-native-auto-height-image';\nimport {\n StyleSheet,\n Text,\n ScrollView,\n TextInput,\n Animated\n} from 'react-native';\n\nimport image from './assets/image.png';\n\nexport default class App extends Component {\n state = {\n dynamicWidth: 200,\n fadeAnim: new Animated.Value(0)\n };\n\n handleTextInputChange = (text) => {\n const width = Number(text);\n if (!Number.isNaN(width)) {\n this.setState({ dynamicWidth: width });\n }\n };\n\n fadeIn = () => {\n Animated.timing(this.state.fadeAnim, {\n toValue: 1,\n duration: 5000,\n useNativeDriver: true\n }).start();\n };\n\n componentDidMount() {\n this.fadeIn();\n }\n\n render() {\n const { dynamicWidth } = this.state;\n return (\n \n \n Basic example\n \n Basic example with local image\n \n Basic example with dynamic width\n \n Basic example with dynamic width and local image\n \n Wrong image\n {\n console.log('----- onError', error);\n }}\n />\n Wrong image with fallback\n {\n console.log('----- onError', error);\n }}\n />\n Wrong image with local fallback\n {\n console.log('----- onError', error);\n }}\n />\n AnimatableImage\n \n ImageBackground\n \n \n You can make any Child Component!\n \n \n \n );\n }\n}\n\nconst styles = StyleSheet.create({\n scrollViewContainer: {\n flex: 1,\n backgroundColor: '#fff',\n marginTop: 20\n },\n scrollViewContentContainer: {\n alignItems: 'center',\n paddingTop: 100\n },\n textInputStyle: {\n width: 300,\n height: 30,\n borderStyle: 'solid',\n borderColor: '#eee',\n borderWidth: 1\n },\n fadingContainer: {\n paddingVertical: 8,\n paddingHorizontal: 16,\n backgroundColor: 'powderblue'\n },\n textStyle: {\n color: 'white'\n }\n});\n"
},
{
"path": "ExampleApp/app.json",
"content": "{\n \"expo\": {\n \"name\": \"ExampleApp for react-native-auto-height-image component\",\n \"slug\": \"example-app-for-react-native-auto-height-image-component\",\n \"privacy\": \"public\",\n \"version\": \"1.0.0\",\n \"orientation\": \"portrait\",\n \"icon\": \"./assets/icon.png\",\n \"splash\": {\n \"image\": \"./assets/splash.png\",\n \"resizeMode\": \"contain\",\n \"backgroundColor\": \"#ffffff\"\n },\n \"updates\": {\n \"fallbackToCacheTimeout\": 0\n },\n \"assetBundlePatterns\": [\n \"**/*\"\n ],\n \"ios\": {\n \"supportsTablet\": true\n },\n \"description\": \"ExampleApp for react-native-auto-height-image component\",\n \"githubUrl\": \"https://github.com/vivaxy/react-native-auto-height-image/tree/master/ExampleApp\"\n }\n}\n"
},
{
"path": "ExampleApp/babel.config.js",
"content": "module.exports = function(api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo']\n };\n};\n"
},
{
"path": "ExampleApp/package.json",
"content": "{\n \"main\": \"node_modules/expo/AppEntry.js\",\n \"scripts\": {\n \"start\": \"expo start\",\n \"android\": \"expo start --android\",\n \"ios\": \"expo start --ios\",\n \"web\": \"expo start --web\",\n \"eject\": \"expo eject\",\n \"postinstall\": \"rm -rf ./node_modules/react-native-auto-height-image/node_modules && rm -rf ./node_modules/react-native-auto-height-image/ExampleApp\"\n },\n \"dependencies\": {\n \"expo\": \"~41.0.0\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"react-native\": \"https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz\",\n \"react-native-auto-height-image\": \"file:..\",\n \"react-native-web\": \"~0.16.0\"\n },\n \"devDependencies\": {\n \"babel-preset-expo\": \"^8.0.0\"\n },\n \"private\": true\n}\n"
},
{
"path": "ImagePolyfill.js",
"content": "import React, { useEffect } from 'react';\nimport { Platform, Image } from 'react-native';\nimport AnimatableImage from './AnimatableImage';\n\nconst isAndroid = () => Platform.OS === 'android';\n\n/**\n * An extension of the Image class which fixes an Android bug where remote images wouldn't fire the\n * Image#onError() callback when the image failed to load due to a 404 response.\n *\n * This component should only be used for loading remote images, not local resources.\n */\nfunction ImagePolyfill(props) {\n const { source, onError, ...rest } = props;\n\n const verifyImage = () => {\n const { uri } = source;\n Image.prefetch(uri).catch((e) => onError(e));\n };\n\n useEffect(() => {\n if (source && source.uri && onError && isAndroid()) {\n verifyImage();\n }\n }, [source, onError]);\n\n return ;\n}\n\nImagePolyfill.propTypes = AnimatableImage.propTypes;\nImagePolyfill.defaultProps = AnimatableImage.defaultProps;\n\nexport default ImagePolyfill;\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2017 vivaxy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# react-native-auto-height-image\n\nInitialized by [vivaxy/gt-npm-package](https://github.com/vivaxy/gt-npm-package)\n\n[](https://www.npmjs.com/package/react-native-auto-height-image)\n[](https://www.npmjs.com/package/react-native-auto-height-image)\n[](./LICENSE)\n[](https://conventionalcommits.org)\n[](https://opencollective.com/react-native-auto-height-image)\n[](https://github.com/vivaxy/react-native-auto-height-image/issues/88)\n[](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: >=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 \n\n \n\n \n\n \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 \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) => {}` | 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![](\"https://opencollective.com/react-native-auto-height-image/contributors.svg?width=890&button=false\")
\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![](\"https://opencollective.com/react-native-auto-height-image/individuals.svg?width=890\")
\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![](\"https://opencollective.com/react-native-auto-height-image/organization.svg?width=890\")
\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"
},
{
"path": "cache.js",
"content": "/**\n * @since 2017-04-24 20:50:41\n * @author vivaxy\n */\n\nimport { Image } from 'react-native';\n// undocumented but part of react-native; see\n// https://github.com/facebook/react-native/issues/5603#issuecomment-297959695\nimport resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';\n\n/**\n * store with\n * key: image\n * value: {\n * width: 100,\n * height: 100,\n * }\n */\nconst cache = new Map();\n\nconst getImageSizeFromCache = (image) => {\n if (typeof image === 'number') {\n return cache.get(image);\n } else {\n return cache.get(image.uri);\n }\n};\n\nconst loadImageSize = (image) => {\n return new Promise((resolve, reject) => {\n //number indicates import X or require(X) was used (i.e. local file)\n if (typeof image === 'number') {\n const { width, height } = resolveAssetSource(image);\n resolve({ width, height });\n } else {\n Image.getSize(\n image.uri,\n (width, height) => {\n // success\n resolve({ width, height });\n },\n reject\n );\n }\n });\n};\n\nexport const getImageSizeFitWidthFromCache = (image, toWidth, maxHeight) => {\n const size = getImageSizeFromCache(image);\n if (size) {\n const { width, height } = size;\n if (!width || !height) return { width: 0, height: 0 };\n const scaledHeight = (toWidth * height) / width;\n return {\n width: toWidth,\n height: scaledHeight > maxHeight ? maxHeight : scaledHeight\n };\n }\n return {};\n};\n\nconst getImageSizeMaybeFromCache = async (image) => {\n let size = getImageSizeFromCache(image);\n if (!size) {\n size = await loadImageSize(image);\n if (typeof image === 'number') {\n cache.set(image, size);\n } else {\n cache.set(image.uri, size);\n }\n }\n return size;\n};\n\nexport const getImageSizeFitWidth = async (image, toWidth, maxHeight) => {\n const { width, height } = await getImageSizeMaybeFromCache(image);\n if (!width || !height) return { width: 0, height: 0 };\n const scaledHeight = (toWidth * height) / width;\n return {\n width: toWidth,\n height: scaledHeight > maxHeight ? maxHeight : scaledHeight\n };\n};\n"
},
{
"path": "helpers.js",
"content": "export const NOOP = () => {};\nexport const DEFAULT_HEIGHT = 0;\n"
},
{
"path": "index.d.ts",
"content": "import * as React from 'react';\nimport { ImageProps } from 'react-native';\n\ninterface TSource {\n uri: string;\n}\n\nexport interface AutoHeightImageProps extends ImageProps {\n source: number | TSource;\n width: number;\n maxHeight?: number;\n fallbackSource?: number | TSource;\n onHeightChange?: (height: number) => void;\n animated?: boolean;\n}\n\ndeclare class AutoHeightImage extends React.Component<\n AutoHeightImageProps,\n any\n> {}\n\nexport default AutoHeightImage;\n"
},
{
"path": "index.js",
"content": "import ErrorableImage from './ErrorableImage';\n\nexport default ErrorableImage;\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-native-auto-height-image\",\n \"version\": \"3.2.4\",\n \"description\": \"react-native auto height image\",\n \"main\": \"./index.js\",\n \"typings\": \"./index.d.ts\",\n \"scripts\": {\n \"release\": \"standard-version && git push --follow-tags && npm publish\",\n \"release:beta\": \"standard-version --prerelease beta && git push --follow-tags && npm publish\",\n \"postinstall\": \"husky install\",\n \"prepublishOnly\": \"pinst --disable\",\n \"postpublish\": \"pinst --enable\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git@github.com:vivaxy/react-native-auto-height-image.git\"\n },\n \"keywords\": [\n \"react-native\",\n \"image\",\n \"auto-height\",\n \"react\",\n \"images\"\n ],\n \"author\": \"vivaxy\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"prop-types\": \"^15.7.2\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"^12.0.0\",\n \"@commitlint/config-conventional\": \"^12.0.0\",\n \"husky\": \"6\",\n \"lint-staged\": \"^11.0.0\",\n \"pinst\": \"^2.1.4\",\n \"prettier\": \"^2.0.0\",\n \"react\": \"^17.0.0\",\n \"react-native\": \"^0.64.0\",\n \"standard-version\": \"^9.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \"^17.0.0\",\n \"react-native\": \"^0.64.0\"\n },\n \"lint-staged\": {\n \"**/**.{js,json,md,ts}\": [\n \"prettier --write\",\n \"git add\"\n ]\n },\n \"prettier\": {\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"arrowParens\": \"always\"\n },\n \"commitlint\": {\n \"extends\": [\n \"@commitlint/config-conventional\"\n ],\n \"rules\": {\n \"header-max-length\": [\n 0,\n \"never\"\n ]\n }\n }\n}\n"
},
{
"path": "renovate.json",
"content": "{\n \"extends\": [\n \"config:base\",\n \":preserveSemverRanges\"\n ]\n}\n"
}
]