A React Material Ripple component that works on the Web, Android, iOS, Electron, and anywhere else React Native is supported. This component is a part of the React Universal ecosystem of universal React and React Native components. Checkout the React Universal docs to learn more.

Storybook Demos

Installation

npm i @reactuniversal/ripple --save

Example

import React from 'react';
import { View, Text } from 'react-native';
import Ripple from '@reactuniversal/ripple';

export default function Page() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Ripple
          rippleColor={'blue'}
          style={{
            width: 180,
            height: 250,
          }}>
          <Text>Click Me</Text>
        </Ripple>
      </View>
    );
}`;

Props

| Name | Description | Type | Default | | --------------------- | ---------------------------------------------------------------- | ------ | ------- | | displayUntilPressOut | Keep ripple at full size while holding press | bool | true | | disabled | Disables ripple | bool | | | onPress | Callback on ripple | func | | | rippleCentered | Whether the ripple starts at the center of the component or where you clicked | bool | false | | rippleColor | Color of ripple | string | rgba(0, 0, 0, .87) | | rippleContainerBorderRadius | Border Radius of ripple | number | 0 | | rippleDuration | Animation Duration of ripple to fill the entire component | duration | 400 | | rippleOpacity | Opacity of ripple | number | 0.3 | | rippleSize | Determines the size of ripple | number | 0 | | rippleSequential | Ripple should start in sequence | bool | false | | style | Styles root element | object | |