Skip to content

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

Open
@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

No one assigned

    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