Switch MainButton to use Margin not Padding, and fix shadow prop warning (#212)

* Switch MainButton to use Margin not Padding

Switch from `paddingHorizontal` to `marginHorizontal`

* Move Shadow Props to different View

Currently the shadow is rendered on an item without a background color, which causes a warning.

This commit moves the shadow props to the same View that contains the backgroundColor, thus removing the warning.

Makes no difference to usage/appearance.

Author: PC Futures

ActionButton.js

@@ -185,7 +185,7 @@ export default class ActionButton extends Component {
           borderRadius: this.props.size / 2,
           width: this.props.size
         }
-      : { paddingHorizontal: this.props.offsetX, zIndex: this.props.zIndex };
+      : { marginHorizontal: this.props.offsetX, zIndex: this.props.zIndex };
 
     return (
       <View style={[

ActionButtonItem.js

@@ -107,15 +107,11 @@ export default class ActionButtonItem extends Component {
         style={[animatedViewStyle, parentStyle]}
       >
         <View
-          style={[
-            {
-              width: this.props.size,
-              height: this.props.size,
-              borderRadius: size / 2
-            },
-            !hideShadow && shadowStyle,
-            !hideShadow && this.props.shadowStyle
-          ]}
+          style={{
+            width: this.props.size,
+            height: this.props.size,
+            borderRadius: size / 2
+          }}
         >
           <Touchable
             background={touchableBackground(
@@ -125,7 +121,10 @@ export default class ActionButtonItem extends Component {
             activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
             onPress={this.props.onPress}
           >
-            <View style={[buttonStyle]}>
+            <View style={[
+              buttonStyle,
+              !hideShadow ? {...shadowStyle, ...this.props.shadowStyle} : null
+            ]}>
               {this.props.children}
             </View>
           </Touchable>