Unable to use height and width as props in Image components

[shubhamguptadream11]

Description

Unable to use height and width as props in Image components. It's working in rn0.69.1but not working after upgrade to 0.72.4. Because of this my Images are not visible on screen

React Native Version

0.72.4

Output of npx react-native info

System: OS: macOS 13.4.1 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 839.98 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.14.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 8.3.1 path: /usr/local/bin/npm Watchman: version: 2023.10.02.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.11.3 path: /usr/local/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.2 - iOS 16.2 - macOS 13.1 - tvOS 16.1 - watchOS 9.1 Android SDK: API Levels: - "29" - "30" - "31" - "32" - "33" - "34" Build Tools: - 28.0.3 - 29.0.1 - 29.0.2 - 29.0.3 - 30.0.1 - 30.0.2 - 30.0.3 - 31.0.0 - 31.0.0 - 33.0.0 - 33.0.1 System Images: - android-24 | Google APIs Intel x86 Atom - android-24 | Google Play Intel x86 Atom - android-29 | Google Play Intel x86 Atom - android-30 | Google APIs Intel x86 Atom - android-30 | Google Play Intel x86 Atom - android-31 | Intel x86_64 Atom - android-31 | Google Play Intel x86 Atom_64 - android-33 | Google Play Intel x86_64 Atom Android NDK: 22.1.7171670 IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: version: 14.2/14C18 path: /usr/bin/xcodebuild Languages: Java: version: 1.8.0_281 path: /usr/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.4 wanted: 0.72.4 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

Below is the sample Image component where I am passing array of sources to it with height and width passed as props. Image is seen visible in rn 0.69.1 but not after rn upgrade 0.72.4.

Note: If I pass single source without any array then things are working fine.

import React from 'react';
import {Image} from 'react-native';

const sources = [
  {
    height: 84,
    uri: 'https://placekitten.com/100/100',
    width: 80,
  },
  {
    height: 168,
    uri: 'https://placekitten.com/100/100',
    width: 160,
  },
  {
    height: 252,
    uri: 'https://placekitten.com/100/100',
    width: 240,
  },
];

const ImageComponent = () => {

  // Image is not loading since it's not respecting given height and width
  return <Image height={100} width={100} style={styles.img} source={sources} />;
};

const styles = StyleSheet.create({
  img: {
    borderWidth: 1,
  },
});

Snack, screenshot, or link to a repository

Repro: https://snack.expo.dev/@sg43245/401ed2

Behaviour in 0.69.1 [Working]

Behaviour in 0.72.4 [Not Working]

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[shubhamguptadream11]

I checked this on latest version 0.72.6 as well. This issue still exists.

I did some debugging around this. In file packages/react-native/Libraries/Image/Image.android.js I found a code diff as compared to 0.69.1.

In 0.69.1 https://github.com/facebook/react-native/blob/v0.69.1/Libraries/Image/Image.android.js Here if we see Image component we observe that we are spreading whole props object in nativeProps which is then passed to native side.

In 0.72.6 https://github.com/facebook/react-native/blob/v0.72.6/packages/react-native/Libraries/Image/Image.android.js But here we are extracting height and width out before passing restProps to native Props. This clearly points out that we are no longer using width and height coming as props in cases where we are passing array of sources.

So if I just pass whole props instead of restProps in native Props it works

[shubhamguptadream11]

Repro link: https://snack.expo.dev/@sg43245/401ed2

[shubhamguptadream11]

Any update here? @cortinico

[jiunshinn]

@cortinico Can you assign this issue to me?