From 33d9aa54f9da7cda749aad86cc5255a6ccfeac67 Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Sun, 27 Nov 2016 10:34:47 +0200
Subject: [PATCH 1/6] Fix shadow calculation warning. As a side-effect of this
 fix, the whole button scales when outRangeScale is set.

---
 ActionButton.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 44e97aa..6dd30e9 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -38,7 +38,6 @@ export default class ActionButton extends Component {
 
   getActionButtonStyles() {
     const actionButtonStyles = [styles.actionBarItem, this.getButtonSize()];
-    if(!this.props.hideShadow) actionButtonStyles.push(styles.btnShadow);
     return actionButtonStyles;
   }
 
@@ -128,22 +127,21 @@ export default class ActionButton extends Component {
       },
     ];
 
-    if(!this.props.hideShadow && Platform.OS === 'android') animatedViewStyle.push(styles.btnShadow);
+    const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle ]
 
     return (
-      <View style={this.getActionButtonStyles()}>
-        <TouchableOpacity
-          activeOpacity={0.85}
-          onLongPress={this.props.onLongPress}
-          onPress={() => {
-            this.props.onPress()
-            if (this.props.children) this.animateButton()
-          }}>
-          <Animated.View
-            style={animatedViewStyle}>
+      <View style={ styles.btnShadow }>
+        <View style={ actionButtonStyles }>
+          <TouchableOpacity
+            activeOpacity={0.85}
+            onLongPress={this.props.onLongPress}
+            onPress={() => {
+              this.props.onPress()
+              if (this.props.children) this.animateButton()
+            }}>
             {this._renderButtonIcon()}
-          </Animated.View>
-        </TouchableOpacity>
+          </TouchableOpacity>
+        </View>
       </View>
     );
   }

From a8bc6a8836b3639923c6461b4a53f965838c044a Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Sun, 27 Nov 2016 10:37:34 +0200
Subject: [PATCH 2/6] ... and use Animated.

---
 ActionButton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 6dd30e9..1f9f711 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -130,7 +130,7 @@ export default class ActionButton extends Component {
     const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle ]
 
     return (
-      <View style={ styles.btnShadow }>
+      <Animated.View style={ styles.btnShadow }>
         <View style={ actionButtonStyles }>
           <TouchableOpacity
             activeOpacity={0.85}
@@ -142,7 +142,7 @@ export default class ActionButton extends Component {
             {this._renderButtonIcon()}
           </TouchableOpacity>
         </View>
-      </View>
+      </Animated.View>
     );
   }
 

From e5d675292d157ccd93b1946688620b05b069ced5 Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Sun, 27 Nov 2016 10:52:48 +0200
Subject: [PATCH 3/6] Use animated

---
 ActionButton.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 1f9f711..0843f73 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -130,8 +130,8 @@ export default class ActionButton extends Component {
     const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle ]
 
     return (
-      <Animated.View style={ styles.btnShadow }>
-        <View style={ actionButtonStyles }>
+      <View style={ styles.btnShadow }>
+        <Animated.View style={ actionButtonStyles }>
           <TouchableOpacity
             activeOpacity={0.85}
             onLongPress={this.props.onLongPress}
@@ -141,8 +141,8 @@ export default class ActionButton extends Component {
             }}>
             {this._renderButtonIcon()}
           </TouchableOpacity>
-        </View>
-      </Animated.View>
+        </AnimView>
+      </View>
     );
   }
 

From 898852c4d75bc3025070ff042f202f271ef39bf3 Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Sun, 27 Nov 2016 11:09:44 +0200
Subject: [PATCH 4/6] fix derp

---
 ActionButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ActionButton.js b/ActionButton.js
index 0843f73..c7bc95b 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -141,7 +141,7 @@ export default class ActionButton extends Component {
             }}>
             {this._renderButtonIcon()}
           </TouchableOpacity>
-        </AnimView>
+        </Animated.View>
       </View>
     );
   }

From 7b8298c9bad65a874dc72188851cbc949f451acd Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Sun, 27 Nov 2016 21:24:34 +0200
Subject: [PATCH 5/6] honor hideShadow and really fix that warning

---
 ActionButton.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index c7bc95b..937c8ec 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -104,15 +104,6 @@ export default class ActionButton extends Component {
     const animatedViewStyle = [
       styles.btn,
       {
-        width: this.props.size,
-        height: this.props.size,
-        borderRadius: this.props.size / 2,
-        marginHorizontal: 8,
-        marginBottom: shadowHeight,
-        backgroundColor: this.anim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [this.props.buttonColor, buttonColorMax]
-        }),
         transform: [{
             scale: this.anim.interpolate({
               inputRange: [0, 1],
@@ -127,10 +118,21 @@ export default class ActionButton extends Component {
       },
     ];
 
-    const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle ]
+    const combinedStyle = {
+      width: this.props.size,
+      height: this.props.size,
+      borderRadius: this.props.size / 2,
+      marginBottom: shadowHeight,
+      backgroundColor: this.anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [this.props.buttonColor, buttonColorMax]
+      })
+    }
+
+    const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle, combinedStyle ]
 
     return (
-      <View style={ styles.btnShadow }>
+      <View style={ !this.props.hideShadow && [ styles.btnShadow, combinedStyle, { marginHorizontal: 8 }]}>
         <Animated.View style={ actionButtonStyles }>
           <TouchableOpacity
             activeOpacity={0.85}

From be60f87a72c8d98c3f23338085c4613008e75800 Mon Sep 17 00:00:00 2001
From: danieldunderfelt <dunderfeltdaniel@gmail.com>
Date: Mon, 28 Nov 2016 22:19:58 +0200
Subject: [PATCH 6/6] Add static backgroundColor to wrapper.

---
 ActionButton.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 937c8ec..62dfe02 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -104,6 +104,10 @@ export default class ActionButton extends Component {
     const animatedViewStyle = [
       styles.btn,
       {
+        backgroundColor: this.anim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [this.props.buttonColor, buttonColorMax]
+        }),
         transform: [{
             scale: this.anim.interpolate({
               inputRange: [0, 1],
@@ -123,13 +127,10 @@ export default class ActionButton extends Component {
       height: this.props.size,
       borderRadius: this.props.size / 2,
       marginBottom: shadowHeight,
-      backgroundColor: this.anim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [this.props.buttonColor, buttonColorMax]
-      })
+      backgroundColor: this.props.buttonColor
     }
 
-    const actionButtonStyles = [ this.getActionButtonStyles(), animatedViewStyle, combinedStyle ]
+    const actionButtonStyles = [ this.getActionButtonStyles(), combinedStyle, animatedViewStyle ]
 
     return (
       <View style={ !this.props.hideShadow && [ styles.btnShadow, combinedStyle, { marginHorizontal: 8 }]}>