Skip to main content

Ripple effect

The ripple effect is a visual feedback that occurs when a user interacts with a pressable UI element, such as a button. This response takes the form of a circular ripple expanding from the point of contact, much like a drop falling into water and creating ripples.

The ripple effect is an essential aspect of Material Design, and Paper's pressable components have it enabled by default. Nonetheless, it can be tailored to suit specific needs.


The ripple effect on the iOS platform is replaced by a highlight effect.

Customize ripple effect color in component

The rippleColor prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the Button component's ripple effect transparent, simply pass the desired color value to the prop:

onPress={() => console.log('Pressed')}>
Press me

Disable ripple effect in all components

To disable the ripple effect in all of Paper's components set rippleEffectEnabled: false on the settings prop of PaperProvider.

import { Provider as PaperProvider } from 'react-native-paper';
// ...

rippleEffectEnabled: false
// ...