react-native-paper
react-native-paper copied to clipboard
TouchableRipple ripple effect not working in RN 0.81
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 |
I found it has some problems with theme styling with expo 54
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
Adding borderless={true} made it work for me