Fix for down vertical orientation (mastermoo#113)

Author: therealgilles

ActionButton.js

@@ -33,7 +33,7 @@ export default class ActionButton extends Component {
   //////////////////////
 
   getContainerStyles() {
-    return [styles.overlay, this.getOrientation(), this.getOffsetXY()];
+    return [this.getOverlayStyles(), this.getOrientation(), this.getOffsetXY()];
   }
 
   getActionButtonStyles() {
@@ -56,7 +56,8 @@ export default class ActionButton extends Component {
   getOffsetXY() {
     return {
       paddingHorizontal: this.props.offsetX - 8,
-      paddingBottom: this.props.offsetY
+      paddingBottom: this.props.verticalOrientation === 'up' ? this.props.offsetY : 0,
+      paddingTop: this.props.verticalOrientation === 'down' ? this.props.offsetY : 0
     };
   }
 
@@ -65,22 +66,30 @@ export default class ActionButton extends Component {
       styles.actionsVertical,
       this.getOrientation(),
       {
-        flexDirection: this.props.verticalOrientation === 'down' ?
-          'column-reverse' :
-          'column',
+        flexDirection: 'column',
+        justifyContent: this.props.verticalOrientation === 'up' ? 'flex-end' : 'flex-start'
       },
     ];
   }
 
+  getOverlayStyles() {
+    return [
+      styles.overlay,
+      {
+        justifyContent: this.props.verticalOrientation === 'up' ? 'flex-end' : 'flex-start'
+      }
+    ]
+  }
+
 
   //////////////////////
   // RENDER METHODS
   //////////////////////
 
   render() {
     return (
-      <View pointerEvents="box-none" style={styles.overlay}>
-        <Animated.View pointerEvents="none" style={[styles.overlay, {
+      <View pointerEvents="box-none" style={this.getOverlayStyles()}>
+        <Animated.View pointerEvents="none" style={[this.getOverlayStyles(), {
           backgroundColor: this.props.bgColor,
           opacity: this.anim
         }]}>
@@ -207,7 +216,7 @@ export default class ActionButton extends Component {
     return (
       <TouchableOpacity
         activeOpacity={1}
-        style={styles.overlay}
+        style={this.getOverlayStyles()}
         onPress={this.reset.bind(this)}
       />
     );
@@ -298,7 +307,6 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
     backgroundColor: 'transparent',
-    justifyContent: 'flex-end',
   },
   actionBarItem: {
     alignItems: 'center',
@@ -327,6 +335,5 @@ const styles = StyleSheet.create({
   },
   actionsVertical: {
     flex: 1,
-    justifyContent: 'flex-end',
-  },
+  }
 });

ActionButtonItem.js

@@ -38,8 +38,8 @@ export default class ActionButtonItem extends Component {
         style={[styles.actionButtonWrap, {
           height: this.props.size + margin + 12,
           alignItems: this.state.alignItems,
-          marginBottom: this.props.verticalOrientation === 'up' ? margin : 0,
-          marginTop: this.props.verticalOrientation === 'down' ? margin : 0,
+          marginBottom: this.props.verticalOrientation === 'up' ? margin : 0, // does not seem necessary
+          marginTop: this.props.verticalOrientation === 'down' ? margin : 0, // does not seem necessary
           marginHorizontal: 8,
           opacity: this.props.anim,
           transform: [
@@ -69,8 +69,8 @@ export default class ActionButtonItem extends Component {
               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,
+              marginBottom: this.props.verticalOrientation === 'up' ? 12 : 0, // does not seem necessary
+              marginTop: this.props.verticalOrientation === 'down' ? -12 : 0,
             }]}
           >
             {this.props.children}
@@ -94,7 +94,8 @@ export default class ActionButtonItem extends Component {
   getTextStyles() {
     // to align the center of the label with the center of the button,
     // offset = (half the size of the btn) - (half the size of the label)
-    let offsetTop = this.props.size >= 28 ? (this.props.size / 2) - 14 : 0;
+    let directionOffset = this.props.verticalOrientation === 'down' ? -12 : 0
+    let offsetTop = this.props.size >= 28 ? (this.props.size / 2) - 14 + directionOffset : 0;
 
     let positionStyles = {
       right: this.props.size + this.state.spaceBetween + 8,

README.md

@@ -93,8 +93,8 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 | bgColor       | string        | "transparent"       | background color when ActionButtons are visible
 | buttonColor   | string        | "rgba(0,0,0,1)"     | background color of the +Button **(must be rgba value!)**
 | spacing       | number        | 20                  | spacing between the `ActionButton.Item`s
-| offsetX       | number        | 10 / 30             | offset to the sides of the screen
-| offsetY       | number        | 4 / 30              | offset to the bottom of the screen
+| offsetX       | number        | 10 / 30             | offset from the left/right side of the screen for `left`/`right` position respectively
+| offsetY       | number        | 4 / 30              | offset from the bottom/top of the screen for `up`/`down` verticalOrientation respectively
 | btnOutRange   | string        | props.buttonColor   | button background color to animate to
 | outRangeScale | number        | 1                   | changes size of button during animation
 | onPress       | function      | null                | fires, when ActionButton is tapped