If source is null , source uri is null or source is not an array should respect style

Summary: If source is null , source uri is null or source is not an array should respect style like in iOS

Reviewed By: yungsters

Differential Revision: D9018005

fbshipit-source-id: 5f695e8e3007c96e6004973e7fcbc6b57cc15249

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))) {
+  if (source && !source.uri && !Array.isArray(source)) {
-    return null;
+    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

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;
+      ImageSource imageSource = new ImageSource(getContext(), REMOTE_TRANSPARENT_BITMAP_URI);
-    }
+      mSources.add(imageSource);
-    if (hasMultipleSources()) {
+    } else if (hasMultipleSources()) {
       MultiSourceResult multiSource =
         MultiSourceHelper.getBestSourceForSize(getWidth(), getHeight(), mSources);
       mImageSource = multiSource.getBestResult();