Double drawers

src/app.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import { View, Text } from "react-native";
-import { createStackNavigator, createAppContainer, createDrawerNavigator } from "react-navigation";
+import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerActions, NavigationActions } from "react-navigation";
 
 import KeysManager from './lib/keysManager'
 import StyleKit from "./style/StyleKit"
@@ -19,12 +19,39 @@ import Settings from "./screens/Settings"
 import NoteOptions from "./screens/NoteOptions"
 import InputModal from "./screens/InputModal"
 
+let leftDrawerLocked = false;
+let rightDrawerLocked = true;
+
 const AppStack = createStackNavigator({
   Notes: {screen: Notes},
   Compose: {screen: Compose},
   NoteOptions: {screen : NoteOptions},
 }, {
-  initialRouteName: 'Notes'
+  initialRouteName: 'Notes',
+})
+
+AppStack.navigationOptions = ({ navigation }) => {
+  return {drawerLockMode: rightDrawerLocked ? "locked-closed" : null}
+};
+
+const AppDrawerStack = createDrawerNavigator({
+  Main: AppStack
+}, {
+  contentComponent: SideMenu,
+  drawerPosition: "right",
+  drawerType: 'slide',
+  getCustomActionCreators: (route, stateKey) => {
+    return {
+      openRightDrawer: () => DrawerActions.openDrawer({ key: stateKey }),
+      closeRightDrawer: () => DrawerActions.closeDrawer({ key: stateKey }),
+      lockRightDrawer: (lock) => {
+        // this is the key part
+        rightDrawerLocked = lock;
+        // We have to return something
+        return NavigationActions.setParams({params: { dummy: true }, key: route.key})
+      }
+    };
+  },
 })
 
 const SettingsStack = createStackNavigator({
@@ -35,19 +62,38 @@ const InputModalStack = createStackNavigator({
   Screen1: InputModal
 })
 
-const ModalStack = createStackNavigator({
-  Home: AppStack,
+const AppDrawer = createStackNavigator({
+  Home: AppDrawerStack,
   Settings: SettingsStack,
   NewTag: InputModalStack
 }, {
   mode: "modal",
   headerMode: 'none',
 })
 
+AppDrawer.navigationOptions = ({ navigation }) => {
+  return {drawerLockMode: leftDrawerLocked ? "locked-closed" : null}
+};
+
+
 const DrawerStack = createDrawerNavigator({
-  Main: ModalStack
+  Main: AppDrawer,
 }, {
   contentComponent: SideMenu,
+  drawerPosition: "left",
+  drawerType: 'slide',
+  getCustomActionCreators: (route, stateKey) => {
+    return {
+      openLeftDrawer: () => DrawerActions.openDrawer({ key: stateKey }),
+      closeLeftDrawer: () => DrawerActions.closeDrawer({ key: stateKey }),
+      lockLeftDrawer: (lock) => {
+        // this is the key part
+        leftDrawerLocked = lock;
+        // We have to return something
+        return NavigationActions.setParams({params: { dummy: true }, key: route.key})
+      }
+    };
+  },
 });
 
 const AppContainer = createAppContainer(DrawerStack);

src/screens/Abstract.js

@@ -24,8 +24,7 @@ export default class Abstract extends Component {
       headerStyle: {
         backgroundColor: StyleKit.variable("stylekitBackgroundColor")
       },
-      headerTintColor: StyleKit.variable("stylekitInfoColor"),
-      drawerLockMode: navigation.getParam("drawerLockMode") || templateOptions.drawerLockMode
+      headerTintColor: StyleKit.variable("stylekitInfoColor")
     }
 
     let headerLeft, headerRight;
@@ -88,7 +87,11 @@ export default class Abstract extends Component {
   componentWillUnmount() {
     this.willUnmount = true;
     this.mounted = false;
+    for(var listener of this.listeners) {
+      listener.remove();
+    }
     ApplicationState.get().removeStateObserver(this._stateObserver);
+    this.componentDidBlur(); // This is not called automatically when the component unmounts. https://github.com/react-navigation/react-navigation/issues/4003
   }
 
   componentDidMount() {
@@ -113,12 +116,6 @@ export default class Abstract extends Component {
     this.configureNavBar(true);
   }
 
-  componentWillUnmount() {
-    for(var listener of this.listeners) {
-      listener.remove();
-    }
-  }
-
   componentWillFocus() {
     this.willUnmount = false;
     this.mounted = false;
@@ -133,11 +130,11 @@ export default class Abstract extends Component {
     this.configureNavBar(false);
   }
 
-  componentWillBlur(){
+  componentWillBlur() {
 
   }
 
-  componentDidBlur(){
+  componentDidBlur() {
     this.willBeVisible = false;
     this.visible = false;
   }

src/screens/Compose.js

@@ -33,7 +33,8 @@ export default class Compose extends Abstract {
     let templateOptions = {
       title: "Compose",
       rightButton: {
-        title: "Options"
+        title: null,
+        iconName: "ios-menu-outline",
       }
     }
     return Abstract.getDefaultNavigationOptions({navigation, navigationOptions, templateOptions});
@@ -89,10 +90,12 @@ export default class Compose extends Abstract {
   configureHeaderBar() {
     this.props.navigation.setParams({
       title: 'Compose',
-      drawerLockMode: "locked-closed",
       rightButton: {
-        title: "Options",
-        onPress: () => {this.presentOptions();},
+        title: null,
+        iconName: "ios-menu-outline",
+        onPress: () => {
+          this.props.navigation.openRightDrawer();
+        },
         disabled: !this.note.uuid
       }
     })
@@ -126,6 +129,9 @@ export default class Compose extends Abstract {
   componentDidFocus() {
     super.componentDidFocus();
 
+    this.props.navigation.lockLeftDrawer(true);
+    this.props.navigation.lockRightDrawer(false);
+
     if(this.note.dummy) {
       if(this.refs.input) {
         this.refs.input.focus();
@@ -139,6 +145,12 @@ export default class Compose extends Abstract {
     }
   }
 
+  componentDidBlur() {
+    super.componentDidBlur();
+    this.props.navigation.lockLeftDrawer(false);
+    this.props.navigation.lockRightDrawer(true);
+  }
+
   presentOptions() {
     if(ApplicationState.isAndroid && this.input) {
       this.input.blur();

src/screens/Notes.js

@@ -24,14 +24,8 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import FAB from 'react-native-fab';
 import HeaderButtons, { HeaderButton, Item } from 'react-navigation-header-buttons';
 
-const IoniconsHeaderButton = passMeFurther => (
-  // the `passMeFurther` variable here contains props from <Item .../> as well as <HeaderButtons ... />
-  // and it is important to pass those props to `HeaderButton`
-  // then you may add some information like icon size or color (if you use icons)
-  <HeaderButton {...passMeFurther} IconComponent={Icon} iconSize={30} color={StyleKit.variable("stylekitInfoColor")} />
-);
-
 export default class Notes extends Abstract {
+
   constructor(props) {
     super(props);
 
@@ -43,7 +37,7 @@ export default class Notes extends Abstract {
         title: null,
         iconName: "ios-menu-outline",
         onPress: () => {
-          this.openDrawer();
+          this.props.navigation.openLeftDrawer();
         }
       }
     })
@@ -90,7 +84,6 @@ export default class Notes extends Abstract {
 
   componentDidMount() {
     super.componentDidMount();
-    this.props.navigation.setParams({ toggleDrawer: this.toggleDrawer });
   }
 
   componentWillUnmount() {
@@ -116,7 +109,7 @@ export default class Notes extends Abstract {
 
   registerObservers() {
     this.optionsObserver = this.options.addChangeObserver((options, eventType) => {
-      this.closeDrawer();
+      this.props.navigation.closeLeftDrawer();
       // should only show for non-search term change
       if(eventType !== OptionsState.OptionsStateChangeEventSearch) {
         this.setTitle(null, "Loading...");
@@ -311,18 +304,6 @@ export default class Notes extends Abstract {
     });
   }
 
-  toggleDrawer = () => {
-    this.props.navigation.toggleDrawer();
-  }
-
-  openDrawer = () => {
-    this.props.navigation.openDrawer();
-  }
-
-  closeDrawer = () => {
-    this.props.navigation.closeDrawer();
-  }
-
   presentFilterScreen() {
     Navigation.showModal({
       stack: {