Handle empty source for Image

Summary:
Changelog: [Android]
When source / src is not set for Image we still set `source` native prop with array of undefined.
This will warn users when they do not have source set i.e null, undefined, `''`

Differential Revision: D79570377

Author: andrewdacenko

packages/react-native/Libraries/Image/Image.android.js

@@ -135,11 +135,7 @@ let BaseImage: AbstractImageAndroid = ({
   ref?: React.RefSetter<HostInstance>,
   ...ImageProps,
 }) => {
-  let source = getImageSourcesFromImageProps(props) || {
-    uri: undefined,
-    width: undefined,
-    height: undefined,
-  };
+  let source = getImageSourcesFromImageProps(props) || undefined;
   const defaultSource = resolveAssetSource(props.defaultSource);
   const loadingIndicatorSource = resolveAssetSource(
     props.loadingIndicatorSource,
@@ -162,6 +158,9 @@ let BaseImage: AbstractImageAndroid = ({
   if (Array.isArray(source)) {
     style = [styles.base, props.style];
     sources = source;
+  } else if (source == null) {
+    console.warn('source should not be empty');
+    sources = source;
   } else {
     const {uri} = source;
     if (uri === '') {

packages/react-native/Libraries/Image/ImageSourceUtils.js

@@ -71,7 +71,7 @@ export function getImageSourcesFromImageProps(
     }
 
     sources = sourceList;
-  } else if (src != null) {
+  } else if (src != null && src !== '') {
     sources = [{uri: src, headers: headers, width, height}];
   } else if (source != null && source.uri && Object.keys(headers).length > 0) {
     sources = [{...source, headers}];

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -19,40 +19,17 @@ import {Image} from 'react-native';
 import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
+const LOGO_SOURCE = {uri: 'https://reactnative.dev/img/tiny_logo.png'};
+
 describe('<Image>', () => {
   describe('props', () => {
-    it('renders an empty element when there are no props', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(<Image />);
-      });
-
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-image
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-frame="{x:0,y:0,width:390,height:0}"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          overflow="hidden"
-          source-scale="1"
-          source-type="remote"
-        />,
-      );
-    });
-
     describe('accessibility', () => {
       describe('accessible', () => {
         it('indicates that image is an accessibility element', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
-            root.render(<Image accessible={true} />);
+            root.render(<Image accessible={true} source={LOGO_SOURCE} />);
           });
 
           expect(
@@ -66,7 +43,12 @@ describe('<Image>', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
-            root.render(<Image accessibilityLabel="React Native Logo" />);
+            root.render(
+              <Image
+                accessibilityLabel="React Native Logo"
+                source={LOGO_SOURCE}
+              />,
+            );
           });
 
           expect(
@@ -80,7 +62,7 @@ describe('<Image>', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
-            root.render(<Image alt="React Native Logo" />);
+            root.render(<Image alt="React Native Logo" source={LOGO_SOURCE} />);
           });
 
           expect(root.getRenderedOutput({props: ['^access']}).toJSX()).toEqual(
@@ -99,6 +81,7 @@ describe('<Image>', () => {
               <Image
                 alt="React Native Logo"
                 accessibilityLabel="React Native"
+                source={LOGO_SOURCE}
               />,
             );
           });
@@ -115,14 +98,50 @@ describe('<Image>', () => {
         const root = Fantom.createRoot();
 
         Fantom.runTask(() => {
-          root.render(<Image blurRadius={10} />);
+          root.render(<Image blurRadius={10} source={LOGO_SOURCE} />);
         });
 
         expect(root.getRenderedOutput({props: ['blurRadius']}).toJSX()).toEqual(
           <rn-image blurRadius="10" />,
         );
       });
     });
+
+    describe('src', () => {
+      let originalConsoleWarn;
+      beforeEach(() => {
+        originalConsoleWarn = console.warn;
+        // $FlowExpectedError[cannot-write]
+        console.warn = jest.fn();
+      });
+
+      afterEach(() => {
+        // $FlowExpectedError[cannot-write]
+        console.warn = originalConsoleWarn;
+      });
+
+      it('should warn if no source is provided', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image />);
+        });
+
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith('source should not be empty');
+      });
+
+      it('should warn if src is empty', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image src="" />);
+        });
+
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith('source should not be empty');
+      });
+    });
   });
 
   describe('ref', () => {
@@ -133,7 +152,7 @@ describe('<Image>', () => {
         const root = Fantom.createRoot();
 
         Fantom.runTask(() => {
-          root.render(<Image ref={elementRef} />);
+          root.render(<Image ref={elementRef} source={LOGO_SOURCE} />);
         });
 
         expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
@@ -145,7 +164,7 @@ describe('<Image>', () => {
         const root = Fantom.createRoot();
 
         Fantom.runTask(() => {
-          root.render(<Image ref={elementRef} />);
+          root.render(<Image ref={elementRef} source={LOGO_SOURCE} />);
         });
 
         const element = ensureInstance(elementRef.current, ReactNativeElement);