Package Exports

react-native-material-ripple

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-material-ripple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-material-ripple

Base component for touchable elements

example

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

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
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	-

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