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]

⚠️

Newer Version of React Native is Available!

ℹ️

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

This is the commit: #34481 where height and width are extracted out.

[shubhamguptadream11]

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

[shubhamguptadream11]

Any update here? @cortinico

[jiunshinn]

@cortinico Can you assign this issue to me?