Categories
React Native Answers

How to add a touchable ripple with React Native?

Spread the love

To add a touchable ripple with React Native, we use the TouchableRipple component.

For instance, we write

import * as React from 'react';
import { View } from 'react-native';
import { Text, TouchableRipple } from 'react-native-paper';

const MyComponent = () => (
  <TouchableRipple
    onPress={() => console.log('Pressed')}
    rippleColor="rgba(0, 0, 0, .32)"
  >
    <Text>Press anywhere</Text>
  </TouchableRipple>
);

export default MyComponent;

to wrap TouchableRipple around our Text.

Now when we tap on the Text, we should see the ripple effect.

We set the ripple color by setting the rippleColor prop.

And onPress is run when the ripple is pressed.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.