Update dependencies (#587)

__mocks__/react-native-device-info.js

@@ -0,0 +1,4 @@
+export default {
+	getModel: () => '',
+	getReadableVersion: () => ''
+};

__mocks__/react-native-navigation.js

@@ -1,4 +1,17 @@
-export const Navigation = {
+class Events {
-	registerComponent: () => {},
+	registerAppLaunchedListener = () => {}
-	startSingleScreenApp: () => {}
+}
+const events = new Events();
+class NavigationClass {
+	registerComponent = () => {}
+
+	setRoot = () => {}
+
+	events = () => events
+}
+
+const Navigation = new NavigationClass();
+
+export {
+	Navigation
 };

app/Icons.js

@@ -1,7 +1,6 @@
-import { Platform } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { isIOS } from './utils/deviceInfo';
 
-const isIOS = Platform.OS === 'ios';
 const prefix = isIOS ? 'ios' : 'md';
 
 // icon name from provider: [ size of the uri, icon provider, name to be used later ]

app/constants/headerOptions.js

@@ -7,6 +7,7 @@ export const DARK_HEADER = {
 	},
 	topBar: {
 		backButton: {
+			showTitle: false,
 			color: '#fff'
 		},
 		background: {
@@ -31,6 +32,7 @@ export const LIGHT_HEADER = {
 	},
 	topBar: {
 		backButton: {
+			showTitle: false,
 			color: '#1d74f5'
 		},
 		background: {

app/containers/EmojiPicker/EmojiCategory.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, TouchableOpacity, Platform } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 import { emojify } from 'react-emojione';
 import { responsive } from 'react-native-responsive-ui';
 import { OptimizedFlatList } from 'react-native-optimized-flatlist';
+
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
+import { isIOS } from '../../utils/deviceInfo';
 
-const EMOJIS_PER_ROW = Platform.OS === 'ios' ? 8 : 9;
+const EMOJIS_PER_ROW = isIOS ? 8 : 9;
 
 const renderEmoji = (emoji, size, baseUrl) => {
 	if (emoji.isCustom) {

app/containers/MessageBox/Recording.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, SafeAreaView, Platform, PermissionsAndroid, Text
+	View, SafeAreaView, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
 import { BorderlessButton } from 'react-native-gesture-handler';
-
 import Icon from 'react-native-vector-icons/MaterialIcons';
+
 import styles from './styles';
 import I18n from '../../i18n';
+import { isIOS, isAndroid } from '../../utils/deviceInfo';
 
 export const _formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -20,7 +21,7 @@ export const _formatTime = function(seconds) {
 
 export default class extends React.PureComponent {
 	static async permission() {
-		if (Platform.OS !== 'android') {
+		if (!isAndroid) {
 			return true;
 		}
 
@@ -64,7 +65,7 @@ export default class extends React.PureComponent {
 		};
 		//
 		AudioRecorder.onFinished = (data) => {
-			if (!this.recordingCanceled && Platform.OS === 'ios') {
+			if (!this.recordingCanceled && isIOS) {
 				this.finishRecording(data.status === 'OK', data.audioFileURL);
 			}
 		};
@@ -96,7 +97,7 @@ export default class extends React.PureComponent {
 		try {
 			this.recording = false;
 			const filePath = await AudioRecorder.stopRecording();
-			if (Platform.OS === 'android') {
+			if (isAndroid) {
 				this.finishRecording(true, filePath);
 			}
 		} catch (err) {

app/containers/MessageBox/UploadModal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-	View, Text, StyleSheet, Image, ScrollView, Platform, TouchableHighlight
+	View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -11,6 +11,7 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
+import { isIOS } from '../../utils/deviceInfo';
 
 const cancelButtonColor = '#f7f8fa';
 
@@ -120,7 +121,7 @@ export default class UploadModal extends Component {
 
 	renderButtons = () => {
 		const { close } = this.props;
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			return (
 				<View style={styles.buttonContainer}>
 					<Button

app/containers/MessageBox/styles.js

@@ -1,4 +1,6 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { isIOS } from '../../utils/deviceInfo';
 
 const MENTION_HEIGHT = 50;
 
@@ -66,7 +68,7 @@ export default StyleSheet.create({
 	mentionItemEmoji: {
 		width: 46,
 		height: 36,
-		fontSize: Platform.OS === 'ios' ? 30 : 25,
+		fontSize: isIOS ? 30 : 25,
 		textAlign: 'center'
 	},
 	fixedMentionAvatar: {

app/containers/SearchBox.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import {
-	View, StyleSheet, Image, TextInput, Platform
+	View, StyleSheet, Image, TextInput
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import I18n from '../i18n';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
-		backgroundColor: Platform.OS === 'ios' ? '#F7F8FA' : '#54585E'
+		backgroundColor: isIOS ? '#F7F8FA' : '#54585E'
 	},
 	searchBox: {
 		alignItems: 'center',

app/containers/Sidebar.js

@@ -18,7 +18,7 @@ import RocketChat from '../lib/rocketchat';
 import log from '../utils/log';
 import I18n from '../i18n';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
-import DeviceInfo from '../utils/deviceInfo';
+import { getReadableVersion } from '../utils/deviceInfo';
 import Drawer from '../Drawer';
 
 const styles = StyleSheet.create({
@@ -363,7 +363,7 @@ export default class Sidebar extends Component {
 					{showStatus ? this.renderStatus() : null}
 				</ScrollView>
 				<Text style={styles.version}>
-					{DeviceInfo.getReadableVersion()}
+					{getReadableVersion}
 				</Text>
 			</SafeAreaView>
 		);

app/containers/message/Video.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, Image, Platform, View
+	StyleSheet, Image, View
 } from 'react-native';
 import Modal from 'react-native-modal';
 import VideoPlayer from 'react-native-video-controls';
@@ -9,8 +9,9 @@ import { RectButton } from 'react-native-gesture-handler';
 
 import Markdown from './Markdown';
 import openLink from '../../utils/openLink';
+import { isIOS } from '../../utils/deviceInfo';
 
-const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(Platform.OS === 'ios' ? [] : ['video/webm', 'video/3gp', 'video/mkv'])];
+const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/webm', 'video/3gp', 'video/mkv'])];
 const isTypeSupported = type => SUPPORTED_TYPES.indexOf(type) !== -1;
 
 const styles = StyleSheet.create({

app/index.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Linking, Platform } from 'react-native';
+import { Linking } from 'react-native';
 import { Navigation } from 'react-native-navigation';
 import { Provider } from 'react-redux';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
@@ -11,6 +11,7 @@ import { registerScreens } from './views';
 import { deepLinkingOpen } from './actions/deepLinking';
 import parseQuery from './lib/methods/helpers/parseQuery';
 import { initializePushNotifications } from './push';
+import { DEFAULT_HEADER } from './constants/headerOptions';
 
 const startLogged = () => {
 	Navigation.setRoot({
@@ -103,20 +104,7 @@ export default class App extends Component {
 
 		Navigation.events().registerAppLaunchedListener(() => {
 			Navigation.setDefaultOptions({
-				topBar: {
+				...DEFAULT_HEADER,
-					backButton: {
-						showTitle: false
-					},
-					leftButtonStyle: {
-						color: '#FFF'
-					},
-					rightButtonStyle: {
-						color: '#FFF'
-					},
-					title: {
-						fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif-medium'
-					}
-				},
 				sideMenu: {
 					left: {
 						enabled: false

app/lib/rocketchat.js

@@ -1,4 +1,4 @@
-import { AsyncStorage, Platform } from 'react-native';
+import { AsyncStorage } from 'react-native';
 import foreach from 'lodash/forEach';
 import * as SDK from '@rocket.chat/sdk';
 import semver from 'semver';
@@ -8,6 +8,7 @@ import defaultSettings from '../constants/settings';
 import messagesStatus from '../constants/messagesStatus';
 import database from './realm';
 import log from '../utils/log';
+import { isIOS } from '../utils/deviceInfo';
 
 import {
 	setUser, setLoginServices, loginRequest, loginFailure, logout
@@ -360,7 +361,7 @@ const RocketChat = {
 		return new Promise((resolve) => {
 			const token = getDeviceToken();
 			if (token) {
-				const type = Platform.OS === 'ios' ? 'apn' : 'gcm';
+				const type = isIOS ? 'apn' : 'gcm';
 				const data = {
 					value: token,
 					type,

app/presentation/RoomItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import {
-	View, Text, StyleSheet, Image, Platform
+	View, Text, StyleSheet, Image
 } from 'react-native';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
@@ -13,6 +13,7 @@ import Status from '../containers/status';
 import Touch from '../utils/touch/index'; //eslint-disable-line
 import RoomTypeIcon from '../containers/RoomTypeIcon';
 import I18n from '../i18n';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
@@ -43,7 +44,7 @@ const styles = StyleSheet.create({
 	},
 	titleContainer: {
 		width: '100%',
-		marginTop: Platform.OS === 'ios' ? 5 : 2,
+		marginTop: isIOS ? 5 : 2,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center'
@@ -226,7 +227,7 @@ export default class RoomItem extends React.Component {
 	})
 
 	renderDisclosureIndicator = () => {
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			return (
 				<View style={styles.disclosureContainer}>
 					<Image source={{ uri: 'disclosure_indicator' }} style={styles.disclosureIndicator} />

app/presentation/UserItem.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import {
-	Text, View, StyleSheet, Platform, ViewPropTypes, Image
+	Text, View, StyleSheet, ViewPropTypes, Image
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import Avatar from '../containers/Avatar';
 import Touch from '../utils/touch';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	button: {
@@ -26,7 +27,7 @@ const styles = StyleSheet.create({
 	name: {
 		fontSize: 18,
 		color: '#0C0D0F',
-		marginTop: Platform.OS === 'ios' ? 6 : 3,
+		marginTop: isIOS ? 6 : 3,
 		marginBottom: 1,
 		textAlign: 'left'
 	},

app/utils/deviceInfo.js

@@ -1,9 +1,16 @@
+import { Platform } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
 const NOTCH_DEVICES = ['iPhone X', 'iPhone XS', 'iPhone XS Max', 'iPhone XR'];
 
+export const isNotch = NOTCH_DEVICES.includes(DeviceInfo.getModel());
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = !isIOS;
+export const getReadableVersion = DeviceInfo.getReadableVersion();
+
 export default {
-	isNotch: () => NOTCH_DEVICES.includes(DeviceInfo.getModel()),
+	isNotch,
-	getBrand: () => DeviceInfo.getBrand(),
+	isIOS,
-	getReadableVersion: () => DeviceInfo.getReadableVersion()
+	isAndroid,
+	getReadableVersion
 };

app/views/CreateChannelView.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList, Platform
+	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList
 } from 'react-native';
 import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
@@ -18,7 +18,7 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import I18n from '../i18n';
 import UserItem from '../presentation/UserItem';
 import { showErrorAlert } from '../utils/info';
-import { DEFAULT_HEADER } from '../constants/headerOptions';
+import { isAndroid } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
@@ -89,11 +89,8 @@ const styles = StyleSheet.create({
 export default class CreateChannelView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Create_Channel')
 				}
 			}
@@ -207,7 +204,7 @@ export default class CreateChannelView extends LoggedView {
 				id: 'create',
 				text: 'Create',
 				testID: 'create-channel-submit',
-				color: Platform.OS === 'android' ? '#FFF' : undefined
+				color: isAndroid ? '#FFF' : undefined
 			});
 		}
 		Navigation.mergeOptions(componentId, {
@@ -261,7 +258,7 @@ export default class CreateChannelView extends LoggedView {
 				onValueChange={onValueChange}
 				testID={`create-channel-${ id }`}
 				onTintColor='#2de0a5'
-				tintColor={Platform.OS === 'android' ? '#f5455c' : null}
+				tintColor={isAndroid ? '#f5455c' : null}
 				disabled={disabled}
 			/>
 		</View>

app/views/LegalView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, ScrollView, View, StyleSheet, Image, Platform, Dimensions
+	Text, ScrollView, View, StyleSheet, Image, Dimensions
 } from 'react-native';
 import { Provider } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
@@ -10,6 +10,7 @@ import { gestureHandlerRootHOC, RectButton } from 'react-native-gesture-handler'
 
 import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
+import { isIOS, isAndroid } from '../utils/deviceInfo';
 import LoggedView from './View';
 import I18n from '../i18n';
 import store from '../lib/createStore';
@@ -72,8 +73,8 @@ export default class LegalView extends LoggedView {
 				},
 				leftButtons: [{
 					id: 'close',
-					icon: Platform.OS === 'android' ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
+					icon: isAndroid ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
-					text: Platform.OS === 'ios' ? I18n.t('Close') : undefined,
+					text: isIOS ? I18n.t('Close') : undefined,
 					testID: 'legal-view-close'
 				}]
 			}

app/views/MentionedMessagesView/index.js

@@ -10,7 +10,6 @@ import styles from './styles';
 import Message from '../../containers/message/Message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import RocketChat from '../../lib/rocketchat';
 
 @connect(state => ({
@@ -27,11 +26,8 @@ import RocketChat from '../../lib/rocketchat';
 export default class MentionedMessagesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Mentions')
 				}
 			}

app/views/NewMessageView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, StyleSheet, FlatList, Text, Platform, Image, Dimensions
+	View, StyleSheet, FlatList, Text, Image, Dimensions
 } from 'react-native';
 import { connect, Provider } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
@@ -17,14 +17,14 @@ import LoggedView from './View';
 import sharedStyles from './Styles';
 import I18n from '../i18n';
 import Touch from '../utils/touch';
+import { isIOS, isAndroid } from '../utils/deviceInfo';
 import SearchBox from '../containers/SearchBox';
 import store from '../lib/createStore';
-import { DEFAULT_HEADER } from '../constants/headerOptions';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
 		flex: 1,
-		backgroundColor: Platform.OS === 'ios' ? '#F7F8FA' : '#E1E5E8'
+		backgroundColor: isIOS ? '#F7F8FA' : '#E1E5E8'
 	},
 	separator: {
 		marginLeft: 60
@@ -58,13 +58,11 @@ let SelectedUsersView = null;
 export default class NewMessageView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				leftButtons: [{
 					id: 'cancel',
-					icon: Platform.OS === 'android' ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
+					icon: isAndroid ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
-					text: Platform.OS === 'ios' ? I18n.t('Cancel') : undefined
+					text: isIOS ? I18n.t('Cancel') : undefined
 				}]
 			}
 		};

app/views/NewServerView.js

@@ -17,7 +17,7 @@ import LoggedView from './View';
 import I18n from '../i18n';
 import { verticalScale, moderateScale } from '../utils/scaling';
 import KeyboardView from '../presentation/KeyboardView';
-import DeviceInfo from '../utils/deviceInfo';
+import { isIOS, isNotch } from '../utils/deviceInfo';
 import { LIGHT_HEADER } from '../constants/headerOptions';
 
 const styles = StyleSheet.create({
@@ -156,8 +156,8 @@ export default class NewServerView extends LoggedView {
 		const { componentId } = this.props;
 
 		let top = 15;
-		if (DeviceInfo.getBrand() === 'Apple') {
+		if (isIOS) {
-			top = DeviceInfo.isNotch() ? 45 : 30;
+			top = isNotch ? 45 : 30;
 		}
 
 		return (

app/views/OAuthView.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { WebView, Platform, Dimensions } from 'react-native';
+import { WebView, Dimensions } from 'react-native';
 import { connect } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
 
 import RocketChat from '../lib/rocketchat';
 import I18n from '../i18n';
 import { DARK_HEADER } from '../constants/headerOptions';
+import { isIOS, isAndroid } from '../utils/deviceInfo';
 
 const userAgentAndroid = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1';
-const userAgent = Platform.OS === 'ios' ? 'UserAgent' : userAgentAndroid;
+const userAgent = isIOS ? 'UserAgent' : userAgentAndroid;
 
 @connect(state => ({
 	server: state.server.server
@@ -22,8 +23,8 @@ export default class OAuthView extends React.PureComponent {
 				...DARK_HEADER.topBar,
 				leftButtons: [{
 					id: 'cancel',
-					icon: Platform.OS === 'android' ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
+					icon: isAndroid ? { uri: 'back', scale: Dimensions.get('window').scale } : undefined,
-					text: Platform.OS === 'ios' ? I18n.t('Cancel') : undefined
+					text: isIOS ? I18n.t('Cancel') : undefined
 				}]
 			}
 		};

app/views/OnboardingView/index.js

@@ -16,7 +16,7 @@ import openLink from '../../utils/openLink';
 import Button from './Button';
 import styles from './styles';
 import LoggedView from '../View';
-import DeviceInfo from '../../utils/deviceInfo';
+import { isIOS, isNotch } from '../../utils/deviceInfo';
 import store from '../../lib/createStore';
 import EventEmitter from '../../utils/events';
 import { LIGHT_HEADER } from '../../constants/headerOptions';
@@ -142,8 +142,8 @@ export default class OnboardingView extends LoggedView {
 
 		if (previousServer) {
 			let top = 15;
-			if (DeviceInfo.getBrand() === 'Apple') {
+			if (isIOS) {
-				top = DeviceInfo.isNotch() ? 45 : 30;
+				top = isNotch ? 45 : 30;
 			}
 			return (
 				<TouchableOpacity

app/views/PinnedMessagesView/index.js

@@ -11,7 +11,6 @@ import styles from './styles';
 import Message from '../../containers/message/Message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import RocketChat from '../../lib/rocketchat';
 
 const PIN_INDEX = 0;
@@ -32,11 +31,8 @@ const options = [I18n.t('Unpin'), I18n.t('Cancel')];
 export default class PinnedMessagesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Pinned')
 				}
 			}

app/views/ProfileView/index.js

@@ -27,7 +27,6 @@ import Button from '../../containers/Button';
 import Avatar from '../../containers/Avatar';
 import Touch from '../../utils/touch';
 import Drawer from '../../Drawer';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import { appStart as appStartAction } from '../../actions';
 import { setUser as setUserAction } from '../../actions/login';
 
@@ -49,16 +48,13 @@ import { setUser as setUserAction } from '../../actions/login';
 export default class ProfileView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				leftButtons: [{
 					id: 'settings',
 					icon: { uri: 'settings', scale: Dimensions.get('window').scale },
 					testID: 'rooms-list-view-sidebar'
 				}],
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Profile')
 				}
 			},

app/views/RoomActionsView/index.js

@@ -25,7 +25,6 @@ import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import I18n from '../../i18n';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import store from '../../lib/createStore';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 const renderSeparator = () => <View style={styles.separator} />;
 
@@ -43,11 +42,8 @@ const modules = {};
 export default class RoomActionsView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Actions')
 				}
 			}

app/views/RoomFilesView/index.js

@@ -10,7 +10,6 @@ import styles from './styles';
 import Message from '../../containers/message/Message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import RocketChat from '../../lib/rocketchat';
 
 @connect(state => ({
@@ -27,11 +26,8 @@ import RocketChat from '../../lib/rocketchat';
 export default class RoomFilesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Files')
 				}
 			}

app/views/RoomInfoEditView/index.js

@@ -22,7 +22,6 @@ import SwitchContainer from './SwitchContainer';
 import random from '../../utils/random';
 import log from '../../utils/log';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 const PERMISSION_SET_READONLY = 'set-readonly';
 const PERMISSION_SET_REACT_WHEN_READONLY = 'set-react-when-readonly';
@@ -46,11 +45,8 @@ const PERMISSIONS_ARRAY = [
 export default class RoomInfoEditView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Room_Info_Edit')
 				}
 			}

app/views/RoomInfoView/index.js

@@ -15,13 +15,11 @@ import styles from './styles';
 import sharedStyles from '../Styles';
 import database from '../../lib/realm';
 import RocketChat from '../../lib/rocketchat';
-
 import log from '../../utils/log';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import I18n from '../../i18n';
 import { iconsMap } from '../../Icons';
 import store from '../../lib/createStore';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 const PERMISSION_EDIT_ROOM = 'edit-room';
 
@@ -50,11 +48,8 @@ let RoomInfoEditView = null;
 export default class RoomInfoView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Room_Info')
 				}
 			}

app/views/RoomMembersView/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
+import { FlatList, View, Vibration } from 'react-native';
-	FlatList, View, Vibration, Platform
-} from 'react-native';
 import ActionSheet from 'react-native-actionsheet';
 import { connect } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
@@ -17,9 +15,9 @@ import RocketChat from '../../lib/rocketchat';
 import database from '../../lib/realm';
 import { showToast } from '../../utils/info';
 import log from '../../utils/log';
+import { isAndroid } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
 import SearchBox from '../../containers/SearchBox';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
@@ -29,18 +27,15 @@ import { DEFAULT_HEADER } from '../../constants/headerOptions';
 export default class RoomMembersView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Members')
 				},
 				rightButtons: [{
 					id: 'toggleOnline',
 					text: I18n.t('Online'),
 					testID: 'room-members-view-toggle-status',
-					color: Platform.OS === 'android' ? '#FFF' : undefined
+					color: isAndroid ? '#FFF' : undefined
 				}]
 			}
 		};
@@ -125,7 +120,7 @@ export default class RoomMembersView extends LoggedView {
 							id: 'toggleOnline',
 							text: allUsers ? I18n.t('Online') : I18n.t('All'),
 							testID: 'room-members-view-toggle-status',
-							color: Platform.OS === 'android' ? '#FFF' : undefined
+							color: isAndroid ? '#FFF' : undefined
 						}]
 					}
 				});

app/views/RoomView/Header/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, StyleSheet, Image, Platform, LayoutAnimation
+	View, Text, StyleSheet, Image, LayoutAnimation
 } from 'react-native';
 import { connect } from 'react-redux';
 import { responsive } from 'react-native-responsive-ui';
@@ -10,15 +10,15 @@ import equal from 'deep-equal';
 import I18n from '../../../i18n';
 import { STATUS_COLORS } from '../../../constants/colors';
 import sharedStyles from '../../Styles';
+import { isIOS } from '../../../utils/deviceInfo';
 
-const isIOS = () => Platform.OS === 'ios';
 const TITLE_SIZE = 18;
 const ICON_SIZE = 18;
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		justifyContent: 'center',
-		backgroundColor: isIOS() ? 'transparent' : '#2F343D'
+		backgroundColor: isIOS ? 'transparent' : '#2F343D'
 	},
 	titleContainer: {
 		flexDirection: 'row',
@@ -26,18 +26,18 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textSemibold,
-		color: isIOS() ? '#0C0D0F' : '#fff',
+		color: isIOS ? '#0C0D0F' : '#fff',
 		fontSize: TITLE_SIZE
 	},
 	type: {
 		width: ICON_SIZE,
 		height: ICON_SIZE,
 		marginRight: 8,
-		tintColor: isIOS() ? '#9EA2A8' : '#fff'
+		tintColor: isIOS ? '#9EA2A8' : '#fff'
 	},
 	typing: {
 		...sharedStyles.textRegular,
-		color: isIOS() ? '#9EA2A8' : '#fff',
+		color: isIOS ? '#9EA2A8' : '#fff',
 		fontSize: 12
 	},
 	typingUsers: {
@@ -116,7 +116,7 @@ export default class RoomHeaderView extends Component {
 	}
 
 	componentDidUpdate(prevProps) {
-		if (isIOS()) {
+		if (isIOS) {
 			const { usersTyping } = this.props;
 			if (!equal(prevProps.usersTyping, usersTyping)) {
 				LayoutAnimation.easeInEaseOut();
@@ -155,7 +155,7 @@ export default class RoomHeaderView extends Component {
 		let scale = 1;
 
 		if (!portrait) {
-			if (isIOS()) {
+			if (isIOS) {
 				height = 32;
 			}
 			if (usersTyping.length > 0) {

app/views/RoomView/ReactionPicker.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import { connect } from 'react-redux';
 import Modal from 'react-native-modal';
 import { responsive } from 'react-native-responsive-ui';
@@ -8,8 +8,9 @@ import { responsive } from 'react-native-responsive-ui';
 import EmojiPicker from '../../containers/EmojiPicker';
 import { toggleReactionPicker as toggleReactionPickerAction } from '../../actions/messages';
 import styles from './styles';
+import { isAndroid } from '../../utils/deviceInfo';
 
-const margin = Platform.OS === 'android' ? 40 : 20;
+const margin = isAndroid ? 40 : 20;
 const tabEmojiStyle = { fontSize: 15 };
 
 @connect(state => ({

app/views/RoomView/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, View, LayoutAnimation, ActivityIndicator, Platform
+	Text, View, LayoutAnimation, ActivityIndicator
 } from 'react-native';
 import { connect, Provider } from 'react-redux';
 import { RectButton, gestureHandlerRootHOC } from 'react-native-gesture-handler';
@@ -22,11 +22,11 @@ import ReactionPicker from './ReactionPicker';
 import UploadProgress from './UploadProgress';
 import styles from './styles';
 import log from '../../utils/log';
+import { isIOS } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
 import { iconsMap } from '../../Icons';
 import store from '../../lib/createStore';
 import ConnectionBadge from '../../containers/ConnectionBadge';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 let RoomActionsView = null;
 
@@ -51,9 +51,7 @@ let RoomActionsView = null;
 export default class RoomView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
 					component: {
 						name: 'RoomHeaderView',
@@ -214,7 +212,7 @@ export default class RoomView extends LoggedView {
 	};
 
 	internalSetState = (...args) => {
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			LayoutAnimation.easeInEaseOut();
 		}
 		this.setState(...args);

app/views/RoomView/styles.js

@@ -39,7 +39,6 @@ export default StyleSheet.create({
 	reactionPickerContainer: {
 		// width: width - 20,
 		// height: width - 20,
-		// paddingHorizontal: Platform.OS === 'android' ? 11 : 10,
 		backgroundColor: '#F7F7F7',
 		borderRadius: 4,
 		flexDirection: 'column'

app/views/RoomsListView/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Platform, View, FlatList, BackHandler, ActivityIndicator, Text, Image, Dimensions, ScrollView, Keyboard, LayoutAnimation
+	View, FlatList, BackHandler, ActivityIndicator, Text, Image, Dimensions, ScrollView, Keyboard, LayoutAnimation
 } from 'react-native';
 import { connect, Provider } from 'react-redux';
 import { isEqual } from 'lodash';
@@ -25,14 +25,13 @@ import { toggleSortDropdown as toggleSortDropdownAction, openSearchHeader as ope
 import { appStart as appStartAction } from '../../actions';
 import store from '../../lib/createStore';
 import Drawer from '../../Drawer';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import debounce from '../../utils/debounce';
+import { isIOS, isAndroid } from '../../utils/deviceInfo';
 
 const ROW_HEIGHT = 70;
 const SCROLL_OFFSET = 56;
 
 const shouldUpdateProps = ['searchText', 'loadingServer', 'showServerDropdown', 'showSortDropdown', 'sortBy', 'groupByType', 'showFavorites', 'showUnread', 'useRealName', 'appState'];
-const isAndroid = () => Platform.OS === 'android';
 const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = item => item.rid;
 
@@ -47,7 +46,7 @@ const rightButtons = [{
 	testID: 'rooms-list-view-create-channel'
 }];
 
-if (Platform.OS === 'android') {
+if (isAndroid) {
 	rightButtons.push({
 		id: 'search',
 		icon: { uri: 'search', scale: Dimensions.get('window').scale }
@@ -80,15 +79,13 @@ let NewMessageView = null;
 export default class RoomsListView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				leftButtons,
 				rightButtons,
 				title: {
 					component: {
 						name: 'RoomsListHeaderView',
-						alignment: isAndroid() ? 'left' : 'center'
+						alignment: isAndroid ? 'left' : 'center'
 					}
 				}
 			},
@@ -284,7 +281,7 @@ export default class RoomsListView extends LoggedView {
 	}
 
 	internalSetState = (...args) => {
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			LayoutAnimation.easeInEaseOut();
 		}
 		this.setState(...args);
@@ -400,7 +397,7 @@ export default class RoomsListView extends LoggedView {
 	}
 
 	cancelSearchingAndroid = () => {
-		if (Platform.OS === 'android') {
+		if (isAndroid) {
 			const { closeSearchHeader } = this.props;
 			this.setState({ searching: false });
 			closeSearchHeader();
@@ -475,7 +472,7 @@ export default class RoomsListView extends LoggedView {
 	toggleSort = () => {
 		const { toggleSortDropdown } = this.props;
 
-		const offset = isAndroid() ? 0 : SCROLL_OFFSET;
+		const offset = isAndroid ? 0 : SCROLL_OFFSET;
 		if (this.scroll.scrollTo) {
 			this.scroll.scrollTo({ x: 0, y: offset, animated: true });
 		} else if (this.scroll.scrollToOffset) {
@@ -514,7 +511,7 @@ export default class RoomsListView extends LoggedView {
 	}
 
 	renderSearchBar = () => {
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			return <SearchBox onChangeText={this.search} testID='rooms-list-view-search' key='rooms-list-view-search' />;
 		}
 	}
@@ -644,7 +641,7 @@ export default class RoomsListView extends LoggedView {
 					ref={this.getScrollRef}
 					data={search.length ? search : chats}
 					extraData={search.length ? search : chats}
-					contentOffset={Platform.OS === 'ios' ? { x: 0, y: SCROLL_OFFSET } : {}}
+					contentOffset={isIOS ? { x: 0, y: SCROLL_OFFSET } : {}}
 					keyExtractor={keyExtractor}
 					style={styles.list}
 					renderItem={this.renderItem}
@@ -663,7 +660,7 @@ export default class RoomsListView extends LoggedView {
 		return (
 			<ScrollView
 				ref={this.getScrollRef}
-				contentOffset={Platform.OS === 'ios' ? { x: 0, y: SCROLL_OFFSET } : {}}
+				contentOffset={isIOS ? { x: 0, y: SCROLL_OFFSET } : {}}
 				keyboardShouldPersistTaps='always'
 				testID='rooms-list-view-list'
 			>

app/views/RoomsListView/styles.js

@@ -1,11 +1,10 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
-
+import { isIOS } from '../../utils/deviceInfo';
-const isIOS = () => Platform.OS === 'ios';
 
 export default StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: isIOS() ? '#FFF' : '#E1E5E8'
+		backgroundColor: isIOS ? '#FFF' : '#E1E5E8'
 	},
 	separator: {
 		height: StyleSheet.hairlineWidth,
@@ -39,7 +38,7 @@ export default StyleSheet.create({
 		borderBottomWidth: StyleSheet.hairlineWidth,
 		borderColor: '#E1E5E8',
 		alignItems: 'center',
-		backgroundColor: isIOS() ? '#fff' : '#54585E',
+		backgroundColor: isIOS ? '#fff' : '#54585E',
 		flexDirection: 'row'
 	},
 	sortToggleContainerClose: {
@@ -95,15 +94,15 @@ export default StyleSheet.create({
 		paddingHorizontal: 15,
 		paddingTop: 17,
 		paddingBottom: 10,
-		backgroundColor: isIOS() ? '#fff' : '#E1E5E8'
+		backgroundColor: isIOS ? '#fff' : '#E1E5E8'
 	},
 	groupTitle: {
-		color: isIOS() ? '#2F343D' : '#54585E',
+		color: isIOS ? '#2F343D' : '#54585E',
-		fontSize: isIOS() ? 22 : 15,
+		fontSize: isIOS ? 22 : 15,
 		fontWeight: 'bold',
 		letterSpacing: 0.27,
 		flex: 1,
-		lineHeight: isIOS() ? 41 : 24
+		lineHeight: isIOS ? 41 : 24
 	},
 	serverHeader: {
 		justifyContent: 'space-between'
@@ -115,7 +114,7 @@ export default StyleSheet.create({
 		marginLeft: 15
 	},
 	serverHeaderAdd: {
-		color: isIOS() ? '#1D74F5' : '#FFF',
+		color: isIOS ? '#1D74F5' : '#FFF',
 		fontSize: 15,
 		fontWeight: 'normal',
 		marginRight: 15,

app/views/SearchMessagesView/index.js

@@ -15,7 +15,6 @@ import RocketChat from '../../lib/rocketchat';
 import Message from '../../containers/message/Message';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
@@ -30,11 +29,8 @@ import { DEFAULT_HEADER } from '../../constants/headerOptions';
 export default class SearchMessagesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Search')
 				}
 			}

app/views/SelectedUsersView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, StyleSheet, FlatList, LayoutAnimation, Platform
+	View, StyleSheet, FlatList, LayoutAnimation
 } from 'react-native';
 import { connect, Provider } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
@@ -20,15 +20,15 @@ import debounce from '../utils/debounce';
 import LoggedView from './View';
 import I18n from '../i18n';
 import log from '../utils/log';
+import { isIOS, isAndroid } from '../utils/deviceInfo';
 import SearchBox from '../containers/SearchBox';
 import sharedStyles from './Styles';
 import store from '../lib/createStore';
-import { DEFAULT_HEADER } from '../constants/headerOptions';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
 		flex: 1,
-		backgroundColor: Platform.OS === 'ios' ? '#F7F8FA' : '#E1E5E8'
+		backgroundColor: isIOS ? '#F7F8FA' : '#E1E5E8'
 	},
 	header: {
 		backgroundColor: '#fff'
@@ -52,12 +52,6 @@ let CreateChannelView = null;
 }))
 /** @extends React.Component */
 export default class SelectedUsersView extends LoggedView {
-	static options() {
-		return {
-			...DEFAULT_HEADER
-		};
-	}
-
 	static propTypes = {
 		componentId: PropTypes.string,
 		rid: PropTypes.string,
@@ -106,7 +100,7 @@ export default class SelectedUsersView extends LoggedView {
 					id: 'create',
 					text: I18n.t('Next'),
 					testID: 'selected-users-view-submit',
-					color: Platform.OS === 'android' ? '#FFF' : undefined
+					color: isAndroid ? '#FFF' : undefined
 				});
 			}
 			Navigation.mergeOptions(componentId, {

app/views/SettingsView/index.js

@@ -22,7 +22,6 @@ import log from '../../utils/log';
 import { setUser as setUserAction } from '../../actions/login';
 import { appStart as appStartAction } from '../../actions';
 import Drawer from '../../Drawer';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 @connect(state => ({
 	userLanguage: state.login.user && state.login.user.language
@@ -34,16 +33,13 @@ import { DEFAULT_HEADER } from '../../constants/headerOptions';
 export default class SettingsView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				leftButtons: [{
 					id: 'settings',
 					icon: { uri: 'settings', scale: Dimensions.get('window').scale },
 					testID: 'rooms-list-view-sidebar'
 				}],
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Settings')
 				}
 			},

app/views/SnippetedMessagesView/index.js

@@ -11,7 +11,6 @@ import styles from './styles';
 import Message from '../../containers/message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 
 @connect(state => ({
 	messages: state.snippetedMessages.messages,
@@ -29,11 +28,8 @@ import { DEFAULT_HEADER } from '../../constants/headerOptions';
 export default class SnippetedMessagesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Snippets')
 				}
 			}

app/views/StarredMessagesView/index.js

@@ -11,7 +11,6 @@ import styles from './styles';
 import Message from '../../containers/message/Message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
-import { DEFAULT_HEADER } from '../../constants/headerOptions';
 import RocketChat from '../../lib/rocketchat';
 
 const STAR_INDEX = 0;
@@ -32,11 +31,8 @@ const options = [I18n.t('Unstar'), I18n.t('Cancel')];
 export default class StarredMessagesView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Starred')
 				}
 			}

app/views/Styles.js

@@ -3,6 +3,7 @@ import { StyleSheet, Platform } from 'react-native';
 import {
 	COLOR_DANGER, COLOR_BUTTON_PRIMARY, COLOR_SEPARATOR
 } from '../constants/colors';
+import { isIOS } from '../utils/deviceInfo';
 
 export default StyleSheet.create({
 	container: {
@@ -151,7 +152,7 @@ export default StyleSheet.create({
 	closeOAuth: {
 		position: 'absolute',
 		left: 5,
-		top: Platform.OS === 'ios' ? 20 : 0,
+		top: isIOS ? 20 : 0,
 		backgroundColor: 'transparent'
 	},
 	oAuthModal: {

e2e/06-roomslist.spec.js

@@ -2,7 +2,7 @@ const {
 	device, expect, element, by, waitFor
 } = require('detox');
 const { takeScreenshot } = require('./helpers/screenshot');
-const { login, navigateToLogin, tapBack } = require('./helpers/app');
+const { login, navigateToLogin, tapBack, sleep } = require('./helpers/app');
 const data = require('./data');
 
 describe('Rooms list screen', () => {
@@ -45,6 +45,7 @@ describe('Rooms list screen', () => {
 			await waitFor(element(by.id('rooms-list-view-search'))).toExist().withTimeout(2000);
 
 			await element(by.id('rooms-list-view-search')).replaceText('rocket.cat');
+			await sleep(2000);
 			await waitFor(element(by.id('rooms-list-view-item-rocket.cat'))).toBeVisible().withTimeout(60000);
 			await expect(element(by.id('rooms-list-view-item-rocket.cat'))).toBeVisible();
 			await element(by.id('rooms-list-view-item-rocket.cat')).tap();
@@ -56,6 +57,7 @@ describe('Rooms list screen', () => {
 			await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(2000);
 			await expect(element(by.id('rooms-list-view'))).toBeVisible();
 			await element(by.id('rooms-list-view-search')).replaceText('');
+			await sleep(2000);
 			await waitFor(element(by.id('rooms-list-view-item-rocket.cat'))).toExist().withTimeout(60000);
 			await expect(element(by.id('rooms-list-view-item-rocket.cat'))).toExist();
 		});

e2e/07-createroom.spec.js

@@ -146,6 +146,7 @@ describe('Create room screen', () => {
 				await tapBack();
 				await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(2000);
 				await element(by.id('rooms-list-view-search')).replaceText(`private${ data.random }`);
+				await sleep(2000);
 				await waitFor(element(by.id(`rooms-list-view-item-private${ data.random }`))).toBeVisible().withTimeout(60000);
 				await expect(element(by.id(`rooms-list-view-item-private${ data.random }`))).toBeVisible();
 			});

e2e/08-room.spec.js

@@ -3,7 +3,7 @@ const {
 } = require('detox');
 const { takeScreenshot } = require('./helpers/screenshot');
 const data = require('./data');
-const { tapBack } = require('./helpers/app');
+const { tapBack, sleep } = require('./helpers/app');
 
 async function mockMessage(message) {
 	await element(by.id('messagebox-input')).tap();
@@ -14,6 +14,7 @@ async function mockMessage(message) {
 
 async function navigateToRoom() {
 	await element(by.id('rooms-list-view-search')).replaceText(`private${ data.random }`);
+	await sleep(2000);
     await waitFor(element(by.id(`rooms-list-view-item-private${ data.random }`))).toBeVisible().withTimeout(60000);
     await element(by.id(`rooms-list-view-item-private${ data.random }`)).tap();
     await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000);

e2e/09-roomactions.spec.js

@@ -3,7 +3,7 @@ const {
 } = require('detox');
 const { takeScreenshot } = require('./helpers/screenshot');
 const data = require('./data');
-const { tapBack } = require('./helpers/app');
+const { tapBack, sleep } = require('./helpers/app');
 
 const scrollDown = 200;
 
@@ -16,6 +16,7 @@ async function navigateToRoomActions(type) {
 	}
 	await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000);
 	await element(by.id('rooms-list-view-search')).replaceText(room);
+	await sleep(2000);
     await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toExist().withTimeout(60000);
     await element(by.id(`rooms-list-view-item-${ room }`)).tap();
 	await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(2000);

e2e/10-roominfo.spec.js

@@ -3,7 +3,7 @@ const {
 } = require('detox');
 const { takeScreenshot } = require('./helpers/screenshot');
 const data = require('./data');
-const { tapBack } = require('./helpers/app');
+const { tapBack, sleep } = require('./helpers/app');
 
 async function navigateToRoomInfo(type) {
 	let room;
@@ -14,8 +14,9 @@ async function navigateToRoomInfo(type) {
 	}
 	await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000);
 	await element(by.id('rooms-list-view-search')).replaceText(room);
+	await sleep(2000);
     await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toExist().withTimeout(60000);
-    await element(by.id(`rooms-list-view-item-${ room }`)).tap();
+	await element(by.id(`rooms-list-view-item-${ room }`)).tap();
 	await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(2000);
 	await element(by.id('room-view-header-actions')).tap();
 	await waitFor(element(by.id('room-actions-view'))).toBeVisible().withTimeout(5000);
@@ -313,6 +314,7 @@ describe('Room info screen', () => {
 				await element(by.text('Yes, delete it!')).tap();
 				await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000);
 				await element(by.id('rooms-list-view-search')).replaceText('');
+				await sleep(2000);
 				await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible().withTimeout(60000);
 				await expect(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible();
 			});

e2e/12-broadcast.spec.js

@@ -4,7 +4,7 @@ const {
 const OTP = require('otp.js');
 const GA = OTP.googleAuthenticator;
 const { takeScreenshot } = require('./helpers/screenshot');
-const { logout, navigateToLogin, login, tapBack } = require('./helpers/app');
+const { logout, navigateToLogin, login, tapBack, sleep } = require('./helpers/app');
 const data = require('./data');
 
 describe('Broadcast room', () => {
@@ -71,6 +71,7 @@ describe('Broadcast room', () => {
 		// await device.reloadReactNative(); // remove after fix logout
 		// await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000);
 		await element(by.id('rooms-list-view-search')).replaceText(`broadcast${ data.random }`);
+		await sleep(2000);
 		await waitFor(element(by.id(`rooms-list-view-item-broadcast${ data.random }`))).toExist().withTimeout(60000);
 		await expect(element(by.id(`rooms-list-view-item-broadcast${ data.random }`))).toExist();
 		await element(by.id(`rooms-list-view-item-broadcast${ data.random }`)).tap();

e2e/14-joinpublicroom.spec.js

@@ -3,7 +3,7 @@ const {
 } = require('detox');
 const { takeScreenshot } = require('./helpers/screenshot');
 const data = require('./data');
-const { tapBack } = require('./helpers/app');
+const { tapBack, sleep } = require('./helpers/app');
 
 const room = 'detox-public';
 
@@ -16,6 +16,7 @@ async function mockMessage(message) {
 
 async function navigateToRoom() {
 	await element(by.id('rooms-list-view-search')).replaceText(room);
+	await sleep(2000);
     await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toBeVisible().withTimeout(60000);
     await element(by.id(`rooms-list-view-item-${ room }`)).tap();
     await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000);
@@ -183,6 +184,7 @@ describe('Join public room', () => {
 			await element(by.text('Yes, leave it!')).tap();
 			await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000);
 			await element(by.id('rooms-list-view-search')).replaceText('');
+			await sleep(2000);
 			await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible().withTimeout(60000);
 			await expect(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible();
 		});

e2e/data.js

@@ -1,13 +1,13 @@
 const random = require('./helpers/random');
 const value = random(20);
 const data = {
-    server: 'https://stable.rocket.chat',
+    server: 'http://localhost:3000',
     alternateServer: 'https://unstable.rocket.chat',
     user: `user${ value }`,
     password: `password${ value }`,
     alternateUser: 'detox',
     alternateUserPassword: '123',
-    alternateUserTOTPSecret: 'HJGECLDOH5RCKJSWMREXAKKENVZXKOJ6I5ZTKPSRIEQWGOK5K5KA',
+    alternateUserTOTPSecret: 'KFJW6SZMH5EUI5LHPJ2XCOKKGRHDA2ZDN5YD4YLBMMSSMVCEPJSQ',
     email: `diego.mello+e2e${ value }@rocket.chat`,
     random: value
 }

e2e/init.js

@@ -2,7 +2,7 @@ const detox = require('detox');
 const config = require('../package.json').detox;
 
 before(async() => {
-	await detox.init(config);
+	await detox.init(config, { launchApp: false });
 	await device.launchApp({ permissions: { notifications: 'YES' } });
 });
 

ios/Podfile.lock

@@ -1,32 +1,32 @@
 PODS:
   - QBImagePickerController (3.4.0)
-  - React (0.56.0):
+  - React (0.57.8):
-    - React/Core (= 0.56.0)
+    - React/Core (= 0.57.8)
-  - React/Core (0.56.0):
+  - React/Core (0.57.8):
-    - yoga (= 0.56.0.React)
+    - yoga (= 0.57.8.React)
-  - React/fishhook (0.56.0)
+  - React/fishhook (0.57.8)
-  - React/RCTActionSheet (0.56.0):
+  - React/RCTActionSheet (0.57.8):
     - React/Core
-  - React/RCTAnimation (0.56.0):
+  - React/RCTAnimation (0.57.8):
     - React/Core
-  - React/RCTBlob (0.56.0):
+  - React/RCTBlob (0.57.8):
     - React/Core
-  - React/RCTGeolocation (0.56.0):
+  - React/RCTGeolocation (0.57.8):
     - React/Core
-  - React/RCTImage (0.56.0):
+  - React/RCTImage (0.57.8):
     - React/Core
     - React/RCTNetwork
-  - React/RCTLinkingIOS (0.56.0):
+  - React/RCTLinkingIOS (0.57.8):
     - React/Core
-  - React/RCTNetwork (0.56.0):
+  - React/RCTNetwork (0.57.8):
     - React/Core
-  - React/RCTSettings (0.56.0):
+  - React/RCTSettings (0.57.8):
     - React/Core
-  - React/RCTText (0.56.0):
+  - React/RCTText (0.57.8):
     - React/Core
-  - React/RCTVibration (0.56.0):
+  - React/RCTVibration (0.57.8):
     - React/Core
-  - React/RCTWebSocket (0.56.0):
+  - React/RCTWebSocket (0.57.8):
     - React/Core
     - React/fishhook
     - React/RCTBlob
@@ -36,8 +36,8 @@ PODS:
     - QBImagePickerController
     - React/Core
     - RSKImageCropper
-  - RSKImageCropper (2.1.0)
+  - RSKImageCropper (2.2.1)
-  - yoga (0.56.0.React)
+  - yoga (0.57.8.React)
 
 DEPENDENCIES:
   - React/Core (from `../node_modules/react-native`)
@@ -70,7 +70,7 @@ SPEC CHECKSUMS:
   React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
   RNDeviceInfo: 568c5641057313b4912d08a7742ff0b2f753ed5c
   RNImageCropPicker: 32ca4b9fef4e1b7b85ba69494242122948117e06
-  RSKImageCropper: 0d0c6d8525a2381f03fde32a47c6703817a2feed
+  RSKImageCropper: 98296ad26b41753f796b6898d015509598f13d97
   yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
 
 PODFILE CHECKSUM: da5e520837501713de2c32adbff219ab7fc5c0fa

ios/Pods/Headers/Private/React/React/RCTWKWebView.h

@@ -0,0 +1 @@
+../../../../../../node_modules/react-native/React/Views/RCTWKWebView.h

ios/Pods/Headers/Private/React/React/RCTWKWebViewManager.h

@@ -0,0 +1 @@
+../../../../../../node_modules/react-native/React/Views/RCTWKWebViewManager.h

ios/Pods/Headers/Public/React/React/RCTWKWebView.h

@@ -0,0 +1 @@
+../../../../../../node_modules/react-native/React/Views/RCTWKWebView.h

ios/Pods/Headers/Public/React/React/RCTWKWebViewManager.h

@@ -0,0 +1 @@
+../../../../../../node_modules/react-native/React/Views/RCTWKWebViewManager.h

ios/Pods/Local Podspecs/React.podspec.json

@@ -1,6 +1,6 @@
 {
   "name": "React",
-  "version": "0.56.0",
+  "version": "0.57.8",
   "summary": "A framework for building native apps using React",
   "description": "React Native apps are built using the React JS\nframework, and render directly to native UIKit\nelements using a fully asynchronous architecture.\nThere is no browser and no HTML. We have picked what\nwe think is the best set of features from these and\nother technologies to build what we hope to become\nthe best product development framework available,\nwith an emphasis on iteration speed, developer\ndelight, continuity of technology, and absolutely\nbeautiful and fast products with no compromises in\nquality or capability.",
   "homepage": "http://facebook.github.io/react-native/",
@@ -8,7 +8,7 @@
   "authors": "Facebook",
   "source": {
     "git": "https://github.com/facebook/react-native.git",
-    "tag": "v0.56.0"
+    "tag": "v0.57.8"
   },
   "default_subspecs": "Core",
   "requires_arc": true,
@@ -30,7 +30,7 @@
       "name": "Core",
       "dependencies": {
         "yoga": [
-          "0.56.0.React"
+          "0.57.8.React"
         ]
       },
       "source_files": "React/**/*.{c,h,m,mm,S,cpp}",

ios/Pods/Local Podspecs/yoga.podspec.json

@@ -1,6 +1,6 @@
 {
   "name": "yoga",
-  "version": "0.56.0.React",
+  "version": "0.57.8.React",
   "license": {
     "type": "MIT"
   },
@@ -11,7 +11,7 @@
   "authors": "Facebook",
   "source": {
     "git": "https://github.com/facebook/react-native.git",
-    "tag": "v0.56.0"
+    "tag": "v0.57.8"
   },
   "module_name": "yoga",
   "requires_arc": false,

ios/Pods/Manifest.lock

@@ -1,32 +1,32 @@
 PODS:
   - QBImagePickerController (3.4.0)
-  - React (0.56.0):
+  - React (0.57.8):
-    - React/Core (= 0.56.0)
+    - React/Core (= 0.57.8)
-  - React/Core (0.56.0):
+  - React/Core (0.57.8):
-    - yoga (= 0.56.0.React)
+    - yoga (= 0.57.8.React)
-  - React/fishhook (0.56.0)
+  - React/fishhook (0.57.8)
-  - React/RCTActionSheet (0.56.0):
+  - React/RCTActionSheet (0.57.8):
     - React/Core
-  - React/RCTAnimation (0.56.0):
+  - React/RCTAnimation (0.57.8):
     - React/Core
-  - React/RCTBlob (0.56.0):
+  - React/RCTBlob (0.57.8):
     - React/Core
-  - React/RCTGeolocation (0.56.0):
+  - React/RCTGeolocation (0.57.8):
     - React/Core
-  - React/RCTImage (0.56.0):
+  - React/RCTImage (0.57.8):
     - React/Core
     - React/RCTNetwork
-  - React/RCTLinkingIOS (0.56.0):
+  - React/RCTLinkingIOS (0.57.8):
     - React/Core
-  - React/RCTNetwork (0.56.0):
+  - React/RCTNetwork (0.57.8):
     - React/Core
-  - React/RCTSettings (0.56.0):
+  - React/RCTSettings (0.57.8):
     - React/Core
-  - React/RCTText (0.56.0):
+  - React/RCTText (0.57.8):
     - React/Core
-  - React/RCTVibration (0.56.0):
+  - React/RCTVibration (0.57.8):
     - React/Core
-  - React/RCTWebSocket (0.56.0):
+  - React/RCTWebSocket (0.57.8):
     - React/Core
     - React/fishhook
     - React/RCTBlob
@@ -36,8 +36,8 @@ PODS:
     - QBImagePickerController
     - React/Core
     - RSKImageCropper
-  - RSKImageCropper (2.1.0)
+  - RSKImageCropper (2.2.1)
-  - yoga (0.56.0.React)
+  - yoga (0.57.8.React)
 
 DEPENDENCIES:
   - React/Core (from `../node_modules/react-native`)
@@ -70,7 +70,7 @@ SPEC CHECKSUMS:
   React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
   RNDeviceInfo: 568c5641057313b4912d08a7742ff0b2f753ed5c
   RNImageCropPicker: 32ca4b9fef4e1b7b85ba69494242122948117e06
-  RSKImageCropper: 0d0c6d8525a2381f03fde32a47c6703817a2feed
+  RSKImageCropper: 98296ad26b41753f796b6898d015509598f13d97
   yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
 
 PODFILE CHECKSUM: da5e520837501713de2c32adbff219ab7fc5c0fa

ios/Pods/RSKImageCropper/RSKImageCropper/RSKImageCropViewController.m

@@ -963,9 +963,9 @@ static const CGFloat kLayoutImageScrollViewAnimationDuration = 0.25;
             CGFloat scale = 1.0 / zoomScale;
             [maskPathCopy applyTransform:CGAffineTransformMakeScale(scale, scale)];
             
-            // 5b: move the mask to the top-left.
+            // 5b: center the mask.
-            CGPoint translation = CGPointMake(-CGRectGetMinX(maskPathCopy.bounds),
+            CGPoint translation = CGPointMake(-CGRectGetMinX(maskPathCopy.bounds) + (CGRectGetWidth(cropRect) - CGRectGetWidth(maskPathCopy.bounds)) * 0.5f,
-                                              -CGRectGetMinY(maskPathCopy.bounds));
+                                              -CGRectGetMinY(maskPathCopy.bounds) + (CGRectGetHeight(cropRect) - CGRectGetHeight(maskPathCopy.bounds)) * 0.5f);
             [maskPathCopy applyTransform:CGAffineTransformMakeTranslation(translation.x, translation.y)];
             
             // 5c: apply the mask.

package.json

@@ -11,7 +11,7 @@
     "ios": "react-native run-ios",
     "log-android": "react-native log-android",
     "android": "react-native run-android",
-    "storybook": "storybook start -p 7007",
+    "storybook": "storybook start -p 7007 | react-native start --projectRoot storybook",
     "snyk-protect": "snyk protect",
     "fabric-ios": "./scripts/fabric-ios.sh",
     "fabric-android": "./scripts/fabric-android.sh"
@@ -26,73 +26,73 @@
     "@rocket.chat/sdk": "git+https://github.com/RocketChat/Rocket.Chat.js.SDK.git#temp-ddp",
     "deep-equal": "^1.0.1",
     "ejson": "^2.1.2",
-    "js-base64": "^2.4.9",
+    "js-base64": "^2.5.1",
     "js-sha256": "^0.9.0",
-    "jsc-android": "^236355.1.0",
+    "jsc-android": "^236355.1.1",
     "lodash": "^4.17.11",
     "markdown-it-flowdock": "^0.3.7",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
     "prop-types": "^15.6.2",
-    "react": "16.6.1",
+    "react": "16.6.3",
-    "react-emojione": "^5.0.0",
+    "react-emojione": "^5.0.1",
-    "react-native": "^0.57.5",
+    "react-native": "^0.57.8",
     "react-native-actionsheet": "^2.4.2",
-    "react-native-audio": "^4.2.2",
+    "react-native-audio": "^4.3.0",
-    "react-native-device-info": "^0.24.3",
+    "react-native-device-info": "^0.25.1",
-    "react-native-dialog": "^5.4.0",
+    "react-native-dialog": "^5.5.0",
     "react-native-fabric": "github:corymsmith/react-native-fabric#523a4edab3b2bf55ea9eeea2cf0dde82c5c29dd4",
-    "react-native-fast-image": "^5.0.11",
+    "react-native-fast-image": "^5.1.2",
-    "react-native-gesture-handler": "^1.0.9",
+    "react-native-gesture-handler": "^1.0.15",
     "react-native-i18n": "^2.0.15",
     "react-native-image-crop-picker": "git+https://github.com/RocketChat/react-native-image-crop-picker.git",
-    "react-native-image-zoom-viewer": "^2.2.23",
+    "react-native-image-zoom-viewer": "^2.2.25",
     "react-native-keyboard-aware-scroll-view": "^0.7.4",
     "react-native-keyboard-input": "^5.3.1",
     "react-native-keyboard-tracking-view": "^5.5.0",
     "react-native-markdown-renderer": "^3.2.8",
-    "react-native-modal": "^7.0.0",
+    "react-native-modal": "^7.0.2",
-    "react-native-navigation": "^2.2.1",
+    "react-native-navigation": "^2.8.0",
-    "react-native-notifications": "^1.1.21",
+    "react-native-notifications": "^1.1.23",
     "react-native-optimized-flatlist": "^1.0.4",
-    "react-native-picker-select": "^5.1.0",
+    "react-native-picker-select": "^5.2.3",
     "react-native-responsive-ui": "^1.1.1",
     "react-native-safari-view": "^2.1.0",
-    "react-native-safe-area-view": "^0.11.0",
+    "react-native-safe-area-view": "^0.12.0",
     "react-native-scrollable-tab-view": "0.10.0",
     "react-native-slider": "^0.11.0",
-    "react-native-vector-icons": "^6.1.0",
+    "react-native-vector-icons": "^6.2.0",
-    "react-native-video": "^3.2.1",
+    "react-native-video": "^4.3.1",
     "react-native-video-controls": "^2.2.3",
-    "react-redux": "^5.1.1",
+    "react-redux": "^6.0.0",
-    "realm": "^2.19.1",
+    "realm": "^2.22.0",
     "redux": "^4.0.1",
     "redux-enhancer-react-native-appstate": "^0.3.1",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-saga": "^0.16.2",
-    "rn-fetch-blob": "^0.10.13",
+    "rn-fetch-blob": "^0.10.15",
     "semver": "^5.6.0",
-    "snyk": "^1.109.0",
+    "snyk": "^1.122.3",
     "strip-ansi": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.0",
     "@babel/plugin-proposal-decorators": "^7.1.0",
-    "@storybook/addon-actions": "^3.4.11",
+    "@storybook/addon-actions": "^4.1.11",
-    "@storybook/addon-links": "^3.4.11",
+    "@storybook/addon-links": "^4.1.11",
-    "@storybook/addon-storyshots": "^3.4.11",
+    "@storybook/addon-storyshots": "^4.1.11",
-    "@storybook/addons": "^3.4.11",
+    "@storybook/addons": "^4.1.11",
-    "@storybook/react-native": "^3.4.11",
+    "@storybook/react-native": "^4.1.11",
     "babel-core": "^6.26.3",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-runtime": "^6.26.0",
     "codecov": "^3.1.0",
-    "detox": "^9.1.2",
+    "detox": "^10.0.5",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-native": "^3.3.0",
     "identity-obj-proxy": "^3.0.0",
@@ -101,12 +101,12 @@
     "metro-react-native-babel-preset": "^0.45.6",
     "mocha": "^5.2.0",
     "otp.js": "^1.1.0",
-    "react-dom": "16.6.1",
+    "react-dom": "16.6.3",
-    "react-test-renderer": "16.6.1",
+    "react-test-renderer": "16.6.3",
-    "reactotron-react-native": "^2.1.0",
+    "reactotron-react-native": "^2.1.5",
-    "reactotron-redux": "^2.1.0",
+    "reactotron-redux": "^2.1.3",
-    "reactotron-redux-saga": "^2.1.0",
+    "reactotron-redux-saga": "^2.1.4",
-    "schedule": "^0.4.0"
+    "regenerator-runtime": "^0.13.1"
   },
   "jest": {
     "testPathIgnorePatterns": [

storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"],
+  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
+}

storybook/index.android.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+require('regenerator-runtime');
 import StorybookUI from './storybook';
 
 export default StorybookUI;

storybook/index.ios.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+require('regenerator-runtime');
 import StorybookUI from './storybook';
 
 export default StorybookUI;

storybook/index.js

@@ -1,3 +0,0 @@
-import StorybookUI from './storybook';
-
-export default StorybookUI;

storybook/storybook.js

@@ -21,11 +21,14 @@ class StorybookUIHMRRoot extends Component {
 }
 
 Navigation.registerComponent('storybook.UI', () => StorybookUIHMRRoot);
-Navigation.startSingleScreenApp({
+Navigation.events().registerAppLaunchedListener(() => {
-	screen: {
+	Navigation.setRoot({
-		screen: 'storybook.UI',
+		root: {
-		title: 'Storybook'
+			component: {
-	}
+				name: 'storybook.UI'
+			}
+		}
+	});
 });
 
 export default StorybookUIHMRRoot;