Fix: [iOS][Fabric] Correctly mark inline attachments as clipped when in truncated text range

[delekta]

Title

[iOS] Inline attachments in truncated Text still visible (Fabric)

---

Description

On iOS with the New Architecture (Fabric), inline attachments in a <Text> that lie beyond the numberOfLines limit are still being rendered instead of being clipped.

As a result, the attachment that should be clipped appears just above its wrapper. See screenshots below.

---

MANDATORY Reproducer

https://snack.expo.dev/@kamildelekta/truncatedtextattachmentvisiblebug

---

Screenshots of issue

Only maxLines changes between these two screenshots. You can check it yourself in the expo snack above.

Text	Truncated Text

React Native Version

"react-native": "0.83.0"

---

Affected Platforms

only IOS New Arch

---

Test Plan

Visible cases

Tested multiple layouts where the attachment is in range; the attachment is shown and laid out correctly.

Clipped cases

Tested both clipping paths: (1) attachment after the last visible line → isOutsideVisibleRange; (2) attachment in the truncated "..." range → isInTruncatedRange. In both cases the attachment is correctly clipped.

Context
Before this change we only had isInTruncatedRange. Handling for isOutsideVisibleRange was added. The example below shows that these two clipping cases are mutually exclusive; in the app, both cases correctly clip the attachments.

Testing code:

<View style={{ flex: 1, justifyContent: 'center', padding: 16, alignItems: 'stretch' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8, color: '#333' }}>
        Correctly clipped
      </Text>
      {/* Case 1: isOutsideVisibleRange: 1, isInTruncatedRange: 0 */}
      <Text numberOfLines={3} style={{ fontSize: 18, borderWidth: 1, marginBottom: 16, textAlign: 'justify' }}>
        Line 1{'\n'}Line 2{'\n'}Line 3{'\n'}
        <View style={{ width: 20, height: 20, backgroundColor: 'red' }} />
      </Text>

      {/* Case 2: isOutsideVisibleRange: 0, isInTruncatedRange: 1 */}
      <Text numberOfLines={1} style={{ fontSize: 18, width: 200, borderWidth: 1, marginBottom: 8 }}>
        Long text that truncates with ellipsis
        <View style={{ width: 20, height: 20, backgroundColor: 'blue' }} />
      </Text>

      <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 16, marginBottom: 8, color: '#333' }}>
        Visible
      </Text>
      <Text style={{ fontSize: 12, color: '#666', marginBottom: 4, marginTop: 8 }}>First char</Text>
      <Text numberOfLines={2} style={{ fontSize: 18, borderWidth: 1, marginBottom: 16, textAlign: 'justify' }}>
        <View style={{ width: 20, height: 20, backgroundColor: 'green' }} />
        text after attachment
      </Text>

      <Text style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>Middle of line</Text>
      <Text numberOfLines={3} style={{ fontSize: 18, borderWidth: 1, marginBottom: 16, textAlign: 'justify' }}>
        Line 1{'\n'}Line 2 with
        <View style={{ width: 20, height: 20, backgroundColor: 'green' }} />
        {'\n'}Line 3
      </Text>

      <Text style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>End of line 1</Text>
      <Text numberOfLines={3} style={{ fontSize: 18, borderWidth: 1, marginBottom: 16, textAlign: 'justify' }}>
        Line 1
        <View style={{ width: 20, height: 20, backgroundColor: 'orange' }} />
        {'\n'}Line 2{'\n'}Line 3
      </Text>

      <Text style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>Short text, end</Text>
      <Text style={{ fontSize: 18, borderWidth: 1, marginBottom: 16, textAlign: 'justify' }}>
        Short text
        <View style={{ width: 20, height: 20, backgroundColor: 'orange' }} />
      </Text>

      <Text style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>Only attachment on line</Text>
      <Text numberOfLines={2} style={{ fontSize: 18, borderWidth: 1, textAlign: 'justify' }}>
        <View style={{ width: 20, height: 20, backgroundColor: 'purple' }} />
        {'\n'}Second line
      </Text>
    </View>

and here some examples:

oldArch	newArch	newArch fixed

---

Changelog:

[iOS] [Fixed] - Inline attachments after the last visible line in truncated text are now correctly marked as clipped.

---

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

System:
  OS: macOS 26.2
  CPU: (12) arm64 Apple M4 Pro
  Memory: 982.39 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /nix/store/04fc23dsflkxl4s9p6lkigia1hq3vjp2-nodejs-22.14.0/bin/node
  Yarn:
    version: 1.22.19
    path: /Users/kamil/.nix-profile/bin/yarn
  npm:
    version: 10.9.2
    path: /nix/store/04fc23dsflkxl4s9p6lkigia1hq3vjp2-nodejs-22.14.0/bin/npm
  Watchman:
    version: 2024.03.11.00
    path: /Users/kamil/.nix-profile/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/kamil/.nix-profile/bin/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: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.0
    wanted: 0.83.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.83.2 is now available (your project is running on v0.83.0).

---

[meta-cla]

Hi @delekta!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[meta-codesync]

@CalixTang has imported this pull request. If you are a Meta employee, you can view this in D92991293.

[meta-codesync]

@CalixTang merged this pull request in a035363.

[react-native-bot]

This pull request was successfully merged by @delekta in a035363

^{When will my fix make it into a release? | How to file a pick request?}