Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fabric] Fix clipping on nested Views inside a text #14443

Open
TatianaKapos opened this issue Mar 20, 2025 · 2 comments
Open

[Fabric] Fix clipping on nested Views inside a text #14443

TatianaKapos opened this issue Mar 20, 2025 · 2 comments
Assignees
Labels
Area: Fabric Support Facebook Fabric Area: Layout Area: Text enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Milestone

Comments

@TatianaKapos
Copy link
Contributor

TatianaKapos commented Mar 20, 2025

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

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Mar 20, 2025
@chrisglein chrisglein added Area: Layout Area: Text Area: Fabric Support Facebook Fabric New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. labels Mar 24, 2025
@chrisglein
Copy link
Member

@TatianaKapos Snippet of repro JS? Screenshot?

@TatianaKapos
Copy link
Contributor Author

Sorry wrote this issue so I could link it in the initial PR, add screenshots and examples!

@chrisglein chrisglein removed the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Mar 27, 2025
@chrisglein chrisglein added this to the Next milestone Mar 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Fabric Support Facebook Fabric Area: Layout Area: Text enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Projects
None yet
Development

No branches or pull requests

2 participants