TouchableOpacity.js

TouchableOpacity.js

import React, { PropTypes, Component } from 'react';
import { Animated } from 'react-native';
import { createResponder } from 'react-native-gesture-responder';

class TouchableOpacity extends Component {
  constructor(props) {
    super(props);
    
    const { onPress } = props;

    this.state = {
      opacity: new Animated.Value(1),
    };

    this.gestureResponder = createResponder({
      onStartShouldSetResponder: () => {
        Animated.timing(
            this.state.opacity, 
            {
              toValue: 0.5,
              duration: 300,
              useNativeDriver: true,
           },
        ).start();
        return true;
      },

      onResponderRelease: () => {
        Animated.sequence([
          Animated.timing(this.state.opacity, {
            toValue: 0.5,
            duration: 10,
            useNativeDriver: true,
          }),
          Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 200,
            useNativeDriver: true,
          }),
        ]).start();

        this.forceUpdate();
        onPress();
      },

    });
  }

  render() {
    const { children, styles = [] } = this.props;

    return (
      <Animated.View
        {...this.gestureResponder}
        style={[
          { opacity: this.state.opacity },
          ...styles,
        ]}
      >
        {children}
      </Animated.View>
    );
  }
}

TouchableOpacity.propTypes = {
  onPress: PropTypes.func,
  children: PropTypes.any,
  styles: PropTypes.array,
};