Skip to content

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

@TatianaKapos

Description

@TatianaKapos

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

Metadata

Metadata

Assignees

Labels

Area: FabricSupport Facebook FabricArea: LayoutArea: TextNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricWorkstream: Component ParityClose the parity gap between RNW and RN for core RN components and their supporting APIs.enhancement

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions