Mobile: Moved tags to separate screen to avoid slow down when having many tags

ReactNativeClient/lib/components/screens/tags.js

@@ -0,0 +1,130 @@
+const React = require('react'); const Component = React.Component;
+const { AppState, View, Button, Text, FlatList, StyleSheet, TouchableOpacity } = require('react-native');
+const { stateUtils } = require('lib/reducer.js');
+const { connect } = require('react-redux');
+const { reg } = require('lib/registry.js');
+const { NoteList } = require('lib/components/note-list.js');
+const Folder = require('lib/models/Folder.js');
+const Tag = require('lib/models/Tag.js');
+const Note = require('lib/models/Note.js');
+const Setting = require('lib/models/Setting.js');
+const { themeStyle } = require('lib/components/global-style.js');
+const { ScreenHeader } = require('lib/components/screen-header.js');
+const { MenuOption } = require('react-native-popup-menu');
+const { _ } = require('lib/locale.js');
+const { ActionButton } = require('lib/components/action-button.js');
+const { dialogs } = require('lib/dialogs.js');
+const DialogBox = require('react-native-dialogbox').default;
+const { BaseScreenComponent } = require('lib/components/base-screen.js');
+
+class TagsScreenComponent extends BaseScreenComponent {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	constructor() {
+		super();
+
+		this.state = {
+			tags: [],
+		};
+
+		this.tagList_renderItem = this.tagList_renderItem.bind(this);
+		this.tagList_keyExtractor = this.tagList_keyExtractor.bind(this);
+		this.tagItem_press = this.tagItem_press.bind(this);
+	}
+
+	styles() {
+		if (this.styles_) return this.styles_;
+
+		const theme = themeStyle(this.props.theme);
+
+		this.styles_ = StyleSheet.create({
+			listItem: {
+				flexDirection: 'row',
+				borderBottomWidth: 1,
+				borderBottomColor: theme.dividerColor,
+				alignItems: 'flex-start',
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				paddingTop: theme.itemMarginTop,
+				paddingBottom: theme.itemMarginBottom,
+			},
+			listItemText: {
+				flex: 1,
+				color: theme.color,
+				fontSize: theme.fontSize,
+			},
+		});
+
+		return this.styles_;
+	}
+
+	tagItem_press(event) {
+		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+		this.props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Notes',
+			tagId: event.id,
+		});
+	}
+
+	tagList_renderItem(event) {
+		const tag = event.item;
+		return (
+			<TouchableOpacity onPress={() => { this.tagItem_press({ id: tag.id }) }}>
+				<View style={ this.styles().listItem }>
+					<Text style={this.styles().listItemText}>{tag.title}</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+
+	tagList_keyExtractor(item, index) {
+		return item.id;
+	}
+
+	async componentDidMount() {
+		const tags = await Tag.allWithNotes();
+		tags.sort((a, b) => {
+			return a.title.toLowerCase() < b.title.toLowerCase() ? -1 : +1;
+		});
+		this.setState({ tags: tags });
+	}
+
+	render() {
+		const theme = themeStyle(this.props.theme);
+
+		let rootStyle = {
+			flex: 1,
+			backgroundColor: theme.backgroundColor,
+		}
+
+		return (
+			<View style={rootStyle}>
+				<ScreenHeader
+					title={_('Tags')}
+					parentComponent={this}
+					showSearchButton={false}
+				/>
+				<FlatList style={{flex:1}}
+					data={this.state.tags}
+					renderItem={this.tagList_renderItem}
+					keyExtractor={this.tagList_keyExtractor}
+				/>
+			</View>
+		);
+	}
+}
+
+const TagsScreen = connect(
+	(state) => {
+		return {
+			theme: state.settings.theme,
+		};
+	}
+)(TagsScreenComponent)
+
+module.exports = { TagsScreen };

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

@@ -21,6 +21,8 @@ class SideMenuContentComponent extends Component {
 			//width: 0,
 		};
 		this.styles_ = {};
+
+		this.tagButton_press = this.tagButton_press.bind(this);
 	}
 
 	styles() {
@@ -54,11 +56,6 @@ class SideMenuContentComponent extends Component {
 				color: theme.colorFaded,
 				fontSize: theme.fontSizeSmaller,
 			},
-			tagItemList: {
-				flex: 1,
-				flexDirection: 'row',
-				flexWrap: 'wrap'
-			},
 		};
 
 		styles.folderButton = Object.assign({}, styles.button);
@@ -70,15 +67,8 @@ class SideMenuContentComponent extends Component {
 		styles.folderIcon.color = theme.colorFaded;//'#0072d5';
 		styles.folderIcon.paddingTop = 3;
 
-		styles.tagButton = Object.assign({}, styles.button);
-		styles.tagButtonSelected = Object.assign({}, styles.tagButton);
-		styles.tagButtonSelected.backgroundColor = theme.selectedColor;
-		styles.tagButtonSelected.borderRadius = 1000;
-		styles.tagButtonText = Object.assign({}, styles.buttonText);
-		styles.tagButtonText.flex = 0;
-
-		styles.syncButton = Object.assign({}, styles.button);
-		styles.syncButtonText = Object.assign({}, styles.buttonText);
+		styles.sideButton = Object.assign({}, styles.button);
+		styles.sideButtonText = Object.assign({}, styles.buttonText);
 
 		this.styles_[this.props.theme] = StyleSheet.create(styles);
 		return this.styles_[this.props.theme];
@@ -101,13 +91,12 @@ class SideMenuContentComponent extends Component {
 		});
 	}
 
