Default Image resizeMode to cover in C++ (#58862)

Summary:
Pull Request resolved: #58862

`ImageProps` defaulted `resizeMode` to `stretch`, while the JS `Image` default, the documented default and every Android image view use `cover`. On Android, props equal to their C++ default are not sent when a view is created, so an explicit `resizeMode="stretch"` never reached the view and the image rendered as `cover`.

The C++ default is now `cover`. `Image` always sends `resizeMode` on every platform, so the value components receive is unchanged, and iOS initializes its content mode from the default props.

Changelog: [General][Fixed] - Fix explicit `resizeMode="stretch"` being ignored on newly created Android `Image`s

Reviewed By: javache, christophpurrer

Differential Revision: D123029410

fbshipit-source-id: bd9383c68cefc39749ab7f056a4f70a74efd2baa

Author: Bartlomiej Bloniarz

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

@@ -36,25 +36,15 @@ describe('<Image>', () => {
         });
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-image
-            overflow="hidden"
-            resizeMode="cover"
-            source-scale="1"
-            source-type="remote"
-          />,
+          <rn-image overflow="hidden" source-scale="1" source-type="remote" />,
         );
 
         Fantom.runTask(() => {
           root.render(<Image src="" />);
         });
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-image
-            overflow="hidden"
-            resizeMode="cover"
-            source-scale="1"
-            source-type="remote"
-          />,
+          <rn-image overflow="hidden" source-scale="1" source-type="remote" />,
         );
       });
     });
@@ -282,7 +272,7 @@ describe('<Image>', () => {
         });
 
         expect(root.getRenderedOutput({props: ['resizeMode']}).toJSX()).toEqual(
-          <rn-image resizeMode="cover" />,
+          <rn-image />,
         );
       });
 
@@ -294,19 +284,19 @@ describe('<Image>', () => {
         });
 
         expect(root.getRenderedOutput({props: ['resizeMode']}).toJSX()).toEqual(
-          <rn-image resizeMode="cover" />,
+          <rn-image />,
         );
       });
 
-      it('can be set to "stretch", which is the same as not setting it', () => {
+      it('can be set to "stretch"', () => {
         const root = Fantom.createRoot();
 
         Fantom.runTask(() => {
           root.render(<Image resizeMode="stretch" source={LOGO_SOURCE} />);
         });
 
         expect(root.getRenderedOutput({props: ['resizeMode']}).toJSX()).toEqual(
-          <rn-image />,
+          <rn-image resizeMode="stretch" />,
         );
       });
 

packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.cpp

@@ -42,7 +42,7 @@ ImageProps::ImageProps(
           rawProps,
           "resizeMode",
           sourceProps.resizeMode,
-          ImageResizeMode::Stretch)),
+          ImageResizeMode::Cover)),
       blurRadius(convertRawProp(
           context,
           rawProps,

packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.h

@@ -33,7 +33,7 @@ class ImageProps final : public ViewProps {
   ImageSources sources{};
   ImageSource defaultSource{};
   ImageSource loadingIndicatorSource{};
-  ImageResizeMode resizeMode{ImageResizeMode::Stretch};
+  ImageResizeMode resizeMode{ImageResizeMode::Cover};
   Float blurRadius{};
   EdgeInsets capInsets{};
   std::optional<SharedColor> tintColor{};