added side menu drawer support

example/src/app.js

@@ -3,6 +3,7 @@ import { Navigation } from 'react-native-navigation';
 import './screens/FirstTabScreen';
 import './screens/SecondTabScreen';
 import './screens/ThirdTabScreen';
+import './screens/SideMenu';
 
 Navigation.startTabBasedApp({
   tabs: [
@@ -33,5 +34,10 @@ Navigation.startTabBasedApp({
         statusBarTextColorScheme: 'light'
       }
     }
-  ]
+  ],
+  drawer: {
+    left: {
+      screen: 'example.SideMenu'
+    }
+  }
 });

example/src/screens/FirstTabScreen.js

@@ -18,6 +18,10 @@ import './ModalScreen';
 // instead of React.Component, we extend Screen (imported above)
 class FirstTabScreen extends Screen {
   static navigatorButtons = {
+    leftButtons: [{
+      icon: require('../../img/navicon_menu.png'),
+      id: 'menu'
+    }],
     rightButtons: [
       {
         title: 'Edit',
@@ -33,6 +37,12 @@ class FirstTabScreen extends Screen {
     super(props);
   }
   onNavigatorEvent(event) {
+    if (event.id == 'menu') {
+      this.navigator.toggleDrawer({
+        side: 'left',
+        animated: true
+      });
+    }
     if (event.id == 'edit') {
       AlertIOS.alert('NavBar', 'Edit button pressed');
     }

example/src/screens/SideMenu.js

@@ -0,0 +1,40 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  AlertIOS
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// instead of React.Component, we extend Screen (imported above)
+class SideMenu extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+
+        <Text>Side Menu</Text>
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.SideMenu', () => SideMenu);

src/Screen.js

@@ -29,6 +29,9 @@ class Navigator {
   setTitle(params = {}) {
     return platformSpecific.navigatorSetTitle(this, params);
   }
+  toggleDrawer(params = {}) {
+    return platformSpecific.navigatorToggleDrawer(this, params);
+  }
 }
 
 export default class Screen extends Component {

src/platformSpecific.ios.js

@@ -17,6 +17,23 @@ function startTabBasedApp(params) {
   const controllerID = utils.getRandomId();
   const Controller = Controllers.createClass({
     render: function() {
+      if (!params.drawer || (!params.drawer.left && !params.drawer.right)) {
+        return this.renderBody();
+      } else {
+        const navigatorID = controllerID + '_drawer';
+        return (
+          <DrawerControllerIOS id={navigatorID}
+            componentLeft={params.drawer.left ? params.drawer.left.screen : undefined}
+            passPropsLeft={{navigatorID: navigatorID}}
+            componentRight={params.drawer.right ? params.drawer.right.screen : undefined}
+            passPropsRight={{navigatorID: navigatorID}}
+          >
+            {this.renderBody()}
+          </DrawerControllerIOS>
+        );
+      }
+    },
+    renderBody: function() {
       return (
         <TabBarControllerIOS id={controllerID + '_tabs'}>
         {
@@ -68,6 +85,23 @@ function startSingleScreenApp(params) {
   const controllerID = utils.getRandomId();
   const Controller = Controllers.createClass({
     render: function() {
+      if (!params.drawer || (!params.drawer.left && !params.drawer.right)) {
+        return this.renderBody();
+      } else {
+        const navigatorID = controllerID + '_drawer';
+        return (
+          <DrawerControllerIOS id={navigatorID}
+            componentLeft={params.drawer.left ? params.drawer.left.screen : undefined}
+            passPropsLeft={{navigatorID: navigatorID}}
+            componentRight={params.drawer.right ? params.drawer.right.screen : undefined}
+            passPropsRight={{navigatorID: navigatorID}}
+          >
+            {this.renderBody()}
+          </DrawerControllerIOS>
+        );
+      }
+    },
+    renderBody: function() {
       const screen = params.screen;
       const navigatorID = controllerID + '_nav';
       const screenInstanceID = utils.getRandomId();
@@ -174,6 +208,14 @@ function navigatorSetTitle(navigator, params) {
   });
 }
 
+function navigatorToggleDrawer(navigator, params) {
+  const controllerID = navigator.navigatorID.split('_')[0];
+  Controllers.DrawerControllerIOS(controllerID + '_drawer').toggle({
+    side: params.side,
+    animated: params.animated
+  });
+}
+
 function navigatorSetButtons(navigator, navigatorEventID, params) {
   if (params.leftButtons) {
     const buttons = params.leftButtons.slice(); // clone
@@ -241,5 +283,6 @@ export default platformSpecific = {
   showModal,
   dismissModal,
   navigatorSetButtons,
-  navigatorSetTitle
+  navigatorSetTitle,
+  navigatorToggleDrawer
 }