Skip to content

Commit

Permalink
feat!: incorporated imagepolyfill in codebase, removed from deps
Browse files Browse the repository at this point in the history
  • Loading branch information
r3dm1ke committed Jan 8, 2020
1 parent 234be2b commit bfdca6f
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 5 deletions.
9 changes: 6 additions & 3 deletions autoHeightImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<Image
<ImageComponent
source={source}
style={[this.styles.image, style]}
{...restProps}
Expand Down
32 changes: 32 additions & 0 deletions imagePolyfill.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useEffect } from 'react';
import { Image, Platform } from 'react-native';

const isAndroid = () => 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 <Image source={source} {...rest} />;
}

ImagePolyfill.propTypes = Image.propTypes;
ImagePolyfill.defaultProps = Image.defaultProps;

export default ImagePolyfill;
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit bfdca6f

Please sign in to comment.