[NEW] Empty room background (#412)

<!-- 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 -->
Closes #398 

<!-- INSTRUCTION: Tell us more about your PR with screen shots if you can -->
![aug-09-2018 11-35-32](https://user-images.githubusercontent.com/804994/43906080-cbfadf92-9bc8-11e8-9ac9-44f43d3af023.gif)
![aug-09-2018 11-35-16](https://user-images.githubusercontent.com/804994/43906082-cc19411c-9bc8-11e8-9892-c65c86951a91.gif)
![image](https://user-images.githubusercontent.com/804994/43911366-ad830cd0-9bd5-11e8-8913-6a7e87a2206c.png)

app/lib/methods/getCustomEmojis.js

@@ -15,9 +15,6 @@ const getLastMessage = () => {
 
 export default async function() {
 	try {
-		if (!this.ddp.status) {
-			return;
-		}
 		const lastMessage = getLastMessage();
 		let emojis = await this.ddp.call('listEmojiCustom');
 		emojis = emojis.filter(emoji => !lastMessage || emoji._updatedAt > lastMessage);

app/views/RoomView/ListView.js

@@ -1,7 +1,6 @@
 import { ListView as OldList } from 'realm/react-native';
 import React from 'react';
-import cloneReferencedElement from 'react-clone-referenced-element';
+import { ScrollView, ListView as OldList2, ImageBackground } from 'react-native';
-import { ScrollView, ListView as OldList2 } from 'react-native';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -63,7 +62,8 @@ export class List extends React.Component {
 	}, 1000);
 
 	render() {
-		return (<ListView
+		return (
+			<ListView
 				enableEmptySections
 				style={styles.list}
 				data={this.data}
@@ -78,7 +78,8 @@ export class List extends React.Component {
 				pageSize={20}
 				testID='room-view-messages'
 				{...scrollPersistTaps}
-		/>);
+			/>
+		);
 	}
 }
 
@@ -170,16 +171,22 @@ export class ListView extends OldList2 {
 			onKeyboardDidHide: undefined
 		});
 
-		return cloneReferencedElement(
+		const image = data.length === 0 ? require('../../static/images/message_empty.png') : null;
-			<ScrollView {...props} />,
+		return (
-			{
+			[
-				ref: this._setScrollComponentRef,
+				<ImageBackground key='listview-background' source={image} style={styles.imageBackground} />,
-				onContentSizeChange: this._onContentSizeChange,
+				<ScrollView
-				onLayout: this._onLayout
+					key='listview-scroll'
-			},
+					ref={this._setScrollComponentRef}
-			header,
+					onContentSizeChange={this._onContentSizeChange}
-			bodyComponents,
+					onLayout={this._onLayout}
-			footer,
+					{...props}
+				>
+					{header}
+					{bodyComponents}
+					{footer}
+				</ScrollView>
+			]
 		);
 	}
 }

app/views/RoomView/index.js

@@ -271,11 +271,11 @@ export default class RoomView extends LoggedView {
 	};
 
 	renderHeader = () => {
-		if (this.state.end) {
+		if (!this.state.end) {
-			return <Text style={styles.loadingMore}>{I18n.t('Start_of_conversation')}</Text>;
-		}
 			return <Text style={styles.loadingMore}>{I18n.t('Loading_messages_ellipsis')}</Text>;
 		}
+		return null;
+	}
 
 	renderList = () => {
 		if (!this.state.loaded) {

app/views/RoomView/styles.js

@@ -47,5 +47,10 @@ export default StyleSheet.create({
 	},
 	loading: {
 		flex: 1
+	},
+	imageBackground: {
+		width: '100%',
+		height: '100%',
+		position: 'absolute'
 	}
 });

package.json

@@ -36,7 +36,6 @@
     "moment": "^2.22.2",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
-    "react-clone-referenced-element": "^1.0.1",
     "react-emojione": "^5.0.0",
     "react-native": "^0.56.0",
     "react-native-actionsheet": "^2.4.2",