How to create ripple on button press in React Native? Code Example

Creating a ripple effect in React Native is possible through android_ripple prop of Pressable component. It accepts a configuration object which defines the properties of ripples.

The object looks like this –

<Pressable
  android_ripple = {{
    color: '#FF0000',
    borderless: false,
    radius: 10,
    foreground: true
  }}
>
  ...
</Pressable>

Let’s understand these properties –

• color – Set the color of the ripples.
• borderless – Accepts boolean value. If true, then ripples will not be within the bounds of Pressable. They will spread outside.
• radius – A numeric value for radius of ripples.
• foreground – Whether to show ripples on foreground. Use this option to prevent ripples from hiding behind background colors of child elements.

Note: This feature is specific to Android so it won’t work in iOS.

Code Example

import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

const RipplePressableComponent = () => {
  
  return (
    <View style={styles.container}>
      <Pressable
        style={styles.button}
        android_ripple = {{
          color: '#FF000024',
          borderless: false,
          radius: 10,
          foreground: true
        }}
      >
        <View>
          <Text>
            Click me to see red ripples
          </Text>
        </View>
      </Pressable>
      
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  button: {
    padding:10,
    margin: 10,
    backgroundColor: '#DDDDDD',
  }
  
});

export default RipplePressableComponent;

Output –

From the image you can see that when we clicked the button, red ripple originates from a distance of click point and end at the click point. So, if you click near to left end of the button then ripple will take birth from left side and end at the click point.

In the code we are setting the ripple configuration from line 10 to 15. Here we are setting red color with transparency using color: '#FF000024'. Keeping borderless=false because we want ripple to be within the button boundary.

Live Demo

Conclusion

We can create ripple effect on press of any component using android_ripple prop of Pressable component. It accepts the ripple configuration which is an object of 4 properties – color, borderless, radius, foreground. It works for Android phones only.