medium-icon-ripple-5.jsx

import React, { PureComponent } from 'react';
import { StyleSheet, View, TouchableWithoutFeedback, Animated, Easing, Platform } from 'react-native';

import { COLOR, Toolbar, Icon } from '../react-native-material-ui';

const styles = StyleSheet.create({
    pageContainer: {
        flex: 1,
    },
    contentContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    iconContainer: {
        margin: 16,
        alignItems: 'center',
        justifyContent: 'center',
    },
});

class IconToggle extends PureComponent {
    constructor(props, context) {
        super(props, context);

        const maxOpacity = 0.12;

        this.state = {
            maxOpacity,
            scaleValue: new Animated.Value(0.01),
            opacityValue: new Animated.Value(maxOpacity),
        };

        this.renderRippleView = this.renderRippleView.bind(this);
        this.onPressedIn = this.onPressedIn.bind(this);
        this.onPressedOut = this.onPressedOut.bind(this);
    }
    onPressedIn() {
        Animated.timing(this.state.scaleValue, {
            toValue: 1,
            duration: 225,
            easing: Easing.bezier(0.0, 0.0, 0.2, 1),
            useNativeDriver: Platform.OS === 'android',
        }).start();
    }
    onPressedOut() {
        Animated.timing(this.state.opacityValue, {
            toValue: 0,
            useNativeDriver: Platform.OS === 'android',
        }).start(() => {
            this.state.scaleValue.setValue(0.01);
            this.state.opacityValue.setValue(this.state.maxOpacity);
        });
    }
    renderRippleView() {
        const { size, color } = this.props;
        const { scaleValue, opacityValue } = this.state;

        const rippleSize = size * 2;

        return (
            <Animated.View
                style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: rippleSize,
                    height: rippleSize,
                    borderRadius: rippleSize / 2,
                    transform: [{ scale: scaleValue }],
                    opacity: opacityValue,
                    backgroundColor: color || 'black',
                }}
            />
        );
    }
    render() {
        const { name, size, color } = this.props;
        const containerSize = size * 2;
        const iconContainer = { width: containerSize, height: containerSize };

        return (
            <TouchableWithoutFeedback onPressIn={this.onPressedIn} onPressOut={this.onPressedOut}>
                <View style={[styles.iconContainer, iconContainer]}>
                    {this.renderRippleView()}
                    <View>
                        <Icon name={name} size={size} color={color} />
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

class TestPage extends PureComponent {
    render() {
        return (
            <View style={styles.pageContainer}>
                <Toolbar leftElement="arrow-back" centerElement="Icon Toggle" />
                <View style={styles.contentContainer}>
                    <IconToggle name="star" color={COLOR.red500} size={40} />
                    <IconToggle name="people" size={40} />
                </View>
            </View>
        );
    }
}

export default TestPage;