From bd012a5287a63192a5de50a785bb69932fdce797 Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 14:06:30 -0800
Subject: [PATCH 1/6] Make TouchableOpacity into a Animated.TouchableOpacity

---
 src/ButtonComponent.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index 5ba7b1d..4416111 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Animated } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Button from './common/Button';
 
@@ -132,14 +132,14 @@ class ButtonComponent extends Component {
     }
 
     return (
-      <TouchableOpacity
+      <Animated.TouchableOpacity
         accessibilityTraits="button"
         onPress={currentButtonState.onPress}
         activeOpacity={0.9}
         style={[styles.container, { width: buttonWidth, height: buttonHeight }, this.props.style]}
       >
         {content}
-      </TouchableOpacity>
+      </Animated.TouchableOpacity>
     );
   }
 }

From 5d4c49460ebbf0a3e5a44f721b1a07716eea499f Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 14:31:01 -0800
Subject: [PATCH 2/6] Change Animated Location

---
 src/ButtonComponent.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index 4416111..73c9a6c 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -112,7 +112,7 @@ class ButtonComponent extends Component {
 
     if (type === 'primary') {
       content = (
-        <LinearGradient
+        <Animated.LinearGradient
           start={gradientStart}
           end={gradientEnd}
           colors={backgroundColors}
@@ -120,26 +120,26 @@ class ButtonComponent extends Component {
           style={[styles.button, shape, currentButtonState.buttonStyle]}
         >
           {this.renderButton({ textStyle: styles.text })}
-        </LinearGradient>
+        </Animated.LinearGradient>
       );
     } else {
       const border = type === 'border' && styles.border;
       content = (
-        <View style={[styles.button, border, shape, currentButtonState.buttonStyle]}>
+        <Animated.View style={[styles.button, border, shape, currentButtonState.buttonStyle]}>
           {this.renderButton({ textStyle: styles.secondaryText })}
-        </View>
+        </Animated.View>
       );
     }
 
     return (
-      <Animated.TouchableOpacity
+      <TouchableOpacity
         accessibilityTraits="button"
         onPress={currentButtonState.onPress}
         activeOpacity={0.9}
         style={[styles.container, { width: buttonWidth, height: buttonHeight }, this.props.style]}
       >
         {content}
-      </Animated.TouchableOpacity>
+      </TouchableOpacity>
     );
   }
 }

From ec6980f748315290f37681b497980a654415f25d Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 14:47:44 -0800
Subject: [PATCH 3/6] Wrap LinearGradient in Animated

---
 src/ButtonComponent.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index 73c9a6c..516c712 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -28,6 +28,8 @@ const defaultProps = {
   height: 50,
 };
 
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
 class ButtonComponent extends Component {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
@@ -112,7 +114,7 @@ class ButtonComponent extends Component {
 
     if (type === 'primary') {
       content = (
-        <Animated.LinearGradient
+        <AnimatedLinearGradient
           start={gradientStart}
           end={gradientEnd}
           colors={backgroundColors}
@@ -120,7 +122,7 @@ class ButtonComponent extends Component {
           style={[styles.button, shape, currentButtonState.buttonStyle]}
         >
           {this.renderButton({ textStyle: styles.text })}
-        </Animated.LinearGradient>
+        </AnimatedLinearGradient>
       );
     } else {
       const border = type === 'border' && styles.border;

From 4a7a2134cc7f7924f1013f3273329b68c722f095 Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 15:00:13 -0800
Subject: [PATCH 4/6] Expose onPressIn/onPressout

---
 src/ButtonComponent.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index 516c712..1f3f233 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -137,6 +137,8 @@ class ButtonComponent extends Component {
       <TouchableOpacity
         accessibilityTraits="button"
         onPress={currentButtonState.onPress}
+        onPressIn={currentButtonState.onPressIn}
+        onPressOut={currentButtonState.onPressOut}
         activeOpacity={0.9}
         style={[styles.container, { width: buttonWidth, height: buttonHeight }, this.props.style]}
       >

From 15569e2d9a37d343acd65b3d14c8d78deb4dd9d3 Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 15:00:41 -0800
Subject: [PATCH 5/6] Add global buttonStyle before
 currentButtonSTate.buttonStyle

---
 src/ButtonComponent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index 1f3f233..ee1a0a1 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -119,7 +119,7 @@ class ButtonComponent extends Component {
           end={gradientEnd}
           colors={backgroundColors}
           collapsable={false}
-          style={[styles.button, shape, currentButtonState.buttonStyle]}
+          style={[styles.button, shape, this.props.buttonStyle, currentButtonState.buttonStyle]}
         >
           {this.renderButton({ textStyle: styles.text })}
         </AnimatedLinearGradient>
@@ -127,7 +127,7 @@ class ButtonComponent extends Component {
     } else {
       const border = type === 'border' && styles.border;
       content = (
-        <Animated.View style={[styles.button, border, shape, currentButtonState.buttonStyle]}>
+        <Animated.View style={[styles.button, border, shape, this.props.buttonStyle, currentButtonState.buttonStyle]}>
           {this.renderButton({ textStyle: styles.secondaryText })}
         </Animated.View>
       );

From e28c207b33d180cb44f9ac3761377538a0c333bb Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 9 Nov 2016 15:12:04 -0800
Subject: [PATCH 6/6] Allow global onPress with state specific onPress
 overrides

---
 src/ButtonComponent.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/ButtonComponent.js b/src/ButtonComponent.js
index ee1a0a1..c81f559 100644
--- a/src/ButtonComponent.js
+++ b/src/ButtonComponent.js
@@ -16,6 +16,8 @@ const propTypes = {
   style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   progressSize: PropTypes.number,
   onPress: PropTypes.func,
+  onPressIn: PropTypes.func,
+  onPressOut: PropTypes.func,
 };
 
 const defaultProps = {
@@ -136,9 +138,9 @@ class ButtonComponent extends Component {
     return (
       <TouchableOpacity
         accessibilityTraits="button"
-        onPress={currentButtonState.onPress}
-        onPressIn={currentButtonState.onPressIn}
-        onPressOut={currentButtonState.onPressOut}
+        onPress={currentButtonState.onPress || this.props.onPress}
+        onPressIn={currentButtonState.onPressIn || this.props.onPressIn}
+        onPressOut={currentButtonState.onPressOut || this.props.onPressOut}
         activeOpacity={0.9}
         style={[styles.container, { width: buttonWidth, height: buttonHeight }, this.props.style]}
       >