Preserve scroll position of Search screen

ReactNativeClient/lib/components/app-nav.js

@@ -1,40 +1,48 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import { NotesScreen } from 'lib/components/screens/notes.js';
+import { SearchScreen } from 'lib/components/screens/search.js';
 import { View } from 'react-native';
 import { _ } from 'lib/locale.js';
 
 class AppNavComponent extends Component {
 
+	constructor() {
+		super();
+		this.previousRouteName_ = null;
+	}
+
 	render() {
-		// if (!this.props.route) throw new Error('Route must not be null');
-
-		// let route = this.props.route;
-		// let Screen = null;
-		// Screen = this.props.screens[route.routeName].screen;
-
-		// return (
-		// 	<View style={{ flex: 1 }}>
-		// 		<Screen navigation={{ state: route }} />
-		// 	</View>
-		// );
-
 		if (!this.props.route) throw new Error('Route must not be null');
 
+		// Note: certain screens are kept into memory, in particular Notes and Search
+		// so that the scroll position is not lost when the user navigate away from them.
+
 		let route = this.props.route;
 		let Screen = null;
 		let notesScreenVisible = false;
+		let searchScreenVisible = false;
 
 		if (route.routeName == 'Notes') {
 			notesScreenVisible = true;
+		} else if (route.routeName == 'Search') {
+			searchScreenVisible = true;
 		} else {
 			Screen = this.props.screens[route.routeName].screen;
 		}
 
+		// Keep the search screen loaded if the user is viewing a note from that search screen
+		// so that if the back button is pressed, the screen is still loaded. However, unload
+		// it if navigating away.
+		let searchScreenLoaded = searchScreenVisible || (this.previousRouteName_ == 'Search' && route.routeName == 'Note');
+
+		this.previousRouteName_ = route.routeName;
+
 		return (
 			<View style={{ flex: 1 }}>
 				<NotesScreen visible={notesScreenVisible} navigation={{ state: route }} />
-				{ !notesScreenVisible && <Screen navigation={{ state: route }} /> }
+				{ searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} /> }
+				{ (!notesScreenVisible && !searchScreenVisible) && <Screen navigation={{ state: route }} /> }
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/notes.js

@@ -133,7 +133,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 		let title = parent ? parent.title : null;
 		const addFolderNoteButtons = this.props.selectedFolderId && this.props.selectedFolderId != Folder.conflictFolderId();
 
-		const theme = themeStyle(Setting.value('theme'));
+		const theme = themeStyle(this.props.theme);
 
 		let rootStyle = {
 			flex: 1,
@@ -144,7 +144,6 @@ class NotesScreenComponent extends BaseScreenComponent {
 			rootStyle.flex = 0.001; // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it
 		}
 
-		const { navigate } = this.props.navigation;
 		return (
 			<View style={rootStyle}>
 				<ScreenHeader title={title} menuOptions={this.menuOptions()} />

ReactNativeClient/lib/components/screens/search.js

@@ -96,6 +96,8 @@ class SearchScreenComponent extends BaseScreenComponent {
 	}
 
 	async refreshSearch(query = null) {
+		if (!this.props.visible) return;
+
 		query = query === null ? this.state.query.trim : query.trim();
 
 		let notes = []
@@ -126,14 +128,25 @@ class SearchScreenComponent extends BaseScreenComponent {
 	render() {
 		if (!this.isMounted_) return null;
 
+		const theme = themeStyle(this.props.theme);
+
+		let rootStyle = {
+			flex: 1,
+			backgroundColor: theme.backgroundColor,
+		}
+
+		if (!this.props.visible) {
+			rootStyle.flex = 0.001; // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it
+		}
+
 		return (
-			<View style={this.rootStyle(this.props.theme).root}>
+			<View style={rootStyle}>
 				<ScreenHeader title={_('Search')}/>
 				<View style={this.styles().body}>
 					<View style={this.styles().searchContainer}>
 						<TextInput
 							style={this.styles().searchTextInput}
-							autoFocus={true}
+							autoFocus={this.props.visible}
 							underlineColorAndroid="#ffffff00" 
 							onSubmitEditing={() => { this.searchTextInput_submit() }}
 							onChangeText={(text) => this.searchTextInput_changeText(text) }