TouchableRipple

A wrapper for views that should respond to touches. Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop). On unsupported platforms, it falls back to a highlight effect.

Usage

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 me</Text>
  </TouchableRipple>
);

Props

borderless Type: boolean

Default value: false

Whether to render the ripple outside the view bounds.

background Type: Object

Type of background drawabale to display the feedback. https://facebook.github.io/react-native/docs/touchablenativefeedback.html#background

disabled Type: boolean

Whether to prevent interaction with the touchable.

onPress Type: Function

Function to execute on press. If not set, will cause the touchable to be disabled.

rippleColor Type: string

Color of the ripple effect.

underlayColor Type: string

Color of the underlay for the highlight effect.

children (required) Type: React.Node

Content of the TouchableRipple.

style Type: any

theme Type: Theme

Static properties

supported

Whether ripple effect is supported.