Fix borderless ripple effect on Android (#58902)

[jasozh]

Summary:

Fixes the issue described in #48552, where a Pressable component can lose both its background color and ripple effect when borderless is true.

Root Cause

Android sets isProjected() = true for a borderless RippleDrawable so the ripple can extend beyond the view's bounds. React Native adds the background and ripple as layers in a CompositeBackgroundDrawable, where isProjected() = true if any layer is projected.

With projection, both the background and ripple are drawn on the nearest native ancestor with a background. Given "root view -> parent view -> Pressable", the ripple and background should now be drawn on the parent. However, since the parent doesn't form a stacking context, Fabric flattens its children. The Pressable and parent become siblings, and the Pressable's background and ripple are now drawn on a further ancestor and consequently become hidden.

Workarounds like opacity, overflow: hidden, and collapsable={false} work by establishing a stacking context so the parent remains the Pressable's ancestor.

This PR

Modify CompositeBackgroundDrawable to wrap feedbackUnderlay in a DrawableWrapper where isProjected() = false. The background and ripple are drawn in-place, so they remain visible without a stacking context. The ripple still extends beyond the view's bounds since clipChildren = false in React Native. This is gated behind the fixBorderlessRippleAndroid flag which defaults to false.

Limitations

With projection, the background and borderless ripple are drawn underneath all siblings. Without projection, they are now drawn over previous siblings and underneath following siblings. This matches behavior already shown by React Native foreground ripples, and Jetpack Compose also disables projection in RippleHostView.UnprojectedRipple and exhibits the same behavior.

Disabling ripple projection also causes some behavioral changes with clipping. The ripple is no longer clipped to the outline of the ancestor it was projected on, and it can now be clipped by overflow: hidden or ScrollView ancestors it used to draw beyond. These changes also align with foreground ripples and Jetpack Compose.

One alternative which more closely preserves projected behavior is to modify Fabric's core renderer logic to maintain a parent stacking context if a borderless ripple is present. However, this can potentially change stacking behavior in non-obvious ways depending on where a ripple is defined, where the nearest ancestor with a background exists, and siblings in between. This impacts zIndex behavior and makes Android's stacking diverge from iOS, where ripples don't exist.

Changelog: [Android][Fixed] - Fix Pressable and TouchableNativeFeedback losing their background color and ripple when using a borderless ripple

Reviewed By: cortinico

Differential Revision: D123471013

[meta-codesync]

@jasozh has exported this pull request. If you are a Meta employee, you can view the originating Diff in D123471013.

[cortinico]

Review automatically exported from Phabricator review in Meta.