Switched to custom header

ReactNativeClient/src/components/base-screen.js

@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+import { Log } from 'src/log.js'
+
+class BaseScreenComponent extends React.Component {
+
+}
+
+export { BaseScreenComponent };

ReactNativeClient/src/components/screen-header.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import { View, Text, Button } from 'react-native';
+import { Log } from 'src/log.js';
+import { _ } from 'src/locale.js';
+
+class ScreenHeaderComponent extends Component {
+
+	showBackButton() {
+		// Note: this is hardcoded for now because navigation.state doesn't tell whether
+		// it's possible to go back or not. Maybe it's possible to get this information
+		// from somewhere else.
+		return this.props.navState.routeName != 'Folders';
+	}
+
+	backButton_press = () => {
+		this.props.dispatch({ type: 'Navigation/BACK' });
+	}
+
+	render() {
+		return (
+			<View style={{ flexDirection: 'row', padding: 10, backgroundColor: '#ffffff', alignItems: 'center' }} >
+				<Button disabled={!this.showBackButton()} title="<" onPress={this.backButton_press}></Button>
+				<Text style={{ marginLeft: 10 }} >{_(this.props.navState.routeName)}</Text>
+			</View>
+		);
+	}
+
+}
+
+const ScreenHeader = connect(
+	(state) => {
+		return {};
+	}
+)(ScreenHeaderComponent)
+
+export { ScreenHeader };

ReactNativeClient/src/components/screens/folder.js

@@ -3,12 +3,13 @@ import { View, Button, TextInput } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { Folder } from 'src/models/folder.js'
+import { ScreenHeader } from 'src/components/screen-header.js';
 
 class FolderScreenComponent extends React.Component {
 	
-	static navigationOptions = {
+	static navigationOptions = (options) => {
-		title: 'Folder',
+		return { header: null };
-	};
+	}
 
 	constructor() {
 		super();
@@ -45,6 +46,7 @@ class FolderScreenComponent extends React.Component {
 	render() {
 		return (
 			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
 				<TextInput value={this.state.folder.title} onChangeText={this.title_changeText} />
 				<Button title="Save folder" onPress={this.saveFolderButton_press} />
 			</View>

ReactNativeClient/src/components/screens/folders.js

@@ -3,15 +3,14 @@ import { View, Button, Picker, Text } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { FolderList } from 'src/components/folder-list.js'
+import { BaseScreenComponent } from 'src/components/base-screen.js'
+import { ScreenHeader } from 'src/components/screen-header.js';
+import { _ } from 'src/locale.js';
 
 class FoldersScreenComponent extends React.Component {
-	
+
 	static navigationOptions = (options) => {
-		return { title: 'Folders' };
+		return { header: null };
-		// const nav = options.navigation;
-		// Log.info('ici', nav);
-		// //return { title: "Folders: " + nav.state.params.listMode };
-		// return { title: <Text>Folders: {nav.state.params.listMode}</Text> };
 	}
 
 	createFolderButton_press = () => {
@@ -25,6 +24,7 @@ class FoldersScreenComponent extends React.Component {
 	render() {
 		return (
 			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
 				<FolderList style={{flex: 1}}/>
 				<Button title="Create folder" onPress={this.createFolderButton_press} />
 			</View>

ReactNativeClient/src/components/screens/login.js

@@ -4,13 +4,14 @@ import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { Registry } from 'src/registry.js';
 import { Setting } from 'src/models/setting.js';
+import { ScreenHeader } from 'src/components/screen-header.js';
 import { _ } from 'src/locale.js';
 
 class LoginScreenComponent extends React.Component {
 	
-	static navigationOptions = {
+	static navigationOptions = (options) => {
-		title: 'Login',
+		return { header: null };
-	};
+	}
 
 	constructor() {
 		super();
@@ -47,6 +48,7 @@ class LoginScreenComponent extends React.Component {
 	render() {
 		return (
 			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
 				<TextInput value={this.state.email} onChangeText={this.email_changeText} keyboardType="email-address" />
 				<TextInput value={this.state.password} onChangeText={this.password_changeText} secureTextEntry={true} />
 				{ this.state.errorMessage && <Text style={{color:'#ff0000'}}>{this.state.errorMessage}</Text> }

ReactNativeClient/src/components/screens/note.js

@@ -3,12 +3,13 @@ import { View, Button, TextInput } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { Note } from 'src/models/note.js'
+import { ScreenHeader } from 'src/components/screen-header.js';
 
 class NoteScreenComponent extends React.Component {
 	
-	static navigationOptions = {
+	static navigationOptions = (options) => {
-		title: 'Note',
+		return { header: null };
-	};
+	}
 
 	constructor() {
 		super();
@@ -49,6 +50,7 @@ class NoteScreenComponent extends React.Component {
 	render() {
 		return (
 			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
 				<TextInput value={this.state.note.parent_id} />
 				<TextInput value={this.state.note.title} onChangeText={this.title_changeText} />
 				<TextInput style={{flex: 1, textAlignVertical: 'top'}} multiline={true} value={this.state.note.body} onChangeText={this.body_changeText} />

ReactNativeClient/src/components/screens/notes.js

@@ -3,12 +3,14 @@ import { View, Button, Picker } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { NoteList } from 'src/components/note-list.js'
+import { ScreenHeader } from 'src/components/screen-header.js';
+import { _ } from 'src/locale.js';
 
 class NotesScreenComponent extends React.Component {
 	
-	static navigationOptions = {
+	static navigationOptions = (options) => {
-		title: 'Notes',
+		return { header: null };
-	};
+	}
 
 	createNoteButton_press = () => {
 		this.props.dispatch({
@@ -39,6 +41,7 @@ class NotesScreenComponent extends React.Component {
 		const { navigate } = this.props.navigation;
 		return (
 			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
 				<NoteList style={{flex: 1}}/>
 				<View style={{flexDirection: 'row'}}>
 					<Button title="Create note" onPress={this.createNoteButton_press} />

ReactNativeClient/src/root.js

@@ -46,7 +46,6 @@ const reducer = (state = defaultState, action) => {
 			action.params = { listMode: 'view' };
 
 			const nextStateNav = AppNavigator.router.getStateForAction(action, state.nav);			
-			//Log.info('nextStateNavnextStateNavnextStateNavnextStateNavnextStateNav', nextStateNav);
 			newState = Object.assign({}, state);
 			if (nextStateNav) {
 				newState.nav = nextStateNav;
@@ -120,7 +119,6 @@ const reducer = (state = defaultState, action) => {
 			newState = Object.assign({}, state);
 			newState.listMode = action.listMode;
 			newState.nav = Object.assign({}, state.nav);
-			//newState.nav
 			break;
 
 	}
@@ -169,10 +167,10 @@ class AppComponent extends React.Component {
 
 	render() {
 		return (
-			<AppNavigator navigation={addNavigationHelpers({
+				<AppNavigator navigation={addNavigationHelpers({
-				dispatch: this.props.dispatch,
+					dispatch: this.props.dispatch,
-				state: this.props.nav,
+					state: this.props.nav,
-			})} />
+				})} />
 		);
 	}
 }
@@ -193,8 +191,6 @@ const App = connect(mapStateToProps)(AppComponent);
 
 class Root extends React.Component {
 	render() {
-		Log.info('TTTTTTTTTTTTTTTTTTT', defaultState.nav);
-
 		return (
 			<Provider store={store}>
 				<App />