implemented own navigator

ReactNativeClient/lib/components/app-nav.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import { View } from 'react-native';
+import { _ } from 'lib/locale.js';
+
+class AppNavComponent extends Component {
+
+	constructor() {
+		super();
+		this.screenCache_ = [];
+	}
+
+	render() {
+		if (!this.props.route) throw new Error('Route must not be null');
+
+		let route = this.props.route;
+		let Screen = this.props.screens[route.routeName].screen;
+
+		return (
+			<View style={{flex:1}}>
+				<Screen style={{backgroundColor: '#f00'}} navigation={{ state: route }} />
+			</View>
+		);
+	}
+
+}
+
+const AppNav = connect(
+	(state) => {
+		return {
+			route: state.route,
+		};
+	}
+)(AppNavComponent)
+
+export { AppNav };

ReactNativeClient/lib/components/base-screen.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { StyleSheet } from 'react-native';
+
+const styles_ = StyleSheet.create({
+	screen: {
+		flex: 1,
+		backgroundColor: "#E9E9E9",
+	},
+});
+
+class BaseScreenComponent extends React.Component {
+
+	styles() {
+		return styles_;
+	}
+
+}
+
+export { BaseScreenComponent };

ReactNativeClient/lib/components/screens/folder.js

@@ -6,8 +6,9 @@ import { Folder } from 'lib/models/folder.js'
 import { BaseModel } from 'lib/base-model.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class FolderScreenComponent extends React.Component {
