Animated_Button.js

import React from 'React';
import PropTypes from 'prop-types';
import Touchable from 'components/Touchable';
import { View, Animated } from 'react-native';
import Text from 'components/Text';

import { wrapperStyle, titleStyle } from './styled';

class Button extends React.Component {
  constructor(props) {
    super();
    this.state = {
      textColor: new Animated.Value(0),
      borderColor: new Animated.Value(0),
      backgroundColor: new Animated.Value(0)
    };
    this.textColor = props.color ? theme.white : theme.blue;
    this.borderColor = theme[props.color || 'blue'];
    this.backgroundColor = theme[props.color || 'white'];
  }

  componentWillReceiveProps(props) {
    this.setState({
      backgroundColor: new Animated.Value(0),
      borderColor: new Animated.Value(0)
    });
    if (props.color && props.color !== this.props.color) {
      this.backgroundColor = this.state.backgroundColor.interpolate({
        inputRange: [0, 150],
        outputRange: [theme[this.props.color], theme[props.color]]
      });
      this.borderColor = this.state.borderColor.interpolate({
        inputRange: [0, 150],
        outputRange: [theme[this.props.color], theme[props.color]]
      });
      Animated.parallel([
        Animated.timing(this.state.backgroundColor, {
          toValue: 150,
          duration: 250
        }).start(),
        Animated.timing(this.state.borderColor, {
          toValue: 150,
          duration: 250
        }).start()
      ]);
    }
  }

  onPress = () => {
    if (this.props.disabled) return;
    if (this.canPress) {
      this.canPress = false;
      this.props.onPress();
      setTimeout(() => { this.canPress = true; }, this.props.pressTimeout || 500);
    }
  }

  canPress = true;

  render() {
    const { accessibilityLabel, color, title, hasTVPreferredFocus, disabled, testID, children, small, textAlign } = this.props;
    const accessibilityTraits = ['button'];
    if (disabled) {
      accessibilityTraits.push('disabled');
    }
    let size;
    if (small) {
      size = 14;
    }
    return (
      <Touchable
        accessibilityComponentType="button"
        accessibilityLabel={accessibilityLabel}
        accessibilityTraits={accessibilityTraits}
        hasTVPreferredFocus={hasTVPreferredFocus}
        testID={testID}
        disabled={disabled}
        onPress={this.onPress}
      >
        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={wrapperStyle(this.bgColor, this.borderColor, small)}>
            {children || (
              <Text style={titleStyle(color, size, textAlign)}>
                {title}
              </Text>
            )}
          </View>
        </View>
      </Touchable>
    );
  }
}

Button.propTypes = {
  title: PropTypes.string,
  children: PropTypes.node,
  accessibilityLabel: PropTypes.string,
  textAlign: PropTypes.string,
  small: PropTypes.bool,
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  disabled: PropTypes.bool,
  pressTimeout: PropTypes.number,
  onPress: PropTypes.func.isRequired,
  testID: PropTypes.string,
  hasTVPreferredFocus: PropTypes.bool
};

export default Button;