Mobile: More rendering optimisations to make animations smoother and to allow typing fast on large notes

ReactNativeClient/lib/components/screens/notes.js

@@ -1,5 +1,5 @@
 const React = require('react'); const Component = React.Component;
-const { AppState, View, Button, Text } = require('react-native');
+const { AppState, View, Button, Text, StyleSheet } = require('react-native');
 const { stateUtils } = require('lib/reducer.js');
 const { connect } = require('react-redux');
 const { reg } = require('lib/registry.js');
@@ -72,6 +72,25 @@ class NotesScreenComponent extends BaseScreenComponent {
 		}
 	}
 
+	styles() {
+		if (!this.styles_) this.styles_ = {};
+		const themeId = this.props.theme;
+		const theme = themeStyle(themeId);
+		const cacheKey = themeId;
+
+		if (this.styles_[cacheKey]) return this.styles_[cacheKey];
+		this.styles_ = {};
+
+		let styles = {
+			noteList: {
+				flex: 1,
+			},
+		};
+
+		this.styles_[cacheKey] = StyleSheet.create(styles);
+		return this.styles_[cacheKey];
+	}
+
 	async componentDidMount() {
 		await this.refreshNotes();
 		AppState.addEventListener('change', this.onAppStateChange_);
@@ -151,23 +170,6 @@ class NotesScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	menuOptions() {
-		if (this.props.notesParentType == 'Folder') {
-			if (this.props.selectedFolderId == Folder.conflictFolderId()) return [];
-
-			const folder = this.parentItem();
-			if (!folder) return [];
-
-			let output = [];
-			// if (!folder.encryption_applied) output.push({ title: _('Edit notebook'), onPress: () => { this.editFolder_onPress(this.props.selectedFolderId); } });
-			// output.push({ title: _('Delete notebook'), onPress: () => { this.deleteFolder_onPress(this.props.selectedFolderId); } });
-
-			return output;
-		} else {
-			return []; // For tags - TODO
-		}
-	}
-
 	parentItem(props = null) {
 		if (!props) props = this.props;
 
@@ -185,6 +187,18 @@ class NotesScreenComponent extends BaseScreenComponent {
 		return output;
 	}
 
+	folderPickerOptions() {
+		const options = {
+			enabled: this.props.noteSelectionEnabled,
+			mustSelect: true,
+		};
+
+		if (this.folderPickerOptions_ && options.enabled === this.folderPickerOptions_.enabled) return this.folderPickerOptions_;
+
+		this.folderPickerOptions_ = options;
+		return this.folderPickerOptions_;
+	}
+
 	render() {
 		const parent = this.parentItem();
 		const theme = themeStyle(this.props.theme);
@@ -201,7 +215,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 		if (!parent) {
 			return (
 				<View style={rootStyle}>
-					<ScreenHeader title={title} menuOptions={this.menuOptions()} />
+					<ScreenHeader title={title} />
 				</View>
 			)
 		}
@@ -216,15 +230,13 @@ class NotesScreenComponent extends BaseScreenComponent {
 				<ScreenHeader
 					title={title}
 					showBackButton={false}
-					menuOptions={this.menuOptions()}
 					parentComponent={thisComp}
 					sortButton_press={this.sortButton_press}
-					folderPickerOptions={{
-						enabled: this.props.noteSelectionEnabled,
-						mustSelect: true,
-					}}
+					folderPickerOptions={this.folderPickerOptions()}
+					showSearchButton={true}
+					showSideMenuButton={true}
 				/>
-				<NoteList style={{flex: 1}}/>
+				<NoteList style={this.styles().noteList}/>
 				{ actionButtonComp }
 				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>