diff --git a/src/app.js b/src/app.js
index d4e8aec6..e484d1ff 100644
--- a/src/app.js
+++ b/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,8 +62,8 @@ const InputModalStack = createStackNavigator({
Screen1: InputModal
})
-const ModalStack = createStackNavigator({
- Home: AppStack,
+const AppDrawer = createStackNavigator({
+ Home: AppDrawerStack,
Settings: SettingsStack,
NewTag: InputModalStack
}, {
@@ -44,10 +71,29 @@ const ModalStack = createStackNavigator({
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);
diff --git a/src/screens/Abstract.js b/src/screens/Abstract.js
index 742eaa2b..5f8ddafd 100644
--- a/src/screens/Abstract.js
+++ b/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;
}
diff --git a/src/screens/Compose.js b/src/screens/Compose.js
index 323c523c..a30e08b9 100644
--- a/src/screens/Compose.js
+++ b/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();
diff --git a/src/screens/Notes.js b/src/screens/Notes.js
index e2a234be..e3d80e77 100644
--- a/src/screens/Notes.js
+++ b/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 as well as
- // 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)
-
-);
-
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: {