From 1711896f3406c509658aa286de6fca1548f96c36 Mon Sep 17 00:00:00 2001
From: Esa-Matti Suuronen <esa-matti@suuronen.org>
Date: Fri, 19 Feb 2016 13:04:03 +0200
Subject: [PATCH] Ensure that menu takes all available space

Without this it was not possible to use {flex:1}
in the menu component
---
 index.js  |  2 +-
 styles.js | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/index.js b/index.js
index 849ddc3..aa97eb0 100644
--- a/index.js
+++ b/index.js
@@ -211,7 +211,7 @@ class SideMenu extends Component {
    * @return {React.Component}
    */
   render() {
-    const menu = <View style={styles.menu}>{this.props.menu}</View>;
+    const menu = <View style={[styles.menu, {right: deviceScreen.width - this.props.openMenuOffset}]}>{this.props.menu}</View>;
 
     return (
       <View style={styles.container} onLayout={this.onLayoutChange.bind(this)}>
diff --git a/styles.js b/styles.js
index a2ba3a0..9af8154 100644
--- a/styles.js
+++ b/styles.js
@@ -4,18 +4,21 @@ const {
   StyleSheet,
 } = React;
 
+const absoluteStretch = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+
 module.exports = StyleSheet.create({
   container: {
-    flex: 1,
+    ...absoluteStretch,
     justifyContent: 'center',
-    alignItems: 'center',
   },
   menu: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    top: 0,
-    left: 0,
+    ...absoluteStretch,
   },
   frontView: {
     flex: 1,
@@ -25,11 +28,7 @@ module.exports = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+    ...absoluteStretch,
     backgroundColor: 'transparent',
   },
 });