status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Revert D8576087: [RN][Android] Image with null source should still respect `style` 

Differential Revision:
D8576087

Original commit changeset: 685ed967e301

fbshipit-source-id: 97a8ab9757a2f5a0d72bbc1e020354c306e48a15
This commit is contained in:
Himabindu Gadupudi 2018-06-25 15:55:33 -07:00 committed by Facebook Github Bot
parent 77a9cba0c0
commit bdf0eadab3
2 changed files with 395 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

607
Libraries/Image/Image.android.js
View File

@ -1,300 +1,307 @@
/** /**
* Copyright (c) 2015-present, Facebook, Inc. * Copyright (c) 2015-present, Facebook, Inc.
* *
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
* *
* @flow * @flow
* @format * @format
*/ */
'use strict'; 'use strict';
const ImageStylePropTypes = require('ImageStylePropTypes'); const ImageStylePropTypes = require('ImageStylePropTypes');
const NativeModules = require('NativeModules'); const NativeModules = require('NativeModules');
const React = require('React'); const React = require('React');
const ReactNative = require('ReactNative'); const ReactNative = require('ReactNative');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const StyleSheet = require('StyleSheet'); const StyleSheet = require('StyleSheet');
const StyleSheetPropType = require('StyleSheetPropType'); const StyleSheetPropType = require('StyleSheetPropType');
const TextAncestor = require('TextAncestor'); const TextAncestor = require('TextAncestor');
const ViewPropTypes = require('ViewPropTypes'); const ViewPropTypes = require('ViewPropTypes');
const flattenStyle = require('flattenStyle'); const flattenStyle = require('flattenStyle');
const merge = require('merge'); const merge = require('merge');
const requireNativeComponent = require('requireNativeComponent'); const requireNativeComponent = require('requireNativeComponent');
const resolveAssetSource = require('resolveAssetSource'); const resolveAssetSource = require('resolveAssetSource');
const {ImageLoader} = NativeModules; const {ImageLoader} = NativeModules;
const RKImage = requireNativeComponent('RCTImageView'); const RKImage = requireNativeComponent('RCTImageView');
const RCTTextInlineImage = requireNativeComponent('RCTTextInlineImage'); const RCTTextInlineImage = requireNativeComponent('RCTTextInlineImage');
import type {ImageProps as ImagePropsType} from 'ImageProps'; import type {ImageProps as ImagePropsType} from 'ImageProps';
let _requestId = 1; let _requestId = 1;
function generateRequestId() { function generateRequestId() {
return _requestId++; return _requestId++;
} }
const ImageProps = { const ImageProps = {
...ViewPropTypes, ...ViewPropTypes,
style: StyleSheetPropType(ImageStylePropTypes), style: StyleSheetPropType(ImageStylePropTypes),
/** /**
* See https://facebook.github.io/react-native/docs/image.html#source * See https://facebook.github.io/react-native/docs/image.html#source
*/ */
source: PropTypes.oneOfType([ source: PropTypes.oneOfType([
PropTypes.shape({ PropTypes.shape({
uri: PropTypes.string, uri: PropTypes.string,
headers: PropTypes.objectOf(PropTypes.string), headers: PropTypes.objectOf(PropTypes.string),
}), }),
// Opaque type returned by require('./image.jpg') // Opaque type returned by require('./image.jpg')
PropTypes.number, PropTypes.number,
// Multiple sources // Multiple sources
PropTypes.arrayOf( PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
uri: PropTypes.string, uri: PropTypes.string,
width: PropTypes.number, width: PropTypes.number,
height: PropTypes.number, height: PropTypes.number,
headers: PropTypes.objectOf(PropTypes.string), headers: PropTypes.objectOf(PropTypes.string),
}), }),
), ),
]), ]),
/** /**
* blurRadius: the blur radius of the blur filter added to the image * blurRadius: the blur radius of the blur filter added to the image
* *
* See https://facebook.github.io/react-native/docs/image.html#blurradius * See https://facebook.github.io/react-native/docs/image.html#blurradius
*/ */
blurRadius: PropTypes.number, blurRadius: PropTypes.number,
/** /**
* See https://facebook.github.io/react-native/docs/image.html#defaultsource * See https://facebook.github.io/react-native/docs/image.html#defaultsource
*/ */
defaultSource: PropTypes.number, defaultSource: PropTypes.number,
/** /**
* See https://facebook.github.io/react-native/docs/image.html#loadingindicatorsource * See https://facebook.github.io/react-native/docs/image.html#loadingindicatorsource
*/ */
loadingIndicatorSource: PropTypes.oneOfType([ loadingIndicatorSource: PropTypes.oneOfType([
PropTypes.shape({ PropTypes.shape({
uri: PropTypes.string, uri: PropTypes.string,
}), }),
// Opaque type returned by require('./image.jpg') // Opaque type returned by require('./image.jpg')
PropTypes.number, PropTypes.number,
]), ]),
progressiveRenderingEnabled: PropTypes.bool, progressiveRenderingEnabled: PropTypes.bool,
fadeDuration: PropTypes.number, fadeDuration: PropTypes.number,
/** /**
* Invoked on load start * Invoked on load start
*/ */
onLoadStart: PropTypes.func, onLoadStart: PropTypes.func,
/** /**
* Invoked on load error * Invoked on load error
*/ */
onError: PropTypes.func, onError: PropTypes.func,
/** /**
* Invoked when load completes successfully * Invoked when load completes successfully
*/ */
onLoad: PropTypes.func, onLoad: PropTypes.func,
/** /**
* Invoked when load either succeeds or fails * Invoked when load either succeeds or fails
*/ */
onLoadEnd: PropTypes.func, onLoadEnd: PropTypes.func,
/** /**
* Used to locate this view in end-to-end tests. * Used to locate this view in end-to-end tests.
*/ */
testID: PropTypes.string, testID: PropTypes.string,
/** /**
* The mechanism that should be used to resize the image when the image's dimensions * The mechanism that should be used to resize the image when the image's dimensions
* differ from the image view's dimensions. Defaults to `auto`. * differ from the image view's dimensions. Defaults to `auto`.
* *
* See https://facebook.github.io/react-native/docs/image.html#resizemethod * See https://facebook.github.io/react-native/docs/image.html#resizemethod
*/ */
resizeMethod: PropTypes.oneOf(['auto', 'resize', 'scale']), resizeMethod: PropTypes.oneOf(['auto', 'resize', 'scale']),
/** /**
* Determines how to resize the image when the frame doesn't match the raw * Determines how to resize the image when the frame doesn't match the raw
* image dimensions. * image dimensions.
* *
* See https://facebook.github.io/react-native/docs/image.html#resizemode * See https://facebook.github.io/react-native/docs/image.html#resizemode
*/ */
resizeMode: PropTypes.oneOf([ resizeMode: PropTypes.oneOf([
'cover', 'cover',
'contain', 'contain',
'stretch', 'stretch',
'repeat', 'repeat',
'center', 'center',
]), ]),
}; };
function getSize( function getSize(
url: string, url: string,
success: (width: number, height: number) => void, success: (width: number, height: number) => void,
failure?: (error: any) => void, failure?: (error: any) => void,
) { ) {
return ImageLoader.getSize(url) return ImageLoader.getSize(url)
.then(function(sizes) { .then(function(sizes) {
success(sizes.width, sizes.height); success(sizes.width, sizes.height);
}) })
.catch( .catch(
failure || failure ||
function() { function() {
console.warn('Failed to get size for image: ' + url); console.warn('Failed to get size for image: ' + url);
}, },
); );
} }
function prefetch(url: string, callback: ?Function) { function prefetch(url: string, callback: ?Function) {
const requestId = generateRequestId(); const requestId = generateRequestId();
callback && callback(requestId); callback && callback(requestId);
return ImageLoader.prefetchImage(url, requestId); return ImageLoader.prefetchImage(url, requestId);
} }
function abortPrefetch(requestId: number) { function abortPrefetch(requestId: number) {
ImageLoader.abortRequest(requestId); ImageLoader.abortRequest(requestId);
} }
/** /**
* Perform cache interrogation. * Perform cache interrogation.
* *
* See https://facebook.github.io/react-native/docs/image.html#querycache * See https://facebook.github.io/react-native/docs/image.html#querycache
*/ */
async function queryCache( async function queryCache(
urls: Array<string>, urls: Array<string>,
): Promise<Map<string, 'memory' | 'disk'>> { ): Promise<Map<string, 'memory' | 'disk'>> {
return await ImageLoader.queryCache(urls); return await ImageLoader.queryCache(urls);
} }
declare class ImageComponentType extends ReactNative.NativeComponent< declare class ImageComponentType extends ReactNative.NativeComponent<
ImagePropsType, ImagePropsType,
> { > {
static getSize: typeof getSize; static getSize: typeof getSize;
static prefetch: typeof prefetch; static prefetch: typeof prefetch;
static abortPrefetch: typeof abortPrefetch; static abortPrefetch: typeof abortPrefetch;
static queryCache: typeof queryCache; static queryCache: typeof queryCache;
static resolveAssetSource: typeof resolveAssetSource; static resolveAssetSource: typeof resolveAssetSource;
static propTypes: typeof ImageProps; static propTypes: typeof ImageProps;
} }
/** /**
* A React component for displaying different types of images, * A React component for displaying different types of images,
* including network images, static resources, temporary local images, and * including network images, static resources, temporary local images, and
* images from local disk, such as the camera roll. * images from local disk, such as the camera roll.
* *
* See https://facebook.github.io/react-native/docs/image.html * See https://facebook.github.io/react-native/docs/image.html
*/ */
let Image = ( let Image = (
props: ImagePropsType, props: ImagePropsType,
forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'RKImage'>, forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'RKImage'>,
) => { ) => {
const source = resolveAssetSource(props.source); const source = resolveAssetSource(props.source);
const defaultSource = resolveAssetSource(props.defaultSource); const defaultSource = resolveAssetSource(props.defaultSource);
const loadingIndicatorSource = resolveAssetSource( const loadingIndicatorSource = resolveAssetSource(
props.loadingIndicatorSource, props.loadingIndicatorSource,
); );
if (source && source.uri === '') { // As opposed to the ios version, here we render `null` when there is no source, source.uri
console.warn('source.uri should not be an empty string'); // or source array.
}
if (source && source.uri === '') {
if (props.src) { console.warn('source.uri should not be an empty string');
console.warn( }
'The <Image> component requires a `source` property rather than `src`.',
); if (props.src) {
} console.warn(
'The <Image> component requires a `source` property rather than `src`.',
if (props.children) { );
throw new Error( }
'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
); if (props.children) {
} throw new Error(
'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
if (props.defaultSource && props.loadingIndicatorSource) { );
throw new Error( }
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
); if (props.defaultSource && props.loadingIndicatorSource) {
} throw new Error(
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
let style; );
let sources; }
if (source?.uri != null) {
const {width, height} = source; if (!source || (!source.uri && !Array.isArray(source))) {
style = flattenStyle([{width, height}, styles.base, props.style]); return null;
sources = [{uri: source.uri}]; }
} else {
style = flattenStyle([styles.base, props.style]); let style;
sources = source; let sources;
} if (source.uri) {
const {width, height} = source;
const {onLoadStart, onLoad, onLoadEnd, onError} = props; style = flattenStyle([{width, height}, styles.base, props.style]);
const nativeProps = merge(props, { sources = [{uri: source.uri}];
style, } else {
shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError), style = flattenStyle([styles.base, props.style]);
src: sources, sources = source;
headers: source?.headers, }
defaultSrc: defaultSource ? defaultSource.uri : null,
loadingIndicatorSrc: loadingIndicatorSource const {onLoadStart, onLoad, onLoadEnd, onError} = props;
? loadingIndicatorSource.uri const nativeProps = merge(props, {
: null, style,
ref: forwardedRef, shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
}); src: sources,
headers: source.headers,
return ( defaultSrc: defaultSource ? defaultSource.uri : null,
<TextAncestor.Consumer> loadingIndicatorSrc: loadingIndicatorSource
{hasTextAncestor => ? loadingIndicatorSource.uri
hasTextAncestor ? ( : null,
<RCTTextInlineImage {...nativeProps} /> ref: forwardedRef,
) : ( });
<RKImage {...nativeProps} />
) return (
} <TextAncestor.Consumer>
</TextAncestor.Consumer> {hasTextAncestor =>
); hasTextAncestor ? (
}; <RCTTextInlineImage {...nativeProps} />
) : (
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. <RKImage {...nativeProps} />
Image = React.forwardRef(Image); )
}
/** </TextAncestor.Consumer>
* Prefetches a remote image for later use by downloading it to the disk );
* cache };
*
* See https://facebook.github.io/react-native/docs/image.html#prefetch // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
*/ Image = React.forwardRef(Image);
Image.getSize = getSize;
/**
/** * Prefetches a remote image for later use by downloading it to the disk
* Prefetches a remote image for later use by downloading it to the disk * cache
* cache *
* * See https://facebook.github.io/react-native/docs/image.html#prefetch
* See https://facebook.github.io/react-native/docs/image.html#prefetch */
*/ Image.getSize = getSize;
Image.prefetch = prefetch;
/**
/** * Prefetches a remote image for later use by downloading it to the disk
* Abort prefetch request. * cache
* *
* See https://facebook.github.io/react-native/docs/image.html#abortprefetch * See https://facebook.github.io/react-native/docs/image.html#prefetch
*/ */
Image.abortPrefetch = abortPrefetch; Image.prefetch = prefetch;
/** /**
* Perform cache interrogation. * Abort prefetch request.
* *
* See https://facebook.github.io/react-native/docs/image.html#querycache * See https://facebook.github.io/react-native/docs/image.html#abortprefetch
*/ */
Image.queryCache = queryCache; Image.abortPrefetch = abortPrefetch;
/** /**
* Resolves an asset reference into an object. * Perform cache interrogation.
* *
* See https://facebook.github.io/react-native/docs/image.html#resolveassetsource * See https://facebook.github.io/react-native/docs/image.html#querycache
*/ */
Image.resolveAssetSource = resolveAssetSource; Image.queryCache = queryCache;
Image.propTypes = ImageProps; /**
* Resolves an asset reference into an object.
const styles = StyleSheet.create({ *
base: { * See https://facebook.github.io/react-native/docs/image.html#resolveassetsource
overflow: 'hidden', */
}, Image.resolveAssetSource = resolveAssetSource;
});
Image.propTypes = ImageProps;
module.exports = (Image: Class<ImageComponentType>);
const styles = StyleSheet.create({
base: {
overflow: 'hidden',
},
});
module.exports = (Image: Class<ImageComponentType>);

