Repository navigation
[0.76][New Arch] Pressable loses background when applying borderless ripple effect #48552
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
Activity
[-][0.76][New Arch] Pressable lose background when adding ripple borderless[/-][+][0.76][New Architecture] Pressable loses background when applying borderless ripple effect[/+][-][0.76][New Architecture] Pressable loses background when applying borderless ripple effect[/-][+][0.76][New Arch] Pressable loses background when applying borderless ripple effect[/+]cortinico commentedon Feb 18, 2025
@wfern thanks for reporting this. We're looking into this issue. For the time being this is a workaround to fix your situation:
function Playground() { return ( <View style={styles.container}> <View + collapsable={false} style={{ flex: 1, justifyContent: 'center', padding: 12, // the container/parent must have a backgroundColor, // if this is transparent the pressable background and // ripple works but thats not realistic backgroundColor: 'yellow', }}> <Pressable android_ripple={{ color: 'blue', // set borderless to "true" to see the bug borderless: true, }} style={{ width: 100, padding: 12, backgroundColor: 'green', borderWidth: 1, borderColor: 'black', }} onPress={() => console.log(1)}> <Text>Teste</Text> </Pressable> </View> </View> ); }Essentially setting
collapsable={false}on your parent view will disable view flattening locally which is causing this problem on Androidadrcotfas commentedon Apr 9, 2026
This can be reproduced inside the current main branch
RNTester Appat Pressable / Pressable with custom Ripple (android only) for the radius 30 and radius 150 buttons.fix(ui): restore the Fab fill on Android — masked ripple, not borderless
Fix borderless ripple effect on Android (react#58902)
Fix borderless ripple effect on Android (#58902)
jasozh commentedon Oct 12, 2026
There should now be a fix for this issue gated behind the
fixBorderlessRippleAndroidflag.cortinico commentedon Oct 13, 2026
Fixed by #58902