diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index ea229e0b4..3869986e5 100644 --- a/Libraries/Image/Image.android.js +++ b/Libraries/Image/Image.android.js @@ -184,15 +184,12 @@ let Image = ( props: ImagePropsType, forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'RKImage'>, ) => { - const source = resolveAssetSource(props.source); + let source = resolveAssetSource(props.source); const defaultSource = resolveAssetSource(props.defaultSource); const loadingIndicatorSource = resolveAssetSource( props.loadingIndicatorSource, ); - // As opposed to the ios version, here we render `null` when there is no source, source.uri - // or source array. - if (source && source.uri === '') { console.warn('source.uri should not be an empty string'); } @@ -215,13 +212,13 @@ let Image = ( ); } - if (!source || (!source.uri && !Array.isArray(source))) { - return null; + if (source && !source.uri && !Array.isArray(source)) { + source = null; } let style; let sources; - if (source.uri) { + if (source?.uri != null) { const {width, height} = source; style = flattenStyle([{width, height}, styles.base, props.style]); sources = [{uri: source.uri}]; @@ -235,7 +232,7 @@ let Image = ( style, shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError), src: sources, - headers: source.headers, + headers: source?.headers, defaultSrc: defaultSource ? defaultSource.uri : null, loadingIndicatorSrc: loadingIndicatorSource ? loadingIndicatorSource.uri diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java index 91817b955..e14603ff1 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java @@ -71,6 +71,9 @@ public class ReactImageView extends GenericDraweeView { 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]; /* @@ -339,7 +342,10 @@ public class ReactImageView extends GenericDraweeView { public void setSource(@Nullable ReadableArray sources) { 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 if (sources.size() == 1) { ReadableMap source = sources.getMap(0); @@ -573,9 +579,9 @@ public class ReactImageView extends GenericDraweeView { private void setSourceImage() { mImageSource = null; if (mSources.isEmpty()) { - return; - } - if (hasMultipleSources()) { + ImageSource imageSource = new ImageSource(getContext(), REMOTE_TRANSPARENT_BITMAP_URI); + mSources.add(imageSource); + } else if (hasMultipleSources()) { MultiSourceResult multiSource = MultiSourceHelper.getBestSourceForSize(getWidth(), getHeight(), mSources); mImageSource = multiSource.getBestResult();