diff --git a/autoHeightImage.js b/autoHeightImage.js index 669834f..9b6e8be 100644 --- a/autoHeightImage.js +++ b/autoHeightImage.js @@ -4,8 +4,8 @@ */ import React, { PureComponent } from 'react'; -import Image from 'react-native-android-image-polyfill'; -import { StyleSheet } from 'react-native'; +import ImagePolyfill from './imagePolyfill'; +import { StyleSheet, Image } from 'react-native'; import PropTypes from 'prop-types'; import { getImageSizeFitWidth, getImageSizeFitWidthFromCache } from './cache'; @@ -90,8 +90,11 @@ export default class AutoHeightImage extends PureComponent { render() { // remove `width` prop from `restProps` const { source, style, width, ...restProps } = this.props; + + // since it only makes sense to use polyfill when dealing with remote images + const ImageComponent = source.uri ? ImagePolyfill : Image; return ( - Platform.OS === 'android'; + +/** + * An extension of the Image class which fixes an Android bug where remote images wouldn't fire the + * Image#onError() callback when the image failed to load due to a 404 response. + * + * This component should only be used for loading remote images, not local resources. + */ +function ImagePolyfill(props) { + const { source, onError, ...rest } = props; + + const verifyImage = () => { + const { uri } = source; + Image.prefetch(uri).catch((e) => onError(e)); + }; + + useEffect(() => { + if (source && source.uri && onError && isAndroid()) { + verifyImage(); + } + }, [source, onError]); + + return ; +} + +ImagePolyfill.propTypes = Image.propTypes; +ImagePolyfill.defaultProps = Image.defaultProps; + +export default ImagePolyfill; diff --git a/package.json b/package.json index 7a1d20e..ced837f 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,7 @@ "author": "vivaxy", "license": "MIT", "dependencies": { - "prop-types": "^15.7.2", - "react-native-android-image-polyfill": "^1.0.0" + "prop-types": "^15.7.2" }, "devDependencies": { "@commitlint/cli": "^8.1.0",