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.

Author: micnil

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

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}