react-native-material-ripple
v0.9.1
Published
Base component for touchable elements
Downloads
467,094
Maintainers
Readme
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.