Fix width/height not propagating to styles when uri is used (#55495)

Summary:
Pull Request resolved: #55495

Changelog: [General][Fixed] When using Image with a `uri`, `width` and `height` the default dimensions were being lost

Reviewed By: yungsters

Differential Revision: D92891095

fbshipit-source-id: ce6a136603be5c56dd49f8695412165ffe75b33b

Author: javache

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

@@ -15,6 +15,7 @@ import type {ImageProps} from './ImageProps';
 import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
@@ -201,17 +202,33 @@ let BaseImage: AbstractImageAndroid = ({
   let sources_;
   let headers_: ?ImageSourceHeaders;
   if (Array.isArray(source_)) {
-    style_ = [styles.base, style];
+    const {
+      headers: sourceHeaders,
+      width: sourceWidth,
+      height: sourceHeight,
+    } = source_[0];
+    headers_ = sourceHeaders;
+    // Default to the first source's width and height if only one is provided
+    if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
+      style_ = [
+        source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+        styles.base,
+        style,
+      ];
+    } else {
+      style_ = [styles.base, style];
+    }
     sources_ = source_;
-    headers_ = sources_[0].headers;
   } else {
-    const {uri} = source_;
+    const {uri, width: sourceWidth, height: sourceHeight} = source_;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
-    const width_ = source_.width ?? width;
-    const height_ = source_.height ?? height;
-    style_ = [{width: width_, height: height_}, styles.base, style];
+    style_ = [
+      {width: sourceWidth ?? width, height: sourceHeight ?? height},
+      styles.base,
+      style,
+    ];
     sources_ = [source_];
   }
 

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

@@ -23,11 +23,15 @@ export type ImageSourceHeaders = {
  * A function which returns the appropriate value for image source
  * by resolving the `source`, `src` and `srcSet` props.
  */
-export function getImageSourcesFromImageProps(
-  imageProps: ImageProps,
-):
+export function getImageSourcesFromImageProps(imageProps: ImageProps):
   | ?ResolvedAssetSource
-  | ReadonlyArray<{uri: string, headers: ImageSourceHeaders, ...}> {
+  | ReadonlyArray<{
+      +uri: string,
+      +headers: ImageSourceHeaders,
+      +width: ?number,
+      +height: ?number,
+      ...
+    }> {
   let source = resolveAssetSource(imageProps.source);
 
   let sources;

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

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
+ * @fantom_flags fixImageSrcDimensionPropagation:*
  * @format
  */
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {AccessibilityProps, HostInstance} from 'react-native';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {createRef} from 'react';
@@ -239,14 +241,26 @@ describe('<Image>', () => {
 
           Fantom.runTask(() => {
             root.render(
-              <Image referrerPolicy={referrerPolicy} src={LOGO_SOURCE.uri} />,
+              <>
+                <Image referrerPolicy={referrerPolicy} src={LOGO_SOURCE.uri} />
+                <Image referrerPolicy={referrerPolicy} source={LOGO_SOURCE} />
+              </>,
             );
           });
 
           expect(
             root.getRenderedOutput({props: ['source-header']}).toJSX(),
           ).toEqual(
-            <rn-image source-header-Referrer-Policy={referrerPolicy} />,
+            <>
+              <rn-image
+                key="0"
+                source-header-Referrer-Policy={referrerPolicy}
+              />
+              <rn-image
+                key="1"
+                source-header-Referrer-Policy={referrerPolicy}
+              />
+            </>,
           );
         });
       });
@@ -444,6 +458,44 @@ describe('<Image>', () => {
           />,
         );
       });
+
+      it('merges dimension information into source', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <Image
+              src="https://reactnative.dev/img/tiny_logo.png"
+              width={40}
+              height={40}
+            />,
+          );
+        });
+
+        expect(
+          root
+            .getRenderedOutput({props: ['source', 'width', 'height']})
+            .toJSX(),
+        ).toEqual(
+          ReactNativeFeatureFlags.fixImageSrcDimensionPropagation() ? (
+            <rn-image
+              source-scale="1"
+              source-type="remote"
+              source-size="{40, 40}"
+              source-uri="https://reactnative.dev/img/tiny_logo.png"
+              width="40.000000"
+              height="40.000000"
+            />
+          ) : (
+            <rn-image
+              source-scale="1"
+              source-type="remote"
+              source-size="{40, 40}"
+              source-uri="https://reactnative.dev/img/tiny_logo.png"
+            />
+          ),
+        );
+      });
     });
 
     describe('srcSet', () => {

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -947,6 +947,16 @@ const definitions: FeatureFlagDefinitions = {
       },
       ossReleaseStage: 'none',
     },
+    fixImageSrcDimensionPropagation: {
+      defaultValue: false,
+      metadata: {
+        description:
+          'Fix image dimensions not being passed through when src is used',
+        expectedReleaseValue: true,
+        purpose: 'release',
+      },
+      ossReleaseStage: 'none',
+    },
     fixVirtualizeListCollapseWindowSize: {
       defaultValue: false,
       metadata: {

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4680a90fe6a071f6352de95fc1ca01ba>>
+ * @generated SignedSource<<7d3f35de8808eb703debde85df332df8>>
  * @flow strict
  * @noformat
  */
@@ -34,6 +34,7 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   deferFlatListFocusChangeRenderUpdate: Getter<boolean>,
   disableMaintainVisibleContentPosition: Getter<boolean>,
   externalElementInspectionEnabled: Getter<boolean>,
+  fixImageSrcDimensionPropagation: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
@@ -157,6 +158,11 @@ export const disableMaintainVisibleContentPosition: Getter<boolean> = createJava
  */
 export const externalElementInspectionEnabled: Getter<boolean> = createJavaScriptFlagGetter('externalElementInspectionEnabled', true);
 
+/**
+ * Fix image dimensions not being passed through when src is used
+ */
+export const fixImageSrcDimensionPropagation: Getter<boolean> = createJavaScriptFlagGetter('fixImageSrcDimensionPropagation', false);
+
 /**
  * Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
  */