Base component for touchable elements
Clone or download
Latest commit b36b0b9 Feb 13, 2018

readme.md

react-native-material-ripple

npm license codeclimate

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