Added sidebar navigation

app/components/Sidebar.js

+import React from 'react';
+import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
+import styles from '../style';
+
+import * as actions from '../actions/navigation';
+
+const Sidebar = props =>
+  <View
+    style={styles.sidebar}
+  >
+    <Text style={styles.header}>MENU</Text>
+    <Text onPress={() => props.navigate('login')} style={styles.button} >Log in</Text>
+    <Text onPress={() => props.navigate('welcome')} style={styles.button} >Welcome</Text>
+  </View>
+;
+
+Sidebar.propTypes = {
+  navigate: React.PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = dispatch => ({
+  navigate: scene => dispatch(actions.navigate(scene)),
+});
+
+export default connect(() => ({}), mapDispatchToProps)(Sidebar);

app/components/navigator.js

 import React from 'react';
 import { connect } from 'react-redux';
+import Drawer from 'react-native-drawer';
 import * as actions from '../actions/navigation';
 import Login from './Login';
 import Welcome from './Welcome';
+import Sidebar from './Sidebar';
 
 // const mapStateToProps = state => state.currentScene;
 
@@ -14,18 +16,32 @@ const mapDispatchToProps = dispatch => ({
   navigate: scene => dispatch(actions.navigate(scene)),
 });
 
-const ReduxNavigator = (props) => {
-  const currentScene = props.currentScene;
-  switch (currentScene) {
+const sceneToComponent = (scene) => {
+  switch (scene) {
     case 'login':
-      return (<Login />);
+      return <Login />;
     case 'welcome':
-      return (<Welcome />);
+      return <Welcome />;
     default:
-      return (<Login />);
+      return <Login />;
   }
 };
 
+const ReduxNavigator = props => (
+  <Drawer
+    type="displace"
+    content={<Sidebar />}
+    openDrawerOffset={0.4}
+    panOpenMask={0.2}
+    panCloseMask={0.2}
+    panThreshold={0.3}
+    tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
+    tapToClose
+  >
+    {sceneToComponent(props.currentScene)}
+  </Drawer>
+  );
+
 ReduxNavigator.propTypes = {
   currentScene: React.PropTypes.string.isRequired,
 };

app/reducers/navigation.js

@@ -27,6 +27,12 @@ export default function navigate(state = initialState, action = {}) {
         currentScene: scene,
       };
     }
+    case types.NAVIGATE: {
+      return {
+        previousScenes: [],
+        currentScene: action.scene,
+      };
+    }
     default:
       return { ...state };
   }

app/style.js

+import { StyleSheet } from 'react-native';
+
+const magenta = '#E62272';
+const white = '#FFFFFF';
+const black = '#000000';
+
+const styles = StyleSheet.create({
+  sidebar: {
+    flex: 1,
+    backgroundColor: white,
+  },
+  header: {
+    backgroundColor: magenta,
+    color: white,
+    fontWeight: 'bold',
+    padding: 20,
+  },
+  button: {
+    backgroundColor: white,
+    color: black,
+    paddingLeft: 10,
+    paddingTop: 20,
+    paddingBottom: 20,
+    borderBottomWidth: 1,
+  },
+});
+
+export default styles;

app/styles.js

-import { StyleSheet, Dimensions } from 'react-native';
-
-const magenta = '#E62272';
-const deviceWidth = Dimensions.get('window').width;
-// const deviceHeigth = Dimensions.get('window').heigth;
-const margin = 10;
-
-const styles = StyleSheet.create({
-  body: {
-    padding: 10,
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  bodyText: {
-    fontFamily: 'opensans',
-  },
-  textInput: {
-    alignSelf: 'stretch',
-  },
-  logo: {
-    width: deviceWidth - margin,
-    resizeMode: 'contain',
-  },
-  button: {
-    color: magenta,
-  },
-});
-
-export default styles;

package.json

@@ -14,12 +14,13 @@
       "text-summary"
     ],
     "modulePaths": [
-        ".yarn/"
+      ".yarn/"
     ]
   },
   "dependencies": {
     "react": "~15.4.0-rc.4",
     "react-native": "^0.41.1",
+    "react-native-drawer": "^2.3.0",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0"

yarn.lock

@@ -3490,6 +3490,12 @@ react-native-cli@^2.0.1:
     prompt "^0.2.14"
     semver "^5.0.3"
 
+react-native-drawer@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.3.0.tgz#a0369ec80ff0b61c9f152dbdea91fe76c843113a"
+  dependencies:
+    tween-functions "^1.0.1"
+
 react-native@^0.41.1:
   version "0.41.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.41.2.tgz#c6f486b8450a9909e6fed2dfd2c2af946563bf4f"
@@ -4224,6 +4230,10 @@ tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
 
+tween-functions@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"