-	tag_press(tag) {
+	tagButton_press() {
 		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
 
 		this.props.dispatch({
 			type: 'NAV_GO',
-			routeName: 'Notes',
-			tagId: tag.id,
+			routeName: 'Tags',
 		});
 	}
 
@@ -154,20 +143,6 @@ class SideMenuContentComponent extends Component {
 		);
 	}
 
-	tagItem(tag, selected) {
-		const iconComp = <Icon name='md-pricetag' style={this.styles().folderIcon} />
-		const tagButtonStyle = selected ? this.styles().tagButtonSelected : this.styles().tagButton;
-
-		return (
-			<TouchableOpacity key={tag.id} onPress={() => { this.tag_press(tag) }}>
-				<View style={tagButtonStyle}>
-					{ iconComp }
-					<Text numberOfLines={1} style={this.styles().tagButtonText}>{Tag.displayTitle(tag)}</Text>
-				</View>
-			</TouchableOpacity>
-		);
-	}
-
 	synchronizeButton(state) {
 		const theme = themeStyle(this.props.theme);
 		
@@ -176,9 +151,22 @@ class SideMenuContentComponent extends Component {
 
 		return (
 			<TouchableOpacity key={'synchronize_button'} onPress={() => { this.synchronize_press() }}>
-				<View style={this.styles().syncButton}>
+				<View style={this.styles().sideButton}>
 					{ iconComp }
-					<Text style={this.styles().syncButtonText}>{title}</Text>
+					<Text style={this.styles().sideButtonText}>{title}</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+
+	tagButton() {
+		const theme = themeStyle(this.props.theme);
+
+		return (
+			<TouchableOpacity key={'tag_button'} onPress={this.tagButton_press}>
+				<View style={this.styles().sideButton}>
+					<Icon name='md-pricetag' style={theme.icon} />
+					<Text style={this.styles().sideButtonText}>Tags</Text>
 				</View>
 			</TouchableOpacity>
 		);
@@ -201,21 +189,13 @@ class SideMenuContentComponent extends Component {
 			const result = shared.renderFolders(this.props, this.folderItem.bind(this));
 			const folderItems = result.items;
 			items = items.concat(folderItems);
-			if (items.length) items.push(this.makeDivider('divider_1'));
 		}
 
-		if (this.props.tags.length) {
-			const result = shared.renderTags(this.props, this.tagItem.bind(this));
-			const tagItems = result.items;
+		items.push(this.makeDivider('divider_1'));
+		
+		items.push(this.tagButton());
 
-			items.push(
-				<View style={this.styles().tagItemList} key="tag_items">
-					{tagItems}
-				</View>
-			);
-
-			if (tagItems.length) items.push(this.makeDivider('divider_2'));
-		}
+		items.push(this.makeDivider('divider_tag_bottom'));
 
 		let lines = Synchronizer.reportToLines(this.props.syncReport);
 		const syncReportText = lines.join("\n");
@@ -267,7 +247,6 @@ const SideMenuContent = connect(
 	(state) => {
 		return {
 			folders: state.folders,
-			tags: state.tags,
 			syncStarted: state.syncStarted,
 			syncReport: state.syncReport,
 			selectedFolderId: state.selectedFolderId,
@@ -275,7 +254,8 @@ const SideMenuContent = connect(
 			notesParentType: state.notesParentType,
 			locale: state.settings.locale,
 			theme: state.settings.theme,
-			opacity: state.sideMenuOpenPercent,
+			// Don't do the opacity animation as it means re-rendering the list multiple times
+			// opacity: state.sideMenuOpenPercent,
 			collapsedFolderIds: state.collapsedFolderIds,
 			decryptionWorker: state.decryptionWorker,
 			resourceFetcher: state.resourceFetcher,

ReactNativeClient/root.js

@@ -28,6 +28,7 @@ const ResourceService = require('lib/services/ResourceService');
 const { JoplinDatabase } = require('lib/joplin-database.js');
 const { Database } = require('lib/database.js');
 const { NotesScreen } = require('lib/components/screens/notes.js');
+const { TagsScreen } = require('lib/components/screens/tags.js');
 const { NoteScreen } = require('lib/components/screens/note.js');
 const { ConfigScreen } = require('lib/components/screens/config.js');
 const { FolderScreen } = require('lib/components/screens/folder.js');
@@ -656,6 +657,7 @@ class AppComponent extends React.Component {
 			Welcome: { screen: WelcomeScreen },
 			Notes: { screen: NotesScreen },
 			Note: { screen: NoteScreen },
+			Tags: { screen: TagsScreen },
 			Folder: { screen: FolderScreen },
 			OneDriveLogin: { screen: OneDriveLoginScreen },
 			DropboxLogin: { screen: DropboxLoginScreen },