Improve RoomsList render time

.eslintrc.js

@@ -124,7 +124,8 @@ module.exports = {
 		"prefer-const": 2,
 		"object-shorthand": 2,
 		"consistent-return": 0,
-		"global-require": "off"
+		"global-require": "off",
+		"react-native/no-unused-styles": 2
 	},
 	"globals": {
 		"__DEV__": true

android/app/build.gradle

@@ -72,6 +72,10 @@ import com.android.build.OutputFile
  * ]
  */
 
+project.ext.react = [
+    entryFile: "index.android.js"
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**
@@ -98,7 +102,7 @@ android {
         minSdkVersion 19
         targetSdkVersion 27
         versionCode VERSIONCODE as Integer
-        versionName "1"
+        versionName "1.0.1"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-	package="chat.rocket.reactnative"
-	android:versionCode="1"
-	android:versionName="1.0">
+	package="chat.rocket.reactnative">
 
 	<uses-permission android:name="android.permission.INTERNET" />
 	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

android/app/src/main/java/chat/rocket/reactnative/CustomPushNotification.java

@@ -46,10 +46,13 @@ protected Notification.Builder getNotificationBuilder(PendingIntent intent) {
             .setContentText(message)
             .setStyle(new Notification.BigTextStyle().bigText(message))
             .setPriority(Notification.PRIORITY_HIGH)
-            .setColor(mContext.getColor(R.color.notification_text))
             .setDefaults(Notification.DEFAULT_ALL)
             .setAutoCancel(true);
 
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            notification.setColor(mContext.getColor(R.color.notification_text));
+        }
+
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
             NotificationChannel channel = new NotificationChannel(CHANNEL_ID,
                                                                   CHANNEL_NAME,

android/app/src/main/java/chat/rocket/reactnative/MainApplication.java

@@ -43,7 +43,7 @@ public boolean isDebug() {
 
     @Override
     public String getJSMainModuleName() {
-        return "index";
+        return "index.android";
     }
 
     protected List<ReactPackage> getPackages() {

app/actions/actionsTypes.js

@@ -75,7 +75,8 @@ export const SELECTED_USERS = createRequestTypes('SELECTED_USERS', ['ADD_USER',
 export const NAVIGATION = createRequestTypes('NAVIGATION', ['SET']);
 export const SERVER = createRequestTypes('SERVER', [
 	...defaultTypes,
-	'SELECT',
+	'SELECT_SUCCESS',
+	'SELECT_REQUEST',
 	'CHANGED',
 	'ADD'
 ]);

app/actions/server.js

@@ -1,11 +1,19 @@
 import { SERVER } from './actionsTypes';
 
-export function selectServer(server) {
+export function selectServerRequest(server) {
 	return {
-		type: SERVER.SELECT,
+		type: SERVER.SELECT_REQUEST,
 		server
 	};
 }
+
+export function selectServerSuccess(server) {
+	return {
+		type: SERVER.SELECT_SUCCESS,
+		server
+	};
+}
+
 export function serverRequest(server) {
 	return {
 		type: SERVER.REQUEST,

app/containers/Button/index.js

@@ -13,6 +13,7 @@ const colors = {
 	textColorSecondary: COLOR_TEXT
 };
 
+/* eslint-disable react-native/no-unused-styles */
 const styles = StyleSheet.create({
 	container: {
 		paddingHorizontal: 15,

app/containers/Loading.js

@@ -66,13 +66,21 @@ export default class Loading extends React.PureComponent {
 	}
 
 	componentWillUnmount() {
-		this.opacityAnimation.stop();
-		this.scaleAnimation.stop();
+		if (this.opacityAnimation && this.opacityAnimation.stop) {
+			this.opacityAnimation.stop();
+		}
+		if (this.scaleAnimation && this.scaleAnimation.stop) {
+			this.scaleAnimation.stop();
+		}
 	}
 
 	startAnimations() {
-		this.opacityAnimation.start();
-		this.scaleAnimation.start();
+		if (this.opacityAnimation && this.opacityAnimation.start) {
+			this.opacityAnimation.start();
+		}
+		if (this.scaleAnimation && this.scaleAnimation.start) {
+			this.scaleAnimation.start();
+		}
 	}
 
 	render() {

app/containers/MessageActions.js

@@ -121,7 +121,9 @@ export default class MessageActions extends React.Component {
 			this.DELETE_INDEX = this.options.length - 1;
 		}
 		setTimeout(() => {
-			this.ActionSheet.show();
+			if (this.actionSheet && this.actionSheet.show) {
+				this.actionSheet.show();
+			}
 			Vibration.vibrate(50);
 		});
 	}
@@ -301,7 +303,7 @@ export default class MessageActions extends React.Component {
 	render() {
 		return (
 			<ActionSheet
-				ref={o => this.ActionSheet = o}
+				ref={o => this.actionSheet = o}
 				title={I18n.t('Message_actions')}
 				testID='message-actions'
 				options={this.options}

app/containers/MessageBox/FilesActions.js

@@ -27,7 +27,9 @@ export default class FilesActions extends Component {
 		this.LIBRARY_INDEX = 2;
 
 		setTimeout(() => {
-			this.ActionSheet.show();
+			if (this.actionSheet && this.actionSheet.show) {
+				this.actionSheet.show();
+			}
 		});
 	}
 
@@ -49,7 +51,7 @@ export default class FilesActions extends Component {
 	render() {
 		return (
 			<ActionSheet
-				ref={o => this.ActionSheet = o}
+				ref={o => this.actionSheet = o}
 				options={this.options}
 				cancelButtonIndex={this.CANCEL_INDEX}
 				onPress={this.handleActionPress}

app/containers/MessageBox/ReplyPreview.js

@@ -9,7 +9,6 @@ import Markdown from '../message/Markdown';
 
 const styles = StyleSheet.create({
 	container: {
-		flex: 1,
 		flexDirection: 'row'
 	},
 	messageContainer: {
@@ -35,11 +34,6 @@ const styles = StyleSheet.create({
 		lineHeight: 16,
 		marginLeft: 5
 	},
-	content: {
-		color: '#0C0D0F',
-		fontSize: 16,
-		lineHeight: 20
-	},
 	close: {
 		marginRight: 15
 	}

app/containers/MessageErrorActions.js

@@ -30,7 +30,9 @@ export default class MessageErrorActions extends React.Component {
 		this.CANCEL_INDEX = 0;
 		this.DELETE_INDEX = 1;
 		this.RESEND_INDEX = 2;
-		this.ActionSheet.show();
+		if (this.actionSheet && this.actionSheet.show) {
+			this.actionSheet.show();
+		}
 	}
 
 	handleResend = protectedFunction(() => RocketChat.resendMessage(this.props.actionMessage._id));
@@ -59,7 +61,7 @@ export default class MessageErrorActions extends React.Component {
 	render() {
 		return (
 			<ActionSheet
-				ref={o => this.ActionSheet = o}
+				ref={o => this.actionSheet = o}
 				title={I18n.t('Message_actions')}
 				options={this.options}
 				cancelButtonIndex={this.CANCEL_INDEX}

app/containers/Sidebar.js

@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ScrollView, Text, View, StyleSheet, FlatList, LayoutAnimation, AsyncStorage, SafeAreaView } from 'react-native';
+import { ScrollView, Text, View, StyleSheet, FlatList, LayoutAnimation, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import database from '../lib/realm';
-import { selectServer } from '../actions/server';
+import { selectServerRequest } from '../actions/server';
 import { logout } from '../actions/login';
-import { appStart } from '../actions';
 import Avatar from '../containers/Avatar';
 import Status from '../containers/status';
 import Touch from '../utils/touch';
@@ -19,8 +18,9 @@ import I18n from '../i18n';
 import { NavigationActions } from '../Navigation';
 
 const styles = StyleSheet.create({
-	selected: {
-		backgroundColor: 'rgba(0, 0, 0, .04)'
+	container: {
+		flex: 1,
+		backgroundColor: '#fff'
 	},
 	item: {
 		flexDirection: 'row',
@@ -31,9 +31,6 @@ const styles = StyleSheet.create({
 		width: 30,
 		alignItems: 'center'
 	},
-	itemLeftOpacity: {
-		opacity: 0.62
-	},
 	itemText: {
 		marginVertical: 16,
 		fontWeight: 'bold',
@@ -88,18 +85,16 @@ const keyExtractor = item => item.id;
 		username: state.login.user && state.login.user.username
 	}
 }), dispatch => ({
-	selectServer: server => dispatch(selectServer(server)),
-	logout: () => dispatch(logout()),
-	appStart: () => dispatch(appStart('outside'))
+	selectServerRequest: server => dispatch(selectServerRequest(server)),
+	logout: () => dispatch(logout())
 }))
 export default class Sidebar extends Component {
 	static propTypes = {
 		navigator: PropTypes.object,
 		server: PropTypes.string.isRequired,
-		selectServer: PropTypes.func.isRequired,
+		selectServerRequest: PropTypes.func.isRequired,
 		user: PropTypes.object,
-		logout: PropTypes.func.isRequired,
-		appStart: PropTypes.func
+		logout: PropTypes.func.isRequired
 	}
 
 	constructor(props) {
@@ -127,7 +122,7 @@ export default class Sidebar extends Component {
 	}
 
 	onPressItem = (item) => {
-		this.props.selectServer(item.id);
+		this.props.selectServerRequest(item.id);
 	}
 
 	setStatus = () => {
@@ -230,11 +225,7 @@ export default class Sidebar extends Component {
 				this.closeDrawer();
 				this.toggleServers();
 				if (this.props.server !== item.id) {
-					this.props.selectServer(item.id);
-					const token = await AsyncStorage.getItem(`${ RocketChat.TOKEN_KEY }-${ item.id }`);
-					if (!token) {
-						this.props.appStart();
-					}
+					this.props.selectServerRequest(item.id);
 				}
 			},
 			testID: `sidebar-${ item.id }`
@@ -314,8 +305,8 @@ export default class Sidebar extends Component {
 			return null;
 		}
 		return (
-			<ScrollView style={{ backgroundColor: '#fff' }}>
-				<SafeAreaView testID='sidebar'>
+			<ScrollView style={styles.container}>
+				<SafeAreaView testID='sidebar' style={styles.container}>
 					<Touch
 						onPress={() => this.toggleServers()}
 						underlayColor='rgba(255, 255, 255, 0.5)'
@@ -331,9 +322,9 @@ export default class Sidebar extends Component {
 							<View style={styles.headerTextContainer}>
 								<View style={styles.headerUsername}>
 									<Status style={styles.status} id={user.id} />
-									<Text>{user.username}</Text>
+									<Text numberOfLines={1}>{user.username}</Text>
 								</View>
-								<Text style={styles.currentServerText}>{server}</Text>
+								<Text style={styles.currentServerText} numberOfLines={1}>{server}</Text>
 							</View>
 							<Icon
 								name={this.state.showServers ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}

app/containers/message/Image.js

@@ -1,25 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import FastImage from 'react-native-fast-image';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
+
 import PhotoModal from './PhotoModal';
 import Markdown from './Markdown';
-
-const styles = StyleSheet.create({
-	button: {
-		flex: 1,
-		flexDirection: 'column'
-	},
-	image: {
-		width: 320,
-		height: 200
-		// resizeMode: 'cover'
-	},
-	labelContainer: {
-		alignItems: 'flex-start'
-	}
-});
+import styles from './styles';
 
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
@@ -55,7 +42,7 @@ export default class extends React.PureComponent {
 				<TouchableOpacity
 					key='image'
 					onPress={() => this._onPressButton()}
-					style={styles.button}
+					style={styles.imageContainer}
 				>
 					<FastImage
 						style={styles.image}

app/containers/message/Markdown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Platform } from 'react-native';
+import { Text, Platform, Image } from 'react-native';
 import PropTypes from 'prop-types';
 import { emojify } from 'react-emojione';
 import { connect } from 'react-redux';
@@ -66,6 +66,10 @@ export default class Markdown extends React.Component {
 						return null;
 					},
 					blocklink: () => {},
+					image: node => (
+						// TODO: should use Image component
+						<Image key={node.key} style={styles.inlineImage} source={{ uri: node.attributes.src }} />
+					),
 					...rules
 				}}
 				style={{

app/containers/message/Reply.js

@@ -17,13 +17,6 @@ const styles = StyleSheet.create({
 		marginTop: 2,
 		alignSelf: 'flex-end'
 	},
-	quoteSign: {
-		borderWidth: 2,
-		borderRadius: 4,
-		borderColor: '#a0a0a0',
-		height: '100%',
-		marginRight: 5
-	},
 	attachmentContainer: {
 		flex: 1,
 		flexDirection: 'column'

app/containers/message/Url.js

@@ -12,13 +12,6 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		marginVertical: 2
 	},
-	quoteSign: {
-		borderWidth: 2,
-		borderRadius: 4,
-		borderColor: '#a0a0a0',
-		height: '100%',
-		marginRight: 5
-	},
 	image: {
 		height: 80,
 		width: 80,