How to Create a Button with Ripple Effect in React Native

In this blog post, I will show you how to create a button with a ripple effect in react native without using any external library. We all know that ripple effects come with material design. Ripple effect helps the user to identify that his action such as button press is registered.

Please note that I am using a Pressable component to create the button. Hence, this react native tutorial is applicable only to react native version 0.63 or higher. We use android_ripple prop of the Pressable so that we can create ripple effect in Android platform. If you are not familiar with the Pressable component then you can check out my blog post how to use Pressable component in react native.

The android_ripple prop accepts an object where we can customize ripple color and radius. You can check the official docs here.

Following is the example of ripple effect in react native.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Pressable
        style={styles.button}
        onPress={() => console.log('pressed')}
        android_ripple={{color: 'green'}}>
        <Text style={styles.buttonText}>Button</Text>
      </Pressable>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    borderRadius: 8,
    padding: 6,
    height: 50,
    width: '70%',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 5,
    backgroundColor: 'cyan',
  },
  buttonText: {
    fontSize: 16,
    color: 'black',
  },
});

The example creates ripple effect when the button is pressed. See the output given below.

I hope this react native tutorial will help you.

1 thought on “How to Create a Button with Ripple Effect in React Native”

  1. How can I get ripple effect on an image? Using pressable, the ripple effect does not occur over the image. Any thoughts?

Leave a Reply

%d bloggers like this: