drawer menu

index.android.js

@@ -8,6 +8,8 @@ import React, { Component } from "react";
 import { AppRegistry, Navigator, Text, View, UIManager } from "react-native";
 import { ThemeProvider, Toolbar } from "react-native-material-ui";
 import uiTheme from "./js/ui-theme";
+import SideMenu from "react-native-side-menu";
+import DrawerMenu from "./js/DrawerMenu";
 
 UIManager.setLayoutAnimationEnabledExperimental &&
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -15,27 +17,45 @@ UIManager.setLayoutAnimationEnabledExperimental &&
 export default class AreThereCookies extends Component {
   state = { drawerOpen: false };
 
+  toggleSideMenu = () => {
+    this.setState(({ drawerOpen }) => ({ drawerOpen: !drawerOpen }));
+  };
+
+  setSideMenuOpen = (drawerOpen: boolean) => {
+    this.setState({ drawerOpen });
+  };
+
   render() {
+    const { drawerOpen } = this.state;
     return (
       <ThemeProvider uiTheme={uiTheme}>
         <Navigator
           initialRoute={{ title: "AreThereCookies?", index: 0 }}
-          renderScene={(route, navigator) => (
-            <View>
-              <Toolbar
-                leftElement="menu"
-                onLeftElementPress={() =>
-                  this.setState(({ drawerOpen }) => ({
-                    drawerOpen: !drawerOpen
-                  }))}
-                centerElement="Are There Cookies?"
-                searchable={{ autoFocus: true, placeholder: "Search (todo)" }}
-              />
-              <View>
-                <Text>Scene content will go here...</Text>
-              </View>
-            </View>
-          )}
+          renderScene={(route, navigator) => {
+            const menu = <DrawerMenu navigator={navigator} route={route} />;
+            return (
+              <SideMenu
+                menu={menu}
+                isOpen={drawerOpen}
+                onChange={this.setSideMenuOpen}
+              >
+                <View style={{ flex: 1 }}>
+                  <Toolbar
+                    leftElement="menu"
+                    onLeftElementPress={this.toggleSideMenu}
+                    centerElement="Are There Cookies?"
+                    searchable={{
+                      autoFocus: true,
+                      placeholder: "Search (todo)"
+                    }}
+                  />
+                  <View style={{ flex: 1, backgroundColor: "lightblue" }}>
+                    <Text>Scene content will go here...</Text>
+                  </View>
+                </View>
+              </SideMenu>
+            );
+          }}
         />
       </ThemeProvider>
     );

js/DrawerMenu.js

@@ -0,0 +1,39 @@
+// @flow
+import React, { Component } from "react";
+import { Drawer, Avatar } from "react-native-material-ui";
+
+type Props = {
+  navigator: Object,
+  route: { index: number, title: string, page: string }
+};
+
+export default class DrawerMenu extends Component {
+  static displayName = "DrawerMenu";
+
+  props: Props;
+
+  render() {
+    return (
+      <Drawer>
+        <Drawer.Header>
+          <Drawer.Header.Account
+            avatar={<Avatar icon="person" />}
+            footer={{
+              dense: true,
+              centerElement: { primaryText: "User Name" }
+            }}
+          />
+        </Drawer.Header>
+        <Drawer.Section
+          divider
+          items={[
+            { icon: "today", value: "Products" },
+            { icon: "domain", value: "Places" },
+            { icon: "stars", value: "Faves" },
+            { icon: "exit-to-app", value: "Logout" }
+          ]}
+        />
+      </Drawer>
+    );
+  }
+}

package.json

@@ -11,6 +11,7 @@
     "react": "^15.4.2",
     "react-native": "^0.40.0",
     "react-native-material-ui": "^1.7.0",
+    "react-native-side-menu": "^0.20.1",
     "react-native-vector-icons": "^4.0.0"
   },
   "devDependencies": {

yarn.lock

@@ -3469,6 +3469,10 @@ react-native-material-ui@^1.7.0:
     react-native-material-design-styles "^0.2.6"
     react-native-vector-icons "3.0.0"
 
+react-native-side-menu@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/react-native-side-menu/-/react-native-side-menu-0.20.1.tgz#df21b4bb9d8a1aa3bae53d74ddf8a739eb59bfc5"
+
 react-native-vector-icons@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-3.0.0.tgz#a2f63757dee4fb89f67eef660e25e86926ae6827"