[NEW] Room Loading(#372)

<!-- INSTRUCTION: Keep the line below to notify all core developers about this new PR -->
@RocketChat/ReactNative

<!-- INSTRUCTION: Inform the issue number that this PR closes, or remove the line below -->

<!-- INSTRUCTION: Tell us more about your PR with screen shots if you can -->

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": ["react-native"],
-  "plugins": ["transform-decorators-legacy"],
+  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]],
   "env": {
     "production": {
       "plugins": ["transform-remove-console"]

__tests__/__snapshots__/RoomItem.js.snap

@@ -48,9 +48,7 @@ exports[`render channel 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -88,9 +86,7 @@ exports[`render channel 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -112,8 +108,6 @@ exports[`render channel 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -131,8 +125,6 @@ exports[`render channel 1`] = `
             general
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -213,9 +205,7 @@ exports[`render no icon 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -253,9 +243,7 @@ exports[`render no icon 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -277,8 +265,6 @@ exports[`render no icon 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -296,8 +282,6 @@ exports[`render no icon 1`] = `
             name
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -378,9 +362,7 @@ exports[`render private group 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -418,9 +400,7 @@ exports[`render private group 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -442,8 +422,6 @@ exports[`render private group 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -461,8 +439,6 @@ exports[`render private group 1`] = `
             private-group
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -544,9 +520,7 @@ exports[`render unread +999 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -646,9 +620,7 @@ exports[`render unread +999 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -670,8 +642,6 @@ exports[`render unread +999 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -689,8 +659,6 @@ exports[`render unread +999 1`] = `
             name
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -718,9 +686,6 @@ exports[`render unread +999 1`] = `
           }
         >
           <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
             style={
               Object {
                 "alignItems": "center",
@@ -794,9 +759,7 @@ exports[`render unread 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -896,9 +859,7 @@ exports[`render unread 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -920,8 +881,6 @@ exports[`render unread 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -939,8 +898,6 @@ exports[`render unread 1`] = `
             name
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -968,9 +925,6 @@ exports[`render unread 1`] = `
           }
         >
           <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
             style={
               Object {
                 "alignItems": "center",
@@ -1044,9 +998,7 @@ exports[`renders correctly 1`] = `
         }
       >
         <Text
-          accessible={true}
           allowFontScaling={false}
-          ellipsizeMode="tail"
           style={
             Array [
               Object {
@@ -1146,9 +1098,7 @@ exports[`renders correctly 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -1170,8 +1120,6 @@ exports[`renders correctly 1`] = `
             
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -1189,8 +1137,6 @@ exports[`renders correctly 1`] = `
             name
           </Text>
           <Text
-            accessible={true}
-            allowFontScaling={true}
             ellipsizeMode="tail"
             numberOfLines={1}
             style={

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -21,9 +21,7 @@ exports[`Storyshots Avatar avatar 1`] = `
       }
     >
       <Text
-        accessible={true}
         allowFontScaling={false}
-        ellipsizeMode="tail"
         style={
           Array [
             Object {
@@ -95,9 +93,7 @@ exports[`Storyshots Avatar avatar 1`] = `
       }
     >
       <Text
-        accessible={true}
         allowFontScaling={false}
-        ellipsizeMode="tail"
         style={
           Array [
             Object {
@@ -169,9 +165,7 @@ exports[`Storyshots Avatar avatar 1`] = `
       }
     >
       <Text
-        accessible={true}
         allowFontScaling={false}
-        ellipsizeMode="tail"
         style={
           Array [
             Object {
@@ -243,9 +237,7 @@ exports[`Storyshots Avatar avatar 1`] = `
       }
     >
       <Text
-        accessible={true}
         allowFontScaling={false}
-        ellipsizeMode="tail"
         style={
           Array [
             Object {
@@ -352,9 +344,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -454,9 +444,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -478,8 +466,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -497,8 +483,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               rocket.cat
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -574,9 +558,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -676,9 +658,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -700,8 +680,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -721,8 +699,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               rocket.cat
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -800,9 +776,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -902,9 +876,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -926,8 +898,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -945,8 +915,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               rocket.cat
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -974,9 +942,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -1045,9 +1010,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -1147,9 +1110,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -1171,8 +1132,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1192,8 +1151,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1223,9 +1180,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -1294,9 +1248,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -1396,9 +1348,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -1420,8 +1370,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1439,8 +1387,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1468,9 +1414,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -1539,9 +1482,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -1641,9 +1582,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -1665,8 +1604,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1684,8 +1621,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1713,9 +1648,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -1784,9 +1716,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -1886,9 +1816,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -1910,8 +1838,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1929,8 +1855,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1958,9 +1882,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -2029,9 +1950,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -2131,9 +2050,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -2155,8 +2072,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2174,8 +2089,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2203,9 +2116,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
               style={
                 Object {
                   "alignItems": "center",
@@ -2274,9 +2184,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -2376,9 +2284,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -2400,8 +2306,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2419,8 +2323,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               W
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2496,9 +2398,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -2598,9 +2498,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -2622,8 +2520,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2641,8 +2537,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               WW
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2718,9 +2612,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           }
         >
           <Text
-            accessible={true}
             allowFontScaling={false}
-            ellipsizeMode="tail"
             style={
               Array [
                 Object {
@@ -2820,9 +2712,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           >
             <Text
-              accessible={true}
               allowFontScaling={false}
-              ellipsizeMode="tail"
               style={
                 Array [
                   Object {
@@ -2844,8 +2734,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -2863,8 +2751,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
               
             </Text>
             <Text
-              accessible={true}
-              allowFontScaling={true}
               ellipsizeMode="tail"
               numberOfLines={1}
               style={

android/app/build.gradle

@@ -104,6 +104,7 @@ android {
         }
         missingDimensionStrategy "RNN.reactNativeVersion", "reactNative55"
         vectorDrawables.useSupportLibrary = true
+        multiDexEnabled true
     }
 
     compileOptions {
@@ -200,8 +201,9 @@ dependencies {
     implementation 'com.android.support:customtabs:27.1.0'
     implementation 'com.android.support:design:27.1.0'
     implementation "com.facebook.react:react-native:+"  // From node_modules
-    implementation 'com.facebook.fresco:fresco:1.7.1'
-    implementation 'com.facebook.fresco:animated-gif:1.7.1'
+    implementation 'com.facebook.fresco:animated-gif:1.9.0'
+    implementation 'com.facebook.fresco:animated-webp:1.9.0'
+    implementation 'com.facebook.fresco:webpsupport:1.9.0'
     implementation('com.crashlytics.sdk.android:crashlytics:2.9.2@aar') {
         transitive = true;
     }

android/build.gradle

@@ -32,3 +32,15 @@ allprojects {
         }
     }
 }
+
+subprojects {
+    afterEvaluate {
+        android {
+            compileSdkVersion 27
+            buildToolsVersion "27.0.3"
+            defaultConfig {
+                targetSdkVersion 27
+            }
+        }
+    }
+}

app/containers/EmojiPicker/CustomEmoji.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ViewPropTypes } from 'react-native';
+import { ViewPropTypes, Image } from 'react-native';
 import PropTypes from 'prop-types';
-import FastImage from 'react-native-fast-image';
 import { connect } from 'react-redux';
 
 @connect(state => ({
@@ -19,7 +18,7 @@ export default class CustomEmoji extends React.Component {
 	render() {
 		const { baseUrl, emoji, style } = this.props;
 		return (
-			<FastImage
+			<Image
 				style={style}
 				source={{ uri: `${ baseUrl }/emoji-custom/${ encodeURIComponent(emoji.content || emoji.name) }.${ emoji.extension }` }}
 			/>

app/containers/message/Markdown.js

@@ -53,8 +53,8 @@ export default class Markdown extends React.Component {
 						</Text>
 					),
 					emoji: (node) => {
-						if (node.children && node.children.length && node.children[0].children && node.children[0].children.length) {
-							const { content } = node.children[0].children[0];
+						if (node.children && node.children.length && node.children[0].content) {
+							const { content } = node.children[0];
 							const emojiExtension = customEmojis[content];
 							if (emojiExtension) {
 								const emoji = { extension: emojiExtension, content };
@@ -64,6 +64,7 @@ export default class Markdown extends React.Component {
 						}
 						return null;
 					},
+					blocklink: () => {},
 					...rules
 				}}
 				style={{

app/containers/message/MarkdownEmojiPlugin.js

@@ -43,7 +43,7 @@ export default function(md) {
 		const { delimiters } = state;
 		const max = delimiters.length;
 
-		for (const i = 0; i < max; i++) { // eslint-disable-line
+		for (let i = 0; i < max; i += 1) {
 			startDelim = delimiters[i];
 
 			// :

app/containers/message/index.js

@@ -212,7 +212,7 @@ export default class Message extends React.Component {
 		}
 
 		return (
-			<View style={styles.flex}>
+			<View style={[styles.flex, { marginTop: 5 }]}>
 				<Avatar
 					style={styles.avatar}
 					text={item.avatar ? '' : username}
@@ -281,7 +281,6 @@ export default class Message extends React.Component {
 	renderReaction = (reaction) => {
 		const reacted = reaction.usernames.findIndex(item => item.value === this.props.user.username) !== -1;
 		const reactedContainerStyle = reacted && styles.reactedContainer;
-		const reactedCount = reacted && styles.reactedCountText;
 		return (
 			<TouchableOpacity
 				onPress={() => this.onReactionPress(reaction.emoji)}
@@ -295,7 +294,7 @@ export default class Message extends React.Component {
 						standardEmojiStyle={styles.reactionEmoji}
 						customEmojiStyle={styles.reactionCustomEmoji}
 					/>
-					<Text style={[styles.reactionCount, reactedCount]}>{ reaction.usernames.length }</Text>
+					<Text style={styles.reactionCount}>{ reaction.usernames.length }</Text>
 				</View>
 			</TouchableOpacity>
 		);
@@ -312,9 +311,9 @@ export default class Message extends React.Component {
 					onPress={() => this.props.toggleReactionPicker(this.parseMessage())}
 					key='message-add-reaction'
 					testID='message-add-reaction'
-					style={styles.reactionContainer}
+					style={[styles.reactionContainer, styles.addReactionContainer]}
 				>
-					<Icon name='insert-emoticon' color='#aaaaaa' size={15} />
+					<Icon name='insert-emoticon' color='#1D74F5' size={18} />
 				</TouchableOpacity>
 			</View>
 		);

app/containers/message/styles.js

@@ -42,43 +42,42 @@ export default StyleSheet.create({
 	reactionsContainer: {
 		flexDirection: 'row',
 		flexWrap: 'wrap',
-		marginTop: 6
+		marginTop: 10
 	},
 	reactionContainer: {
 		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
-		padding: 3,
-		borderWidth: 1,
-		borderColor: '#cccccc',
+		paddingHorizontal: 10,
+		paddingVertical: 5,
 		borderRadius: 4,
-		marginRight: 5,
-		marginBottom: 5,
-		height: 23,
-		width: 35
+		marginRight: 10,
+		marginBottom: 10,
+		maxHeight: 28,
+		backgroundColor: '#E8F2FF'
+	},
+	addReactionContainer: {
+		paddingHorizontal: 15
 	},
 	reactionCount: {
-		fontSize: 12,
-		marginLeft: 2,
+		fontSize: 14,
+		marginLeft: 3,
 		fontWeight: '600',
-		color: '#aaaaaa'
+		color: '#1D74F5'
 	},
 	reactionEmoji: {
-		fontSize: 12
+		fontSize: 14
 	},
 	reactionCustomEmoji: {
-		width: 15,
-		height: 15
+		width: 20,
+		height: 20
 	},
 	avatar: {
 		marginRight: 10
 	},
 	reactedContainer: {
-		borderColor: '#bde1fe',
-		backgroundColor: '#f3f9ff'
-	},
-	reactedCountText: {
-		color: '#4fb0fc'
+		borderWidth: 0,
+		backgroundColor: '#D1DAE6'
 	},
 	errorIcon: {
 		padding: 10,

app/lib/methods/getRooms.js

@@ -39,7 +39,7 @@ export default async function() {
 	return new Promise(async(resolve, reject) => {
 		try {
 			// eslint-disable-next-line
-			const { subscriptions, rooms } = await (false && this.ddp.status ? getRoomDpp.apply(this) : getRoomRest.apply(this));
+			const { subscriptions, rooms } = await (this.ddp.status ? getRoomDpp.apply(this) : getRoomRest.apply(this));
 
 			const data = rooms.map(room => ({ room, sub: database.objects('subscriptions').filtered('rid == $0', room._id) }));
 

app/lib/methods/helpers/normalizeMessage.js

@@ -18,9 +18,9 @@ export default (msg) => {
 	msg.reactions = msg.reactions || [];
 	// TODO: api problems
 	if (Array.isArray(msg.reactions)) {
-		msg.reactions = msg.reactions.map((value, key) => ({ teste: 1, emoji: key, usernames: value.usernames.map(username => ({ value: username })) }));
+		msg.reactions = msg.reactions.map((value, key) => ({ emoji: key, usernames: value.usernames.map(username => ({ value: username })) }));
 	} else {
-		msg.reactions = Object.keys(msg.reactions).map(key => ({ teste: 1, emoji: key, usernames: msg.reactions[key].usernames.map(username => ({ value: username })) }));
+		msg.reactions = Object.keys(msg.reactions).map(key => ({ emoji: key, usernames: msg.reactions[key].usernames.map(username => ({ value: username })) }));
 	}
 	msg.urls = msg.urls ? parseUrls(msg.urls) : [];
 	msg._updatedAt = new Date();

app/lib/methods/loadMessagesForRoom.js

@@ -37,7 +37,8 @@ export default async function loadMessagesForRoom(...args) {
 	return new Promise(async(resolve, reject) => {
 		try {
 			// eslint-disable-next-line
-			const data = (await (false && this.ddp.status ? loadMessagesForRoomDDP.call(this, ...args) : loadMessagesForRoomRest.call(this, ...args))).map(buildMessage);
+			const data = (await (this.ddp.status ? loadMessagesForRoomDDP.call(this, ...args) : loadMessagesForRoomRest.call(this, ...args))).map(buildMessage);
+
 			if (data && data.length) {
 				InteractionManager.runAfterInteractions(() => {
 					db.write(() => data.forEach(message => db.create('messages', message, true)));

app/lib/methods/loadMissedMessages.js

@@ -43,7 +43,7 @@ export default async function(...args) {
 	return new Promise(async(resolve, reject) => {
 		try {
 			// eslint-disable-next-line
-			const data = (await (false && this.ddp.status ? loadMissedMessagesDDP.call(this, ...args) : loadMissedMessagesRest.call(this, ...args)));
+			const data = (await (this.ddp.status ? loadMissedMessagesDDP.call(this, ...args) : loadMissedMessagesRest.call(this, ...args)));
 
 			if (data) {
 				data.forEach(buildMessage);

app/lib/methods/readMessages.js

@@ -20,7 +20,7 @@ export default async function readMessages(rid) {
 	const { database: db } = database;
 	try {
 		// eslint-disable-next-line
-		const data = await (false && this.ddp.status ? readMessagesDDP.call(this, rid) : readMessagesREST.call(this, rid));
+		const data = await (this.ddp.status ? readMessagesDDP.call(this, rid) : readMessagesREST.call(this, rid));
 		const [subscription] = db.objects('subscriptions').filtered('rid = $0', rid);
 		db.write(() => {
 			subscription.open = true;

app/lib/methods/sendMessage.js

@@ -46,7 +46,7 @@ function sendMessageByDDP(message) {
 export async function _sendMessageCall(message) {
 	try {
 		// eslint-disable-next-line
-		const data = await (false && this.ddp.status ? sendMessageByDDP.call(this, message) : sendMessageByRest.call(this, message));
+		const data = await (this.ddp.status ? sendMessageByDDP.call(this, message) : sendMessageByRest.call(this, message));
 		return data;
 	} catch (e) {
 		database.write(() => {

app/presentation/RoomItem.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingVertical: 12,
 		alignItems: 'center',
-		borderBottomWidth: 0.5,
+		borderBottomWidth: StyleSheet.hairlineWidth,
 		borderBottomColor: '#ddd'
 	},
 	number: {

app/views/RoomView/ListView.js

@@ -74,7 +74,7 @@ export class List extends React.Component {
 			onEndReached={() => this.props.onEndReached(this.data[this.data.length - 1])}
 			dataSource={this.dataSource}
 			renderRow={(item, previousItem) => this.props.renderRow(item, previousItem)}
-			initialListSize={20}
+			initialListSize={1}
 			pageSize={20}
 			testID='room-view-messages'
 			{...scrollPersistTaps}

app/views/RoomView/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, LayoutAnimation } from 'react-native';
+import { Text, View, LayoutAnimation, ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 import equal from 'deep-equal';
 
@@ -63,7 +63,7 @@ export default class RoomView extends LoggedView {
 		this.rid = props.rid;
 		this.rooms = database.objects('subscriptions').filtered('rid = $0', this.rid);
 		this.state = {
-			loaded: true,
+			loaded: false,
 			joined: typeof props.rid === 'undefined',
 			room: {},
 			end: false
@@ -93,6 +93,7 @@ export default class RoomView extends LoggedView {
 			side: 'left',
 			enabled: false
 		});
+		this.setState({ loaded: true });
 	}
 	shouldComponentUpdate(nextProps, nextState) {
 		return !(equal(this.props, nextProps) && equal(this.state, nextState) && this.state.room.ro === nextState.room.ro);
@@ -175,14 +176,16 @@ export default class RoomView extends LoggedView {
 	updateRoom = async() => {
 		if (this.rooms.length > 0) {
 			const { room: prevRoom } = this.state;
-			await this.setState({ room: JSON.parse(JSON.stringify(this.rooms[0])) });
+			const room = JSON.parse(JSON.stringify(this.rooms[0]));
+			this.setState({ room });
+
 			if (!prevRoom.rid) {
-				this.props.navigator.setTitle({ title: this.state.room.name });
-				await this.props.openRoom({
-					...this.state.room
+				this.props.navigator.setTitle({ title: room.name });
+				this.props.openRoom({
+					...room
 				});
-				if (this.state.room.alert || this.state.room.unread || this.state.room.userMentions) {
-					this.props.setLastOpen(this.state.room.ls);
+				if (room.alert || room.unread || room.userMentions) {
+					this.props.setLastOpen(room.ls);
 				} else {
 					this.props.setLastOpen(null);
 				}
@@ -273,9 +276,12 @@ export default class RoomView extends LoggedView {
 		}
 		return <Text style={styles.loadingMore}>{I18n.t('Loading_messages_ellipsis')}</Text>;
 	}
-	render() {
+
+	renderList = () => {
+		if (!this.state.loaded) {
+			return <ActivityIndicator style={styles.loading} />;
+		}
 		return (
-			<View style={styles.container} testID='room-view'>
 			<List
 				key='room-view-messages'
 				end={this.state.end}
@@ -284,6 +290,13 @@ export default class RoomView extends LoggedView {
 				onEndReached={this.onEndReached}
 				renderRow={this.renderItem}
 			/>
+		);
+	}
+
+	render() {
+		return (
+			<View style={styles.container} testID='room-view'>
+				{this.renderList()}
 				{this.renderFooter()}
 				{this.state.room._id && this.props.showActions ?
 					<MessageActions room={this.state.room} user={this.props.user} /> :

app/views/RoomView/styles.js

@@ -44,5 +44,8 @@ export default StyleSheet.create({
 		backgroundColor: '#F7F7F7',
 		borderRadius: 4,
 		flexDirection: 'column'
+	},
+	loading: {
+		flex: 1
 	}
 });

app/views/RoomsListView/index.js

@@ -36,8 +36,6 @@ export default class RoomsListView extends LoggedView {
 			search: [],
 			rooms: []
 		};
-		this.data = database.objects('subscriptions').filtered('archived != true && open == true').sorted('roomUpdatedAt', true);
-		this.data.addListener(this.updateState);
 		props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 	}
 
@@ -45,11 +43,13 @@ export default class RoomsListView extends LoggedView {
 		this.initDefaultHeader();
 	}
 
+	componentDidMount() {
+		this.getSubscriptions();
+	}
+
 	componentWillReceiveProps(props) {
-		if (this.props.server !== props.server) {
-			this.data.removeListener(this.updateState);
-			this.data = database.objects('subscriptions').filtered('archived != true && open == true').sorted('roomUpdatedAt', true);
-			this.data.addListener(this.updateState);
+		if (this.props.server !== props.server && props.server) {
+			this.getSubscriptions();
 		} else if (this.props.searchText !== props.searchText) {
 			this.search(props.searchText);
 		}
@@ -96,6 +96,16 @@ export default class RoomsListView extends LoggedView {
 		this.search(text);
 	}
 
+	getSubscriptions = () => {
+		if (this.data && this.data.removeListener) {
+			this.data.removeListener(this.updateState);
+		}
+		if (this.props.server && this.hasActiveDB()) {
+			this.data = database.objects('subscriptions').filtered('archived != true && open == true').sorted('roomUpdatedAt', true);
+			this.data.addListener(this.updateState);
+		}
+	}
+
 	initDefaultHeader = () => {
 		const { navigator } = this.props;
 		const rightButtons = [{
@@ -137,6 +147,9 @@ export default class RoomsListView extends LoggedView {
 		BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 	}
 
+	// this is necessary during development (enables Cmd + r)
+	hasActiveDB = () => database && database.databases && database.databases.activeDB;
+
 	cancelSearchingAndroid = () => {
 		if (Platform.OS === 'android') {
 			this.props.navigator.setStyle({

e2e/11-broadcast.spec.js

@@ -107,7 +107,7 @@ describe('Broadcast room', () => {
 
 	after(async() => {
 		// log back as main test user and left screen on RoomsListView
-		await tapBack();
+		await tapBack('Messages');
 		await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(2000);
 		await logout();
 		await navigateToLogin();

e2e/data.js

@@ -1,7 +1,7 @@
 const random = require('./helpers/random');
 const value = random(20);
 const data = {
-    server: 'https://stable.rocket.chat',
+    server: 'https://unstable.rocket.chat',
     alternateServer: 'https://stable.rocket.chat',
     user: `user${ value }`,
     password: `password${ value }`,

index.android.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'regenerator-runtime/runtime';
 
 import './app/ReactotronConfig';

index.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'regenerator-runtime/runtime';
 
 import './app/ReactotronConfig';

package.json

@@ -23,13 +23,10 @@
     ]
   },
   "dependencies": {
+    "@babel/polyfill": "^7.0.0-beta.47",
     "@remobile/react-native-toast": "^1.0.7",
     "@storybook/addons": "^3.4.8",
     "@storybook/react-native": "^3.4.8",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-expo": "^4.0.0",
     "deep-equal": "^1.0.1",
     "ejson": "^2.1.2",
     "js-base64": "^2.4.6",
@@ -41,10 +38,10 @@
     "react": "^16.4.1",
     "react-clone-referenced-element": "^1.0.1",
     "react-emojione": "^5.0.0",
-    "react-native": "^0.55.4",
+    "react-native": "^0.56.0",
     "react-native-actionsheet": "^2.4.2",
     "react-native-audio": "^4.1.3",
-    "react-native-dialog": "^5.0.0",
+    "react-native-dialog": "^5.1.0",
     "react-native-fabric": "^0.5.1",
     "react-native-fast-image": "^4.0.14",
     "react-native-i18n": "^2.0.14",
@@ -62,7 +59,7 @@
     "react-native-picker-select": "^4.0.0",
     "react-native-responsive-ui": "^1.1.1",
     "react-native-safari-view": "^2.1.0",
-    "react-native-scrollable-tab-view": "^0.8.0",
+    "react-native-scrollable-tab-view": "git+https://github.com/skv-headless/react-native-scrollable-tab-view.git",
     "react-native-slider": "^0.11.0",
     "react-native-svg": "^6.4.1",
     "react-native-svg-image": "^2.0.1",
@@ -71,7 +68,7 @@
     "react-native-video-controls": "^2.2.3",
     "react-native-zeroconf": "^0.9.0",
     "react-redux": "^5.0.6",
-    "realm": "^2.12.0",
+    "realm": "^2.13.0",
     "redux": "^4.0.0",
     "redux-enhancer-react-native-appstate": "^0.3.1",
     "redux-immutable-state-invariant": "^2.1.0",
@@ -82,23 +79,25 @@
     "strip-ansi": "^4.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.0.0-beta.47",
+    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
     "@storybook/addon-storyshots": "^3.4.8",
-    "babel-eslint": "^8.2.5",
-    "babel-jest": "^23.2.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react-native": "^4.0.0",
+    "babel-core": "^7.0.0-beta.47",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^23.4.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-preset-react-native": "^5.0.2",
     "codecov": "^3.0.2",
     "detox": "^8.0.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-native": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.2.0",
-    "jest-cli": "^23.2.0",
+    "jest": "^23.4.1",
+    "jest-cli": "^23.4.1",
     "mocha": "^5.2.0",
     "react-dom": "^16.4.1",
     "react-native-bundle-visualizer": "^1.3.0",
@@ -116,6 +115,9 @@
     "collectCoverage": true,
     "moduleNameMapper": {
       ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+    },
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
     }
   },
   "snyk": true,