Fixed Action Button Items shadows cropped left and right on Android (mastermoo#108)

* Increased size of shadow on iOS, changed shadow color to black

* Increased elevation in Android as well. Reduced height offset in iOS from 10 to 8.

* Hotfix: wrong single quote character

* Added bottom margin to prevent shadow cutoff on Android. Extraction of code from @paulomenezes's PR mastermoo#99, I take no credit for this work.

* Added margin to left and right of the button to resolve the shadow cropping issue.

* Correct spelling mistake

* Fix Action Button Items shadows which were cropped left and right on Android

* Fixes main button shadow rotating in iOS

Author: iris-chang

ActionButton.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { StyleSheet, Text, View, Animated, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, View, Animated, TouchableOpacity, Platform } from 'react-native';
 import ActionButtonItem from './ActionButtonItem';
 
 const alignItemsMap = {
@@ -38,6 +38,7 @@ export default class ActionButton extends Component {
 
   getActionButtonStyles() {
     const actionButtonStyles = [styles.actionBarItem, this.getButtonSize()];
+    if(!this.props.hideShadow) actionButtonStyles.push(styles.btnShadow);
     return actionButtonStyles;
   }
 
@@ -127,7 +128,7 @@ export default class ActionButton extends Component {
       },
     ];
 
-    if(!this.props.hideShadow) animatedViewStyle.push(styles.btnShadow);
+    if(!this.props.hideShadow && Platform.OS === 'android') animatedViewStyle.push(styles.btnShadow);
 
     return (
       <View style={this.getActionButtonStyles()}>

ActionButtonItem.js

@@ -25,8 +25,8 @@ export default class ActionButtonItem extends Component {
   render() {
     const translateXMap = {
       center: 0,
-      left: (this.props.parentSize - this.props.size) / 2,
-      right: -(this.props.parentSize - this.props.size) / 2,
+      left: (this.props.parentSize - this.props.size) / 2 - 8,
+      right: -(this.props.parentSize - this.props.size) / 2 + 8,
     }
 
     const translateX = translateXMap[this.props.position];
@@ -68,6 +68,7 @@ export default class ActionButtonItem extends Component {
               height: this.props.size,
               borderRadius: this.props.size / 2,
               backgroundColor: this.props.buttonColor || this.props.btnColor,
+              marginHorizontal: 8,
               marginBottom: this.props.verticalOrientation === 'up' ? 12 : 0,
               marginTop: this.props.verticalOrientation === 'down' ? 12 : 0,
             }]}
@@ -96,7 +97,7 @@ export default class ActionButtonItem extends Component {
     let offsetTop = this.props.size >= 28 ? (this.props.size / 2) - 14 : 0;
 
     let positionStyles = {
-      right: this.props.size + this.state.spaceBetween,
+      right: this.props.size + this.state.spaceBetween + 8,
       top: offsetTop
     }
 
@@ -107,7 +108,7 @@ export default class ActionButtonItem extends Component {
     }
 
     if (this.props.position == 'left') positionStyles = {
-      left: this.props.size + this.state.spaceBetween,
+      left: this.props.size + this.state.spaceBetween + 8,
       top: offsetTop
     }