react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

TouchableRipple ripple effect not working in RN 0.81

Open mo-elnady opened this issue 4 months ago • 3 comments

Current behaviour

After upgrading to RN 0.81 all ripple effect in TouchableRipple component doesn't show anymore.

Expected behaviour

rippleColour prop is not effective anymore, it should normally apply the selected colour.

How to reproduce?

<TouchableRipple rippleColor={'blue'} onPress={ () => console.log("Pressed"); } > <Image /> </TouchableRipple>

Your Environment

software version
android 15
react-native 0.81
react-native-paper 5.14.5

mo-elnady avatar Sep 24 '25 12:09 mo-elnady

I found it has some problems with theme styling with expo 54

farynaio avatar Oct 03 '25 16:10 farynaio

I was experiencing the same issue, but I was able to get the Ripple Effect to display on Android by modifying the code as follows:

import { TouchableRipple } from 'react-native-paper'
import { type PressableAndroidRippleConfig } from 'react-native'

<TouchableRipple
  // rippleColor={tapHighlightColor}
  underlayColor={tapHighlightColor}
  background={
    {
      color: tapHighlightColor,
      foreground: true,
    } as PressableAndroidRippleConfig
  }
  style={styles.content}
>
...
</TouchableRipple>

Environment

  • Android: 16
  • react-native: 0.81.4
  • expo: 54.0.12
  • react-native-paper: 5.14.5

ryonakae avatar Oct 10 '25 03:10 ryonakae

Adding borderless={true} made it work for me

CatLover01 avatar Oct 25 '25 00:10 CatLover01