Skip to content

feat(touchable-ripple)!: state-layer opacity via ripple alpha (#4972) - #5177

Open
Priyanshu0007 wants to merge 2 commits into
callstack:mainfrom
Priyanshu0007:feat/remove-state-layer-pressed
Open

Priyanshu0007 wants to merge 2 commits into
callstack:mainfrom
Priyanshu0007:feat/remove-state-layer-pressed

Conversation

@Priyanshu0007

@Priyanshu0007 Priyanshu0007 commented Nov 6, 2026 •

Copy link
Copy Markdown

Motivation

Closes #4972. Removes stateLayerPressed for Paper 6.0 in favor of runtime ripple alpha calculation in TouchableRipple.

Thanks to @adrcotfas for the initial implementation and draft in #4997.

Merge Order Note

⚠️ Coordination with #5097 (Button MD3 Expressive):
On Android, TouchableRipple now applies 0.10 alpha directly. In #5097, Button still bakes 0.10 alpha into its ripple color. Whichever PR lands second must update Button to pass its fully opaque label color to avoid multiplying opacity down to ~1%.

Test Evidence

Android iOS Web
android_ripple.mp4
ios_ripple.mp4
web_ripple.mp4

@Doberjohn

Copy link
Copy Markdown
Collaborator

We'd like this PR to carry the stateLayerPressed removal for 6.0, in place of #4997. A few things before the review:

  • It conflicts with main, so CI hasn't run yet. Could you rebase it?
  • The description is over the 1000 characters the PR checks ask for. A shorter one, with a short video or screenshots of the pressed state on Android, iOS and web, would help.
  • Please credit adrcotfas, whose feat(touchable-ripple): MD3 state-layer opacity via android_ripple alpha #4997 did the same in an earlier draft; a line in the description is enough.
  • On Android the 0.10 alpha is now added to any ripple color a component passes. Button in feat(button)!: modernize Button to MD3 Expressive #5097 still bakes the pressed alpha into the color it passes to TouchableRipple, so once both are in, Button's ripple would end up near 1%. Whichever of the two lands second should have Button pass its opaque label color. Could you note that in the description?

…ack#4972)

BREAKING CHANGE: Removes theme.colors.stateLayerPressed.

- Remove stateLayerPressed color token from theme and color definitions.
- Default TouchableRipple ripple color to theme.colors.onSurface.
- Automatically apply Material 3 pressed state layer opacity (0.10) via android_ripple.alpha on Android, color.alpha() on Web, and underlay opacity on iOS.
- Preserve explicit underlayColor on iOS without forcing underlay opacity.
- Pass container's stateLayer (on-color) to TouchableRipple in FAB Shell and FAB Menu items, and update morphing trigger variant when expanded.
- Update 6.x migration documentation and test snapshots.
- Fallback to Palette.neutral10/90 when rippleColor or onSurface is a PlatformColor on Android
- Prevent invariant error in useAndroidRippleForView when using dynamic themes
- Add tests covering PlatformColor ripple fallback
@Priyanshu0007
Priyanshu0007 force-pushed the feat/remove-state-layer-pressed branch from 2b1a538 to 502cb52 Compare November 6, 2026 18:46
@Priyanshu0007

Copy link
Copy Markdown
Author

Hi @Doberjohn, i have made changes requested by you.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: integrate PlatformColor with alpha to replace stateLayerPressed

2 participants