[0.76][New Arch] Pressable loses background when applying borderless ripple effect
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
The Pressable component loses its backgroundColor and ripple effect when android_ripple is set with borderless: true.
Notes:
• If Pressable is the only component in the app or if all parent components have transparent backgrounds, the ripple effect works as expected. However, this scenario is not realistic.
Edit 1:
Crazy thing: if you add overflow: hidden to the parent, the Pressable background and ripple works again for some reason. But again, only if the parent and pressable are in the root.
I have two snacks:
-
Using SDK 51 (old arch), this is working fine:
https://snack.expo.dev/@wfern/android-pressable-borderless-sdk-51 -
Using SDK 52 (new arch), where the bug happens:
https://snack.expo.dev/@wfern/android-pressable-borderless-sdk-52
Steps to reproduce
In the Snack with SDK 52 set Pressable android_ripple borderless to true and see it's background and ripple effect disappear.
React Native Version
0.76.5
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 15.2
CPU: (8) arm64 Apple M1
Memory: 126.64 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.17.0
path: ~/.nvm/versions/node/v20.17.0/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 11.0.0
path: ~/.nvm/versions/node/v20.17.0/bin/npm
Watchman:
version: 2024.12.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/lib/ruby/gems/3.4.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2412.12266719
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.13
path: /usr/bin/javac
Ruby:
version: 3.4.1
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.1.3
wanted: ^15.1.3
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.5
wanted: 0.76.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
No logs.
Reproducer
https://snack.expo.dev/@wfern/android-pressable-borderless-sdk-52
In this snack set the Pressable ripple borderless to true.
Screenshots and Videos
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the SDK 52 Snack reproducer and compare it with the working SDK 51 Snack. Trace Pressable's Android Fabric handling of android_ripple with borderless: true, especially how parent backgrounds and overflow affect rendering. Done means the Pressable background and ripple remain visible in the SDK 52 new architecture scenario.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100