react-native-material-ripple

Base component for touchable elements

Features

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

Installation

npm install --save react-native-material-ripple

Usage

import React, { Component } from 'react';
import { Text } from 'react-native';
import Ripple from 'react-native-material-ripple';

class Example extends Component {
  render() {
    return (
      <Ripple>
        <Text>touch me</Text>
      </Ripple>
    );
  }
}

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 properties will also work

Example

git clone https://github.com/n4kz/react-native-material-ripple
cd react-native-material-ripple/example
npm install
react-native run-ios # or run-android

Copyright and License

BSD License

Copyright 2017-2018 Alexander Nazarov. All rights reserved.