react-native-touch-ripple

Features

• Easy to use
• Configurable
• Consistent look and feel on iOS and Android
• Can be used as drop-in replacement for [TouchableWithoutFeedback][touchable]
• Pure javascript implementation
• RTL Support

Installation

npm install --save react-native-touch-ripple

or

yarn add react-native-touch-ripple

Usage

import React, { Component } from 'react';
import { Text } from 'react-native';
import TouchRipple  from 'react-native-touch-ripple'

class Example extends Component {
  render() {
    return (
      <TouchRipple>
        <Text>Press Here</Text>
      </TouchRipple>
    );
  }
}

Properties

name | description | type | default :--------------------------- |:-------------------------------------- | --------:|:------------ rippleColor | Ripple color | String | rgb(0, 0, 0) rippleOpacity | Ripple opacity | Number | 0.3 rippleDuration | Ripple duration in ms | Number | 400 rippleSize | Ripple size restriction | Number | 0 rippleContainerBorderRadius | Ripple container border radius | Number | 0 rippleCentered | Ripple always starts from center | Boolean | false rippleSequential | Ripple should start in sequence | Boolean | false rippleFades | Ripple fades out | Boolean | true disabled | Ripple should ignore touches | Boolean | false onPressIn | Touch moved in or started callback | Function | - onPressOut | Touch moved out or terminated callback | Function | - onPress | Touch up inside bounds callback | Function | - onLongPress | Touch delayed after onPressIn callback | Function | - onRippleAnimation | Animation start callback | Function | -

Other [TouchableWithoutFeedback][touchable] properties will also work