+class FolderScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -57,7 +58,7 @@ class FolderScreenComponent extends React.Component {
 
 	render() {
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<TextInput value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
 				<Button title="Save folder" onPress={() => this.saveFolderButton_press()} />

ReactNativeClient/lib/components/screens/folders.js

@@ -6,8 +6,9 @@ import { FolderList } from 'lib/components/folder-list.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { _ } from 'lib/locale.js';
 import { ActionButton } from 'lib/components/action-button.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class FoldersScreenComponent extends React.Component {
+class FoldersScreenComponent extends BaseScreenComponent {
 
 	static navigationOptions(options) {
 		return { header: null };
@@ -15,7 +16,7 @@ class FoldersScreenComponent extends React.Component {
 
 	render() {
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<FolderList noItemMessage={_('There is currently no notebook. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
 				<ActionButton addFolderNoteButtons={true}></ActionButton>

ReactNativeClient/lib/components/screens/log.js

@@ -6,8 +6,9 @@ import { reg } from 'lib/registry.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { time } from 'lib/time-utils'
 import { Logger } from 'lib/logger.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class LogScreenComponent extends React.Component {
+class LogScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -54,7 +55,7 @@ class LogScreenComponent extends React.Component {
 
 		// `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<ListView
 					dataSource={this.state.dataSource}

ReactNativeClient/lib/components/screens/note.js

@@ -10,6 +10,7 @@ import { ScreenHeader } from 'lib/components/screen-header.js';
 import { Checkbox } from 'lib/components/checkbox.js'
 import { _ } from 'lib/locale.js';
 import marked from 'lib/marked.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
 const styles = StyleSheet.create({
 	webView: {
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
 	},
 });
 
-class NoteScreenComponent extends React.Component {
+class NoteScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -231,7 +232,7 @@ class NoteScreenComponent extends React.Component {
 		const actionButtonComp = renderActionButton();
 
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} title={title} />
 				<View style={{ flexDirection: 'row' }}>
 					{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} /> }<TextInput style={{flex:1}} value={note.title} onChangeText={(text) => this.title_changeText(text)} />

ReactNativeClient/lib/components/screens/notes.js

@@ -11,8 +11,9 @@ import { ActionButton } from 'lib/components/action-button.js';
 import { dialogs } from 'lib/dialogs.js';
 import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
 import DialogBox from 'react-native-dialogbox';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class NotesScreenComponent extends React.Component {
+class NotesScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -52,7 +53,7 @@ class NotesScreenComponent extends React.Component {
 
 		const { navigate } = this.props.navigation;
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
 				<NoteList noItemMessage={_('There are currently no notes. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
 				<ActionButton addFolderNoteButtons={true} parentFolderId={this.props.selectedFolderId}></ActionButton>

ReactNativeClient/lib/components/screens/onedrive-login.js

@@ -7,8 +7,9 @@ import { Setting } from 'lib/models/setting.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { reg } from 'lib/registry.js';
 import { _ } from 'lib/locale.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class OneDriveLoginScreenComponent extends React.Component {
+class OneDriveLoginScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -85,7 +86,7 @@ class OneDriveLoginScreenComponent extends React.Component {
 		}
 
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<WebView
 					source={source}

ReactNativeClient/lib/components/screens/status.js

@@ -10,8 +10,9 @@ import { BaseItem } from 'lib/models/base-item.js';
 import { Folder } from 'lib/models/folder.js';
 import { ReportService } from 'lib/services/report.js';
 import { _ } from 'lib/locale.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 
-class StatusScreenComponent extends React.Component {
+class StatusScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -65,7 +66,7 @@ class StatusScreenComponent extends React.Component {
 		let body = renderBody(this.state.report);
 
 		return (
-			<View style={{flex: 1}}>
+			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<View style={{flex: 1}}>
 					{ body }

ReactNativeClient/lib/components/screens/welcome.js

@@ -4,9 +4,10 @@ import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { ActionButton } from 'lib/components/action-button.js';
+import { BaseScreenComponent } from 'lib/components/base-screen.js';
 import { _ } from 'lib/locale.js';
 
-class WelcomeScreenComponent extends React.Component {
+class WelcomeScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
 		return { header: null };
@@ -23,7 +24,7 @@ class WelcomeScreenComponent extends React.Component {
 			let message = this.props.folders.length ? _('Click on the (+) button to create a new note or notebook. Click on the side menu to access your existing notebooks.') : _('You currently have no notebook. Create one by clicking on (+) button.');
 
 			return (
-				<View style={{flex: 1}}>
+				<View style={this.styles().screen} >
 					<ScreenHeader navState={this.props.navigation.state}/>
 					<Text>{message}</Text>
 					<ActionButton addFolderNoteButtons={true}/>

ReactNativeClient/lib/components/side-menu-content.js

@@ -16,8 +16,6 @@ const {
 } = require('react-native');
 const { Component } = React;
 
-const window = Dimensions.get('window');
-
 const styles = StyleSheet.create({
 	menu: {
 		flex: 1,

ReactNativeClient/lib/components/style.js

@@ -0,0 +1,7 @@
+const styles = StyleSheet.create({
+	webView: {
+		fontSize: 10,
+	},
+});
+
+export { styles }

ReactNativeClient/package.json

@@ -22,7 +22,6 @@
     "react-native-side-menu": "^0.20.1",
     "react-native-sqlite-storage": "3.3.*",
     "react-native-vector-icons": "^2.0.3",
-    "react-navigation": "^1.0.0-beta.9",
     "react-redux": "4.4.8",
     "redux": "3.6.0",
     "uuid": "^3.0.1"

ReactNativeClient/root.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import { BackHandler, Keyboard } from 'react-native';
 import { connect, Provider } from 'react-redux'
 import { createStore } from 'redux';
-import { StackNavigator, addNavigationHelpers } from 'react-navigation';
 import { shimInit } from 'lib/shim-init-react.js';
 import { Log } from 'lib/log.js'
+import { AppNav } from 'lib/components/app-nav.js'
 import { Logger } from 'lib/logger.js'
 import { Note } from 'lib/models/note.js'
 import { Folder } from 'lib/models/folder.js'
@@ -52,6 +52,8 @@ const initialRoute = {
 	params: {}
 };
 
+defaultState.route = initialRoute;
+
 let navHistory = [];
 navHistory.push(initialRoute);
 
@@ -73,8 +75,7 @@ const reducer = (state = defaultState, action) => {
 
 		case 'Navigation/NAVIGATE':
 
-			const r = state.nav.routes;
+			const currentRoute = state.route;
-			const currentRoute = r.length ? r[r.length - 1] : null;
 			const currentRouteName = currentRoute ? currentRoute.routeName : '';
 
 			reg.logger().info('Route: ' + currentRouteName + ' => ' + action.routeName);
@@ -93,27 +94,15 @@ const reducer = (state = defaultState, action) => {
 				newState.selectedItemType = action.itemType;
 			}
 
-			if ('screens' in action) {
-				for (let n in action.screens) {
-					if (!action.screens.hasOwnProperty(n)) continue;
-					newState.screens[n] = action.screens[n];
-				}
-			}
-
 			if (currentRouteName == action.routeName) {
 				// If the current screen is already the requested screen, don't do anything
 			} else {
-				const nextStateNav = AppNavigator.router.getStateForAction(action, state.nav);
+				newState.route = action;
-				if (nextStateNav) {
+				navHistory.push(action);
-					newState.nav = nextStateNav;
-					navHistory.push(action);
-				}
 			}
 
 			newState.historyCanGoBack = navHistory.length >= 2;
 
-			console.info(navHistory);
-
 			Keyboard.dismiss(); // TODO: should probably be in some middleware
 			break;
 
@@ -217,16 +206,6 @@ const reducer = (state = defaultState, action) => {
 
 let store = createStore(reducer);
 
-const AppNavigator = StackNavigator({
-	Notes: { screen: NotesScreen },
-	Note: { screen: NoteScreen },
-	Folder: { screen: FolderScreen },
-	Welcome: { screen: WelcomeScreen },
-	OneDriveLogin: { screen: OneDriveLoginScreen },
-	Log: { screen: LogScreen },
-	Status: { screen: StatusScreen },
-});
-
 let initializationState_ = 'waiting';
 
 async function initialize(dispatch, backButtonHandler) {
@@ -337,24 +316,28 @@ class AppComponent extends React.Component {
 	render() {
 		const sideMenuContent = <SideMenuContent/>;
 
+		const appNavInit = {
+			Welcome: { screen: WelcomeScreen },
+			Notes: { screen: NotesScreen },
+			Note: { screen: NoteScreen },
+			Folder: { screen: FolderScreen },
+			OneDriveLogin: { screen: OneDriveLoginScreen },
+			Log: { screen: LogScreen },
+			Status: { screen: StatusScreen },
+		};
+
 		return (
 			<SideMenu menu={sideMenuContent} onChange={(isOpen) => this.sideMenu_change(isOpen)}>
 				<MenuContext style={{ flex: 1 }}>
-					<AppNavigator navigation={addNavigationHelpers({
+					<AppNav screens={appNavInit} />
-						dispatch: this.props.dispatch,
-						state: this.props.nav,
-					})} />
 				</MenuContext>
 			</SideMenu>
 		);
 	}
 }
 
-defaultState.nav = AppNavigator.router.getStateForAction(initialRoute);
-
 const mapStateToProps = (state) => {
 	return {
-  		nav: state.nav,
   		historyCanGoBack: state.historyCanGoBack,
   		showSideMenu: state.showSideMenu,
   	};
@@ -366,7 +349,7 @@ class Root extends React.Component {
 	render() {
 		return (
 			<Provider store={store}>
-				<App />
+				<App/>
 			</Provider>
 		);
 	}