Different behavior in New Architecture with truncated `Text` that has an `Image` child

[Flewp]

Description

Given the following component:

import {Image, SafeAreaView, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text numberOfLines={1} style={{width: 200}}>
        {'LongTextLongTextLongTextLongTextLongTextLongText'}
        <Image
          src={
            'https://www.kasandbox.org/programming-images/avatars/leaf-blue.png'
          }
          style={{width: 16, height: 16}}
        />
      </Text>
    </SafeAreaView>
  );
};

export default App;

Its behavior is different between the old and new architectures. The old architecture has what I believe is the expected output, whereas the new architecture displays the image even after its parent Text component is truncated.

One peculiar thing is that DevTools reports an Image component when running either architecture, though from the native side it seems that the native Image component gets created/rendered in new architecture where in old architecture it seems completely ignored.

Also, with the Expo Snack it seems that web works as expected while both Android and iOS reproduce the issue.

Steps to reproduce

Start the Expo Snack, or use a new RN project and render the component provided in the description.

React Native Version

0.76.7

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.7.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 66.08 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
  Yarn:
    version: 3.6.4
  npm:
    version: 10.5.0
  Watchman:
    version: 2024.03.11.00
Managers:
  CocoaPods:
    version: 1.11.0
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "32"
    Build Tools:
      - 30.0.3
      - 31.0.0
    System Images:
      - android-31 | Google Play ARM 64 v8a
      - android-32 | Google Play ARM 64 v8a
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.11
  Ruby:
    version: 2.7.5
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

After building React Native locally on Android and configuring its logging -

With Paper, this is the output from the NativeViewHierarchyManager

createView[7]: RCTText { ReactStylesDiffMap: {"width":200,"numberOfLines":1,"isHighlighted":false,"ellipsizeMode":"tail","selectionColor":null,"allowFontScaling":true} }
createView[15]: DebuggingOverlay { ReactStylesDiffMap: {"left":0,"bottom":0,"right":0,"top":0,"position":"absolute"} }
createView[17]: RCTView { ReactStylesDiffMap: {"right":0,"left":0,"top":0,"position":"absolute","bottom":0,"pointerEvents":"none"} }
Compat change id reported: 289878283; UID 10197; state: ENABLED
createView[17]: <null> [Lcom.facebook.react.uimanager.ViewAtIndex;@99115be <null>
createView[11]: <null> [Lcom.facebook.react.uimanager.ViewAtIndex;@5ae4d6c <null>
createView[11]: <null> [Lcom.facebook.react.uimanager.ViewAtIndex;@4560f35 <null>
updateViewExtraData[7]: com.facebook.react.views.text.ReactTextUpdate@944cfca
updateLayout[7]->[11]: 0 0 550 52
updateLayout[7]->[11]: 0 0 550 52
updateLayout[7]->[11]: 0 0 550 52
updateLayout[15]->[17]: 0 0 1080 2208
updateLayout[17]->[11]: 0 0 1080 2208
updateLayout[7]->[11]: 0 0 550 52
updateLayout[17]->[11]: 0 0 1080 2208

With Fabric, This is the output from the SurfaceMountingManager

addViewAt: [12] -> [14] idx: 0 BEFORE
  <ViewGroup tag=14 class=class com.facebook.react.views.view.ReactViewGroup>
  </ViewGroup tag=14>
addViewAt: [6] -> [11] idx: 0 BEFORE
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
  </ViewGroup tag=11>
addViewAt: [4] -> [11] idx: 1 BEFORE
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
     <View idx=0 tag=6 class=class com.facebook.react.views.text.ReactTextView>
  </ViewGroup tag=11>
addViewAt: [14] -> [11] idx: 2 BEFORE
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
     <View idx=0 tag=6 class=class com.facebook.react.views.text.ReactTextView>
     <View idx=1 tag=4 class=class com.facebook.react.views.image.ReactImageView>
  </ViewGroup tag=11>
addViewAt: [12] -> [14] idx: 0 AFTER
  <ViewGroup tag=14 class=class com.facebook.react.views.view.ReactViewGroup>
     <View idx=0 tag=12 class=class com.facebook.react.views.debuggingoverlay.DebuggingOverlay>
  </ViewGroup tag=14>
addViewAt: [6] -> [11] idx: 0 AFTER
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
     <View idx=0 tag=6 class=class com.facebook.react.views.text.ReactTextView>
     <View idx=1 tag=4 class=class com.facebook.react.views.image.ReactImageView>
     <View idx=2 tag=14 class=class com.facebook.react.views.view.ReactViewGroup>
  </ViewGroup tag=11>
addViewAt: [4] -> [11] idx: 1 AFTER
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
     <View idx=0 tag=6 class=class com.facebook.react.views.text.ReactTextView>
     <View idx=1 tag=4 class=class com.facebook.react.views.image.ReactImageView>
     <View idx=2 tag=14 class=class com.facebook.react.views.view.ReactViewGroup>
  </ViewGroup tag=11>
addViewAt: [14] -> [11] idx: 2 AFTER
  <ViewGroup tag=11 class=class com.facebook.react.runtime.ReactSurfaceView>
     <View idx=0 tag=6 class=class com.facebook.react.views.text.ReactTextView>
     <View idx=1 tag=4 class=class com.facebook.react.views.image.ReactImageView>
     <View idx=2 tag=14 class=class com.facebook.react.views.view.ReactViewGroup>
  </ViewGroup tag=11>

Reproducer

https://snack.expo.dev/wdcZhg_ZXRrcnVVnQvNO3

Screenshots and Videos

	iOS	Android
Old Arch
New Arch

Dev Tools Screenshot

The hierarchy reported looks identical between old and new architectures (though this screenshot is specifically from the old architecture), this just has the Image component highlighted in case its attributes are helpful.

[Flewp]

This issue also repros on React Native 74 and 72.

[cipolleschi]

We discussed this internally, and it turns out:

• The Old Architecture behavior is wrong.
• The New Architecture behavior on iOS is wrong.
• The New Architecture behavior on Android is correct.

For reference, that's the equivalent on Web, and this is how it is supposed to work on React Native as well.

The code is in the top panel, and the output that is rendered in a web page is in the bottom-right panel.

---

We will look at fixing iOS so it is consistent with Android in the near future, but we don't have a precise estimate for when it will be released.
This will be a breaking change between the old and the New Architecture.

[NickGerleman]

The above assumption was based of of an incorrect example using line-clamp. Old arch behavior is what we should be going for instead.

line-clamp: https://jsfiddle.net/7xgdke1b/
text-overflow: https://jsfiddle.net/7xgdke1b/2/