From a37ce1e3fa6981589bcb5d990953cc633287f9f4 Mon Sep 17 00:00:00 2001
From: Michael Nilsson <michaelnilsson90@hotmail.com>
Date: Sat, 14 Oct 2017 18:24:59 +0200
Subject: [PATCH] Centering and shadows on android fixed with prop
 fixNativeFeedbackRadius.

When setting fixNativeFeedbackRadius to true and giving the ActionButton position 'Center'. The AtionButton and ActionButtonItems would have an offset from the center due to incorrect styling.

fixNativeFeedbackRadius also caused an ugly shadow on ActionButtonItems and their respective lable, and also a cropped dropshadow.

For the ActionButtonItem, this was due to the shadow styling was set on the wrong element for android. As for the lable, we do not need to set the fixNativeFeedbackRadius to the touchableBackground (the lable is rectangular anyway). You'll notice that the ripple effect on the lable would extend in a circular fashion outside the borders of the lable.
---
 ActionButton.js     |  2 +-
 ActionButtonItem.js | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 0d82585..9364000 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -180,7 +180,7 @@ export default class ActionButton extends Component {
     const parentStyle = isAndroid &&
       this.props.fixNativeFeedbackRadius
       ? {
-          right: this.props.offsetX,
+          marginHorizontal: this.props.offsetX,
           zIndex: this.props.zIndex,
           borderRadius: this.props.size / 2,
           width: this.props.size
diff --git a/ActionButtonItem.js b/ActionButtonItem.js
index 4ca7482..83bf88c 100644
--- a/ActionButtonItem.js
+++ b/ActionButtonItem.js
@@ -8,6 +8,7 @@ import {
   TouchableNativeFeedback,
   TouchableWithoutFeedback,
   Dimensions,
+  Platform,
 } from "react-native";
 import {
   shadowStyle,
@@ -92,9 +93,8 @@ export default class ActionButtonItem extends Component {
     const parentStyle = isAndroid &&
       this.props.fixNativeFeedbackRadius
       ? {
-          height: size,
-          marginBottom: spacing,
-          right: this.props.offsetX,
+          paddingHorizontal: this.props.offsetX,
+          height: size + SHADOW_SPACE + spacing,
           borderRadius: this.props.size / 2
         }
       : {
@@ -107,11 +107,13 @@ export default class ActionButtonItem extends Component {
         style={[animatedViewStyle, parentStyle]}
       >
         <View
-          style={{
+          style={[{
             width: this.props.size,
             height: this.props.size,
             borderRadius: size / 2
-          }}
+          },
+          !hideShadow && Platform.OS === "android" ? {...shadowStyle, ...this.props.shadowStyle} : null
+        ]}
         >
           <Touchable
             background={touchableBackground(
@@ -123,7 +125,7 @@ export default class ActionButtonItem extends Component {
           >
             <View style={[
               buttonStyle,
-              !hideShadow ? {...shadowStyle, ...this.props.shadowStyle} : null
+              !hideShadow && Platform.OS === "ios" ? {...shadowStyle, ...this.props.shadowStyle} : null
             ]}>
               {this.props.children}
             </View>
@@ -182,8 +184,7 @@ export default class ActionButtonItem extends Component {
     return (
       <TextTouchable
         background={touchableBackground(
-          this.props.nativeFeedbackRippleColor,
-          this.props.fixNativeFeedbackRadius
+          this.props.nativeFeedbackRippleColor
         )}
         activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
         onPress={this.props.onPress}