Empty `Text` component has non-zero width on iOS

[tomekzaw]

Description

When rendering the following component tree:

<View style={styles.container}>
  <View style={{ flexDirection: 'row' }}>
    <Text>Left</Text>
    <Text style={{ backgroundColor: 'red' }}></Text>
    <Text>Right</Text>
  </View>
</View>

The middle Text component has an incorrect non-zero width on iOS:

However, on Android and web it has zero width:

Steps to reproduce

1. Paste the reproducer into RNTester
2. Run the app on iOS simulator

React Native Version

0.84.0-rc.4

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.7.3
  CPU: (12) arm64 Apple M3 Pro
  Memory: 258.31 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.5
    path: /Users/tomekzaw/.nvm/versions/node/v20.19.5/bin/node
  Yarn:
    version: 4.1.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.2
    path: /Users/tomekzaw/.nvm/versions/node/v20.19.5/bin/npm
  Watchman:
    version: 2026.01.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/tomekzaw/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.27397.103.2522.14514259
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.18
    path: /usr/bin/javac
  Ruby:
    version: 3.3.6
    path: /Users/tomekzaw/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No stacktrace

MANDATORY Reproducer

https://snack.expo.dev/@tomekzaw/upbeat-violet-raspberries

Screenshots and Videos

iOS:

Android:

react-native-web:

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[tomekzaw]

Repro: https://snack.expo.dev/@tomekzaw/upbeat-violet-raspberries

[Hector-Zhuang]

In the new version, a placeholder "i" is added for measurement even when the text is empty. That’s why empty text components still have a width.

https://github.dev/facebook/react-native/blob/5c49006a9eddf910fc0f525b3ba558def2b8e85e/packages/react-native/ReactCommon/react/renderer/attributedstring/PlaceholderAttributedString.h

[ishaquehassan]

The root cause is in TextLayoutManager::measure() in packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/TextLayoutManager.mm. The function ensurePlaceholderIfEmpty_DO_NOT_USE() adds the letter 'I' to empty attributed strings before measurement (to provide a valid height baseline). The measurement result then carries the width of 'I' back to the layout system, giving the empty Text component a non-zero width. A fix was landed in main on 2026-02-25 (commit 537d2a6) that zeroes out the width after measurement when the original string was empty:

if (originalAtributedString.isEmpty()) {
  measurement.size.width = 0;
}

This should appear in the next release cut from main. If you need it sooner, that single-line change in the lambda inside the Mode::Value branch of TextLayoutManager::measure() is the patch to apply.