Full width styling for quick actions

Summary: - Used absolute positioning to render full-width quick actions

Reviewed By: fkgozali

Differential Revision: D3302467

fbshipit-source-id: cdcac88b20eff7a71be1ab8bb39e6888216dad84

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -78,8 +78,8 @@ const styles = StyleSheet.create({
     width: 76,
   },
   image: {
-    height: 30,
+    height: 33,
-    width: 30,
+    width: 33,
   },
   text: {
     color: '#ffffff',

Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js

@@ -61,7 +61,6 @@ const SwipeableQuickActions = React.createClass({
 
 const styles = StyleSheet.create({
   background: {
-    alignSelf: 'flex-end',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-end',

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -122,13 +122,7 @@ const SwipeableRow = React.createClass({
   },
 
   render(): ReactElement {
-    const slideoutStyle = [
+    const slideoutStyle = [styles.slideOutContainer];
-      styles.slideOutContainer,
-      {
-        right: -this.state.scrollViewWidth,
-        width: this.state.scrollViewWidth,
-      },
-    ];
     if (Platform.OS === 'ios') {
       slideoutStyle.push({opacity: this.state.isSwipeableViewRendered ? 1 : 0});
     }
@@ -244,8 +238,7 @@ const SwipeableRow = React.createClass({
 
   _onLayoutChange(event: Object): void {
     const width = event.nativeEvent.layout.width;
-
+    if (width && width !== this.state.scrollViewWidth) {
-    if (width !== this.state.scrollViewWidth) {
       this.setState({
         scrollViewWidth: width,
       });
@@ -259,9 +252,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   slideOutContainer: {
+    bottom: 0,
     flex: 1,
-    flexDirection: 'column',
+    left: 0,
-    alignItems: 'flex-end',
+    position: 'absolute',
+    right: 0,
+    top: 0,
   },
 });