[0.80] Using Android ripple on background (default) does not work

[vanHoi]

Description

When using React Native 0.80.x, the Android ripple config does not work any more when not using it on the foreground. Applying a ripple to the background is the default behaviour. When setting the foreground: true, it still works, but that is not the effect we are after.

On React Native 0.79, everything still works like expected.

Steps to reproduce

When using a bare React Native project, just add a really simple Pressable component, for example:

<Pressable android_ripple={{ color: 'blue', foreground: false }} onPress={() => console.log('Pressed!')}>
  <View
    style={{ width: '100%', height: 250 }}
  />
</Pressable>

Then run the app on Android.
Notice that the press event is fired correctly. You do not see any ripple effect.
When setting foreground: true, everything works like expected.

The issue is present on both the old and new architecture.

React Native Version

0.80.2 (it still persists in 0.81.0)

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.5
  CPU: (12) arm64 Apple M2 Max
  Memory: 61.47 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.16.0
    path: ~/.nvm/versions/node/v22.16.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.16.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.16.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/ireumkens/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "27"
      - "29"
      - "32"
      - "34"
      - "35"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 35.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-27 | ARM 64 v8a
      - android-27 | Intel x86_64 Atom
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: 25.1.8937393
IDEs:
  Android Studio: 2024.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /Users/ireumkens/.jenv/shims/javac
  Ruby:
    version: 3.3.0
    path: /Users/ireumkens/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No crash - just unexpected behaviour.

MANDATORY Reproducer

https://github.com/vanHoi/android-ripple-bug

Screenshots and Videos

First I'm tapping the topmost box. Then tapping the bottom box.

ripple.bug.mp4

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[cortinico]

Duplicate of:

• [0.76][New Arch] Pressable loses background when applying borderless ripple effect #48552

Please see the workaround I suggested here: #48552 (comment)

[vanHoi]

Hi @cortinico ,

Thanks for your quick response. I do think that this is a separate bug however.
I tried the workaround you mentioned, but it does not fix this issue.

Also, this issue is introduced with 0.80. In 0.79 it works like it should. Also it is broken on both the old and new architecture.

I created this snack on Expo 53 (so it should run RN 0.79 with new arch), and there the ripple works like expected. Run the same code on 0.80 and it is broken. Adding the collapsable tag to the parent does not fix it.

Link: https://snack.expo.dev/@vanhoi/android-ripple?platform=android

[cortinico]

Hi @cortinico ,

Thanks for your quick response. I do think that this is a separate bug however. I tried the workaround you mentioned, but it does not fix this issue.

Also, this issue is introduced with 0.80. In 0.79 it works like it should. Also it is broken on both the old and new architecture.

I created this snack on Expo 53 (so it should run RN 0.79 with new arch), and there the ripple works like expected. Run the same code on 0.80 and it is broken. Adding the collapsable tag to the parent does not fix it.

Link: snack.expo.dev/@vanhoi/android-ripple?platform=android

Thanks for the further context.
We'll need to investigate then which commit of 0.80 introduced this regression