181
ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java
View File

@ -1,9 +1,9 @@
/** /**
* Copyright (c) 2015-present, Facebook, Inc. * Copyright (c) 2015-present, Facebook, Inc.
* *
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
package com.facebook.react.views.image; package com.facebook.react.views.image;
@ -63,29 +63,26 @@ import java.util.List;
import javax.annotation.Nullable; import javax.annotation.Nullable;
/** /**
* Wrapper class around Fresco's GenericDraweeView, enabling persisting props across multiple view * Wrapper class around Fresco's GenericDraweeView, enabling persisting props across multiple view
* update and consistent processing of both static and network images. * update and consistent processing of both static and network images.
*/ */
public class ReactImageView extends GenericDraweeView { public class ReactImageView extends GenericDraweeView {
public static final int REMOTE_IMAGE_FADE_DURATION_MS = 300; public static final int REMOTE_IMAGE_FADE_DURATION_MS = 300;
public static final String REMOTE_TRANSPARENT_BITMAP_URI =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
private static float[] sComputedCornerRadii = new float[4]; private static float[] sComputedCornerRadii = new float[4];
/* /*
* Implementation note re rounded corners: * Implementation note re rounded corners:
* *
* Fresco's built-in rounded corners only work for 'cover' resize mode - * Fresco's built-in rounded corners only work for 'cover' resize mode -
* this is a limitation in Android itself. Fresco has a workaround for this, but * this is a limitation in Android itself. Fresco has a workaround for this, but
* it requires knowing the background color. * it requires knowing the background color.
* *
* So for the other modes, we use a postprocessor. * So for the other modes, we use a postprocessor.
* Because the postprocessor uses a modified bitmap, that would just get cropped in * Because the postprocessor uses a modified bitmap, that would just get cropped in
* 'cover' mode, so we fall back to Fresco's normal implementation. * 'cover' mode, so we fall back to Fresco's normal implementation.
*/ */
private static final Matrix sMatrix = new Matrix(); private static final Matrix sMatrix = new Matrix();
private static final Matrix sInverse = new Matrix(); private static final Matrix sInverse = new Matrix();
private ImageResizeMethod mResizeMethod = ImageResizeMethod.AUTO; private ImageResizeMethod mResizeMethod = ImageResizeMethod.AUTO;
@ -94,12 +91,12 @@ public class ReactImageView extends GenericDraweeView {
void getRadii(Bitmap source, float[] computedCornerRadii, float[] mappedRadii) { void getRadii(Bitmap source, float[] computedCornerRadii, float[] mappedRadii) {
mScaleType.getTransform( mScaleType.getTransform(
sMatrix, sMatrix,
new Rect(0, 0, source.getWidth(), source.getHeight()), new Rect(0, 0, source.getWidth(), source.getHeight()),
source.getWidth(), source.getWidth(),
source.getHeight(), source.getHeight(),
0.0f, 0.0f,
0.0f); 0.0f);
sMatrix.invert(sInverse); sMatrix.invert(sInverse);
mappedRadii[0] = sInverse.mapRadius(computedCornerRadii[0]); mappedRadii[0] = sInverse.mapRadius(computedCornerRadii[0]);
@ -121,9 +118,9 @@ public class ReactImageView extends GenericDraweeView {
output.setHasAlpha(true); output.setHasAlpha(true);
if (FloatUtil.floatsEqual(sComputedCornerRadii[0], 0f) && if (FloatUtil.floatsEqual(sComputedCornerRadii[0], 0f) &&
FloatUtil.floatsEqual(sComputedCornerRadii[1], 0f) && FloatUtil.floatsEqual(sComputedCornerRadii[1], 0f) &&
FloatUtil.floatsEqual(sComputedCornerRadii[2], 0f) && FloatUtil.floatsEqual(sComputedCornerRadii[2], 0f) &&
FloatUtil.floatsEqual(sComputedCornerRadii[3], 0f)) { FloatUtil.floatsEqual(sComputedCornerRadii[3], 0f)) {
super.process(output, source); super.process(output, source);
return; return;
} }
@ -139,9 +136,9 @@ public class ReactImageView extends GenericDraweeView {
Path pathForBorderRadius = new Path(); Path pathForBorderRadius = new Path();
pathForBorderRadius.addRoundRect( pathForBorderRadius.addRoundRect(
new RectF(0, 0, source.getWidth(), source.getHeight()), new RectF(0, 0, source.getWidth(), source.getHeight()),
radii, radii,
Path.Direction.CW); Path.Direction.CW);
canvas.drawPath(pathForBorderRadius, paint); canvas.drawPath(pathForBorderRadius, paint);
} }
@ -157,12 +154,12 @@ public class ReactImageView extends GenericDraweeView {
final Rect destRect = new Rect(0, 0, getWidth(), getHeight()); final Rect destRect = new Rect(0, 0, getWidth(), getHeight());
mScaleType.getTransform( mScaleType.getTransform(
sTileMatrix, sTileMatrix,
destRect, destRect,
source.getWidth(), source.getWidth(),
source.getHeight(), source.getHeight(),
0.0f, 0.0f,
0.0f); 0.0f);
Paint paint = new Paint(); Paint paint = new Paint();
paint.setAntiAlias(true); paint.setAntiAlias(true);
@ -212,15 +209,15 @@ public class ReactImageView extends GenericDraweeView {
// We can't specify rounding in XML, so have to do so here // We can't specify rounding in XML, so have to do so here
private static GenericDraweeHierarchy buildHierarchy(Context context) { private static GenericDraweeHierarchy buildHierarchy(Context context) {
return new GenericDraweeHierarchyBuilder(context.getResources()) return new GenericDraweeHierarchyBuilder(context.getResources())
.setRoundingParams(RoundingParams.fromCornersRadius(0)) .setRoundingParams(RoundingParams.fromCornersRadius(0))
.build(); .build();
} }
public ReactImageView( public ReactImageView(
Context context, Context context,
AbstractDraweeControllerBuilder draweeControllerBuilder, AbstractDraweeControllerBuilder draweeControllerBuilder,
@Nullable GlobalImageLoadListener globalImageLoadListener, @Nullable GlobalImageLoadListener globalImageLoadListener,
@Nullable Object callerContext) { @Nullable Object callerContext) {
super(context, buildHierarchy(context)); super(context, buildHierarchy(context));
mScaleType = ImageResizeMode.defaultValue(); mScaleType = ImageResizeMode.defaultValue();
mDraweeControllerBuilder = draweeControllerBuilder; mDraweeControllerBuilder = draweeControllerBuilder;
@ -241,29 +238,29 @@ public class ReactImageView extends GenericDraweeView {
@Override @Override
public void onSubmit(String id, Object callerContext) { public void onSubmit(String id, Object callerContext) {
mEventDispatcher.dispatchEvent( mEventDispatcher.dispatchEvent(
new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_START)); new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_START));
} }
@Override @Override
public void onFinalImageSet( public void onFinalImageSet(
String id, String id,
@Nullable final ImageInfo imageInfo, @Nullable final ImageInfo imageInfo,
@Nullable Animatable animatable) { @Nullable Animatable animatable) {
if (imageInfo != null) { if (imageInfo != null) {
mEventDispatcher.dispatchEvent( mEventDispatcher.dispatchEvent(
new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD, new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD,
mImageSource.getSource(), imageInfo.getWidth(), imageInfo.getHeight())); mImageSource.getSource(), imageInfo.getWidth(), imageInfo.getHeight()));
mEventDispatcher.dispatchEvent( mEventDispatcher.dispatchEvent(
new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_END)); new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_END));
} }
} }
@Override @Override
public void onFailure(String id, Throwable throwable) { public void onFailure(String id, Throwable throwable) {
mEventDispatcher.dispatchEvent( mEventDispatcher.dispatchEvent(
new ImageLoadEvent(getId(), ImageLoadEvent.ON_ERROR)); new ImageLoadEvent(getId(), ImageLoadEvent.ON_ERROR));
mEventDispatcher.dispatchEvent( mEventDispatcher.dispatchEvent(
new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_END)); new ImageLoadEvent(getId(), ImageLoadEvent.ON_LOAD_END));
} }
}; };
} }
@ -341,10 +338,7 @@ public class ReactImageView extends GenericDraweeView {
public void setSource(@Nullable ReadableArray sources) { public void setSource(@Nullable ReadableArray sources) {
mSources.clear(); mSources.clear();
if (sources == null || sources.size() == 0) { if (sources != null && sources.size() != 0) {
ImageSource imageSource = new ImageSource(getContext(), REMOTE_TRANSPARENT_BITMAP_URI);
mSources.add(imageSource);
} else {
// Optimize for the case where we have just one uri, case in which we don't need the sizes // Optimize for the case where we have just one uri, case in which we don't need the sizes
if (sources.size() == 1) { if (sources.size() == 1) {
ReadableMap source = sources.getMap(0); ReadableMap source = sources.getMap(0);
@ -359,10 +353,10 @@ public class ReactImageView extends GenericDraweeView {
ReadableMap source = sources.getMap(idx); ReadableMap source = sources.getMap(idx);
String uri = source.getString("uri"); String uri = source.getString("uri");
ImageSource imageSource = new ImageSource( ImageSource imageSource = new ImageSource(
getContext(), getContext(),
uri, uri,
source.getDouble("width"), source.getDouble("width"),
source.getDouble("height")); source.getDouble("height"));
mSources.add(imageSource); mSources.add(imageSource);
if (Uri.EMPTY.equals(imageSource.getUri())) { if (Uri.EMPTY.equals(imageSource.getUri())) {
warnImageSource(uri); warnImageSource(uri);
@ -381,7 +375,7 @@ public class ReactImageView extends GenericDraweeView {
public void setLoadingIndicatorSource(@Nullable String name) { public void setLoadingIndicatorSource(@Nullable String name) {
Drawable drawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name); Drawable drawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
mLoadingImageDrawable = mLoadingImageDrawable =
drawable != null ? (Drawable) new AutoRotateDrawable(drawable, 1000) : null; drawable != null ? (Drawable) new AutoRotateDrawable(drawable, 1000) : null;
mIsDirty = true; mIsDirty = true;
} }
@ -446,8 +440,8 @@ public class ReactImageView extends GenericDraweeView {
} }
boolean usePostprocessorScaling = boolean usePostprocessorScaling =
mScaleType != ScalingUtils.ScaleType.CENTER_CROP && mScaleType != ScalingUtils.ScaleType.CENTER_CROP &&
mScaleType != ScalingUtils.ScaleType.FOCUS_CROP; mScaleType != ScalingUtils.ScaleType.FOCUS_CROP;
RoundingParams roundingParams = hierarchy.getRoundingParams(); RoundingParams roundingParams = hierarchy.getRoundingParams();
@ -474,9 +468,9 @@ public class ReactImageView extends GenericDraweeView {
} }
hierarchy.setRoundingParams(roundingParams); hierarchy.setRoundingParams(roundingParams);
hierarchy.setFadeDuration( hierarchy.setFadeDuration(
mFadeDurationMs >= 0 mFadeDurationMs >= 0
? mFadeDurationMs ? mFadeDurationMs
: mImageSource.isResource() ? 0 : REMOTE_IMAGE_FADE_DURATION_MS); : mImageSource.isResource() ? 0 : REMOTE_IMAGE_FADE_DURATION_MS);
List<Postprocessor> postprocessors = new LinkedList<>(); List<Postprocessor> postprocessors = new LinkedList<>();
if (usePostprocessorScaling) { if (usePostprocessorScaling) {
@ -493,10 +487,10 @@ public class ReactImageView extends GenericDraweeView {
ResizeOptions resizeOptions = doResize ? new ResizeOptions(getWidth(), getHeight()) : null; ResizeOptions resizeOptions = doResize ? new ResizeOptions(getWidth(), getHeight()) : null;
ImageRequestBuilder imageRequestBuilder = ImageRequestBuilder.newBuilderWithSource(mImageSource.getUri()) ImageRequestBuilder imageRequestBuilder = ImageRequestBuilder.newBuilderWithSource(mImageSource.getUri())
.setPostprocessor(postprocessor) .setPostprocessor(postprocessor)
.setResizeOptions(resizeOptions) .setResizeOptions(resizeOptions)
.setAutoRotateEnabled(true) .setAutoRotateEnabled(true)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled); .setProgressiveRenderingEnabled(mProgressiveRenderingEnabled);
ImageRequest imageRequest = ReactNetworkImageRequest.fromBuilderWithHeaders(imageRequestBuilder, mHeaders); ImageRequest imageRequest = ReactNetworkImageRequest.fromBuilderWithHeaders(imageRequestBuilder, mHeaders);
@ -508,19 +502,19 @@ public class ReactImageView extends GenericDraweeView {
mDraweeControllerBuilder.reset(); mDraweeControllerBuilder.reset();
mDraweeControllerBuilder mDraweeControllerBuilder
.setAutoPlayAnimations(true) .setAutoPlayAnimations(true)
.setCallerContext(mCallerContext) .setCallerContext(mCallerContext)
.setOldController(getController()) .setOldController(getController())
.setImageRequest(imageRequest); .setImageRequest(imageRequest);
if (mCachedImageSource != null) { if (mCachedImageSource != null) {
ImageRequest cachedImageRequest = ImageRequest cachedImageRequest =
ImageRequestBuilder.newBuilderWithSource(mCachedImageSource.getUri()) ImageRequestBuilder.newBuilderWithSource(mCachedImageSource.getUri())
.setPostprocessor(postprocessor) .setPostprocessor(postprocessor)
.setResizeOptions(resizeOptions) .setResizeOptions(resizeOptions)
.setAutoRotateEnabled(true) .setAutoRotateEnabled(true)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled) .setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build(); .build();
mDraweeControllerBuilder.setLowResImageRequest(cachedImageRequest); mDraweeControllerBuilder.setLowResImageRequest(cachedImageRequest);
} }
@ -560,8 +554,8 @@ public class ReactImageView extends GenericDraweeView {
} }
/** /**
* ReactImageViews only render a single image. * ReactImageViews only render a single image.
*/ */
@Override @Override
public boolean hasOverlappingRendering() { public boolean hasOverlappingRendering() {
return false; return false;
@ -578,11 +572,11 @@ public class ReactImageView extends GenericDraweeView {
private void setSourceImage() { private void setSourceImage() {
mImageSource = null; mImageSource = null;
if (mSources.isEmpty()) { if (mSources.isEmpty()) {
ImageSource imageSource = new ImageSource(getContext(), REMOTE_TRANSPARENT_BITMAP_URI); return;
mSources.add(imageSource); }
} else if (hasMultipleSources()) { if (hasMultipleSources()) {
MultiSourceResult multiSource = MultiSourceResult multiSource =
MultiSourceHelper.getBestSourceForSize(getWidth(), getHeight(), mSources); MultiSourceHelper.getBestSourceForSize(getWidth(), getHeight(), mSources);
mImageSource = multiSource.getBestResult(); mImageSource = multiSource.getBestResult();
mCachedImageSource = multiSource.getBestResultInCache(); mCachedImageSource = multiSource.getBestResultInCache();
return; return;
@ -597,8 +591,8 @@ public class ReactImageView extends GenericDraweeView {
// has no control over the original size // has no control over the original size
if (mResizeMethod == ImageResizeMethod.AUTO) { if (mResizeMethod == ImageResizeMethod.AUTO) {
return return
UriUtil.isLocalContentUri(imageSource.getUri()) || UriUtil.isLocalContentUri(imageSource.getUri()) ||
UriUtil.isLocalFileUri(imageSource.getUri()); UriUtil.isLocalFileUri(imageSource.getUri());
} else if (mResizeMethod == ImageResizeMethod.RESIZE) { } else if (mResizeMethod == ImageResizeMethod.RESIZE) {
return true; return true;
} else { } else {
@ -609,9 +603,10 @@ public class ReactImageView extends GenericDraweeView {
private void warnImageSource(String uri) { private void warnImageSource(String uri) {
if (ReactBuildConfig.DEBUG) { if (ReactBuildConfig.DEBUG) {
Toast.makeText( Toast.makeText(
getContext(), getContext(),
"Warning: Image source \"" + uri + "\" doesn't exist", "Warning: Image source \"" + uri + "\" doesn't exist",
Toast.LENGTH_SHORT).show(); Toast.LENGTH_SHORT).show();
} }
} }
} }