microsoft / microsoft/react-native-windows

[Fabric] Fix clipping on nested Views inside a text

Open
#14,443 2 comments 0 reactions 1 assignee View on GitHub

@Nitin-100 is already working on this.

Since Sep 11, 2025.

Area: Fabric Area: Layout Area: Text enhancement New Architecture Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Summary

Clipping doesn't work for nested Views inside a text. The first view will be clipped correctly but any view inside of it will stay it's original width/height

Example Code

Can see that in RNTester that the Red View will be clipped correctly but the steelblue view won't

      <RNTesterText
        style={{
          overflow: 'hidden',
          width: 150,
          height: 75,
          backgroundColor: 'lightgrey',
        }}>
        This is an inline view
        {/* Render a red border around the steelblue rectangle to make it clear how the inline view is being clipped */}
        <View style={{width: 50, height: 100, backgroundColor: 'red'}}>
          <View
            style={{
              width: 48,
              height: 98,
              left: 1,
              top: 1,
              backgroundColor: 'steelblue',
            }}
          />
        </View>
      </RNTesterText>
Basic Example

Playground-composition_41aTmIryJ1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.