How to add a touchable ripple with React Native?

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.