working dashboard

app/screens/main.js

@@ -6,7 +6,8 @@ import React, { Component } from 'react';
 import {
   Dimensions,
   View,
-  Text
+  Text,
+  DrawerLayoutAndroid
 } from 'react-native';
 import {
   Actions
@@ -14,6 +15,7 @@ import {
 import { Fonts } from '../utils/Fonts.js';
 
 import { Drawer } from 'native-base';
+import Menu from './main/menu.js';
 
 // imported components for different sections in main component
 import Navbar from './main/navbar.js';
@@ -33,28 +35,32 @@ export default class Main extends Component<Props> {
     };
   }
 
+  closeDrawer = () => {
+    this.drawer._root.close();
+  };
+  openDrawer = () => {
+    this.drawer._root.open();
+  };
+
   render() {
     console.log('in Main');
-
-    closeDrawer = () => {
-      this.drawer._root.close()
-    };
-    openDrawer = () => {
-      this.drawer._root.open()
-    };
-
     return (
-      <View style={styles.container}>
+      <DrawerLayoutAndroid
-        <View style={styles.navbar}>
+        drawerWidth={300}
-          <Navbar />
+        drawerPosition={DrawerLayoutAndroid.positions.Left}
+        renderNavigationView={() => <Menu />}>
+        <View style={styles.container}>
+          <View style={styles.navbar}>
+            <Navbar />
+          </View>
+          <View style={styles.chat}>
+            <Chat position={this.position} />
+          </View>
+          <View style={styles.adspace}>
+            <AdSpace />
+          </View>
         </View>
-        <View style={styles.chat}>
+      </DrawerLayoutAndroid>
-          <Chat position={this.position} />
-        </View>
-        <View style={styles.adspace}>
-          <AdSpace />
-        </View>
-      </View>
     );
   }
 }

app/screens/main/chat.js

@@ -21,7 +21,7 @@ require('react-native');
 // Socket.io imports
 import './UserAgent';
 window.navigator.userAgent = "react-native";
-import io from 'socket.io-client/dist/socket.io';
+const io = require('socket.io-client/dist/socket.io');
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
@@ -43,7 +43,7 @@ export default class Chat extends Component<Props> {
     this.position = this.props.position;
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.socket = io('10.0.2.2:3000', {jsonp: false});
     this.socket.on('connect', () => {
       console.log('again');
@@ -64,7 +64,6 @@ export default class Chat extends Component<Props> {
 
   addMessage = (msg) => {
     console.log('New message received: ');
-    console.log(msg);
     var oldDOM = this.state.messagesDOM;
     var newMessage = this.createMessage(msg);
     oldDOM.push(newMessage);
@@ -131,8 +130,6 @@ export default class Chat extends Component<Props> {
   }
 
   render() {
-    console.log('rrendering');
-    console.log(this.state.messagesDOM);
     return (
       <View style={styles.container}>
 

app/screens/main/dashboard.js

@@ -1,36 +0,0 @@
-/*
- * Dashboard/Menu
- */
-import React, { Component } from 'react';
-import {
-  Dimensions,
-  View,
-  Text
-} from 'react-native';
-import {
-  Actions
-} from 'react-native-router-flux';
-import { Fonts } from '../utils/Fonts.js';
-
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-
-type Props = {};
-export default class Dashboard extends Component<Props> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    console.log('in dashboard');
-    return (
-      <View>
-        <Text>hasdf</Text>
-      </View>
-    );
-  }
-}
-
-const styles = {
-
-}

app/screens/main/menu.js

@@ -0,0 +1,68 @@
+/*
+ * AdSpace component within Main
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Text,
+  Image
+} from 'react-native';
+import {
+  Actions
+} from 'react-native-router-flux';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+const remote = 'http://www.frugalsoft.com/images/nice-cute-wallpaper-designs-cute-iphone-wallpaper-patterns';
+
+type Props = {};
+export default class Menu extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Text>Arjun Patel</Text>
+        </View>
+        <View style={styles.main}>
+          <View style={styles.option}>
+            <Text>Refresh Connection</Text>
+          </View>
+          <View style={styles.option}>
+            <Text>Change Avatar</Text>
+          </View>
+          <View style={styles.option}>
+            <Text>Disconnect</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 4,
+    backgroundColor: 'white'
+  },
+  header: {
+    flex: 1,
+    backgroundColor: 'grey',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  main: {
+    flex: 3,
+    flexDirection: 'column',
+    justifyContent: 'flex-start'
+  },
+  option: {
+    height: 10,
+    paddingTop: 20,
+    paddingBottom: 20,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: '#d7d9dd'
+  }
+}