Create class to manage navigation (#594)

* Add Navigation class

* Place Drawer.js logic inside of Navigation

* Load less views at startup

app/Drawer.js

@@ -1,39 +0,0 @@
-import { Navigation } from 'react-native-navigation';
-
-const DRAWER_ID = 'Sidebar';
-
-class Drawer {
-	constructor() {
-		this.visible = false;
-
-		Navigation.events().registerComponentDidAppearListener(({ componentId }) => {
-			if (componentId === DRAWER_ID) {
-				this.visible = true;
-			}
-		});
-
-		Navigation.events().registerComponentDidDisappearListener(({ componentId }) => {
-			if (componentId === DRAWER_ID) {
-				this.visible = false;
-			}
-		});
-	}
-
-	toggle() {
-		try {
-			const visibility = !this.visible;
-			Navigation.mergeOptions(DRAWER_ID, {
-				sideMenu: {
-					left: {
-						visible: visibility
-					}
-				}
-			});
-			this.visible = visibility;
-		} catch (error) {
-			console.warn(error);
-		}
-	}
-}
-
-export default new Drawer();

app/index.js

@@ -1,26 +1,30 @@
 import { Component } from 'react';
 import { Linking } from 'react-native';
-import { Navigation } from 'react-native-navigation';
-import { Provider } from 'react-redux';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import store from './lib/createStore';
 import { appInit } from './actions';
 import { iconsLoaded } from './Icons';
-import { registerScreens } from './views';
+import Navigation from './lib/Navigation';
 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.loadView('ProfileView');
+	Navigation.loadView('RoomsListHeaderView');
+	Navigation.loadView('RoomsListView');
+	Navigation.loadView('RoomView');
+	Navigation.loadView('RoomHeaderView');
+	Navigation.loadView('SettingsView');
+	Navigation.loadView('SidebarView');
 	Navigation.setRoot({
 		root: {
 			sideMenu: {
 				left: {
 					component: {
-						id: 'Sidebar',
+						id: 'SidebarView',
-						name: 'Sidebar'
+						name: 'SidebarView'
 					}
 				},
 				center: {
@@ -40,6 +44,7 @@ const startLogged = () => {
 };
 
 const startNotLogged = () => {
+	Navigation.loadView('OnboardingView');
 	Navigation.setRoot({
 		root: {
 			stack: {
@@ -58,12 +63,8 @@ const startNotLogged = () => {
 	});
 };
 
-let SetUsernameView = null;
 const startSetUsername = () => {
-	if (SetUsernameView == null) {
+	Navigation.loadView('SetUsernameView');
-		SetUsernameView = require('./views/SetUsernameView').default;
-		Navigation.registerComponentWithRedux('SetUsernameView', () => gestureHandlerRootHOC(SetUsernameView), Provider, store);
-	}
 	Navigation.setRoot({
 		root: {
 			stack: {
@@ -94,7 +95,6 @@ const handleOpenURL = ({ url }) => {
 	}
 };
 
-registerScreens(store);
 iconsLoaded();
 
 export default class App extends Component {

app/lib/Navigation.js

@@ -0,0 +1,259 @@
+import { Navigation } from 'react-native-navigation';
+import { Provider } from 'react-redux';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
+
+import store from './createStore';
+
+const DRAWER_ID = 'SidebarView';
+
+class NavigationManager {
+	constructor() {
+		this.views = {
+			OnboardingView: {
+				name: 'OnboardingView',
+				loaded: false,
+				require: () => require('../views/OnboardingView').default
+			},
+			ProfileView: {
+				name: 'ProfileView',
+				loaded: false,
+				require: () => require('../views/ProfileView').default
+			},
+			RoomsListHeaderView: {
+				name: 'RoomsListHeaderView',
+				loaded: false,
+				require: () => require('../views/RoomsListView/Header').default
+			},
+			RoomsListView: {
+				name: 'RoomsListView',
+				loaded: false,
+				require: () => require('../views/RoomsListView').default
+			},
+			RoomView: {
+				name: 'RoomView',
+				loaded: false,
+				require: () => require('../views/RoomView').default
+			},
+			RoomHeaderView: {
+				name: 'RoomHeaderView',
+				loaded: false,
+				require: () => require('../views/RoomView/Header').default
+			},
+			SettingsView: {
+				name: 'SettingsView',
+				loaded: false,
+				require: () => require('../views/SettingsView').default
+			},
+			SidebarView: {
+				name: 'SidebarView',
+				loaded: false,
+				require: () => require('../views/SidebarView').default
+			},
+			NewServerView: {
+				name: 'NewServerView',
+				loaded: false,
+				require: () => require('../views/NewServerView').default
+			},
+			CreateChannelView: {
+				name: 'CreateChannelView',
+				loaded: false,
+				require: () => require('../views/CreateChannelView').default
+			},
+			ForgotPasswordView: {
+				name: 'ForgotPasswordView',
+				loaded: false,
+				require: () => require('../views/ForgotPasswordView').default
+			},
+			LegalView: {
+				name: 'LegalView',
+				loaded: false,
+				require: () => require('../views/LegalView').default
+			},
+			LoginSignupView: {
+				name: 'LoginSignupView',
+				loaded: false,
+				require: () => require('../views/LoginSignupView').default
+			},
+			LoginView: {
+				name: 'LoginView',
+				loaded: false,
+				require: () => require('../views/LoginView').default
+			},
+			NewMessageView: {
+				name: 'NewMessageView',
+				loaded: false,
+				require: () => require('../views/NewMessageView').default
+			},
+			OAuthView: {
+				name: 'OAuthView',
+				loaded: false,
+				require: () => require('../views/OAuthView').default
+			},
+			PrivacyPolicyView: {
+				name: 'PrivacyPolicyView',
+				loaded: false,
+				require: () => require('../views/PrivacyPolicyView').default
+			},
+			RegisterView: {
+				name: 'RegisterView',
+				loaded: false,
+				require: () => require('../views/RegisterView').default
+			},
+			SelectedUsersView: {
+				name: 'SelectedUsersView',
+				loaded: false,
+				require: () => require('../views/SelectedUsersView').default
+			},
+			SetUsernameView: {
+				name: 'SetUsernameView',
+				loaded: false,
+				require: () => require('../views/SetUsernameView').default
+			},
+			TermsServiceView: {
+				name: 'TermsServiceView',
+				loaded: false,
+				require: () => require('../views/TermsServiceView').default
+			},
+			MentionedMessagesView: {
+				name: 'MentionedMessagesView',
+				loaded: false,
+				require: () => require('../views/MentionedMessagesView').default
+			},
+			PinnedMessagesView: {
+				name: 'PinnedMessagesView',
+				loaded: false,
+				require: () => require('../views/PinnedMessagesView').default
+			},
+			RoomActionsView: {
+				name: 'RoomActionsView',
+				loaded: false,
+				require: () => require('../views/RoomActionsView').default
+			},
+			RoomFilesView: {
+				name: 'RoomFilesView',
+				loaded: false,
+				require: () => require('../views/RoomFilesView').default
+			},
+			RoomInfoEditView: {
+				name: 'RoomInfoEditView',
+				loaded: false,
+				require: () => require('../views/RoomInfoEditView').default
+			},
+			RoomInfoView: {
+				name: 'RoomInfoView',
+				loaded: false,
+				require: () => require('../views/RoomInfoView').default
+			},
+			RoomMembersView: {
+				name: 'RoomMembersView',
+				loaded: false,
+				require: () => require('../views/RoomMembersView').default
+			},
+			SearchMessagesView: {
+				name: 'SearchMessagesView',
+				loaded: false,
+				require: () => require('../views/SearchMessagesView').default
+			},
+			SnippetedMessagesView: {
+				name: 'SnippetedMessagesView',
+				loaded: false,
+				require: () => require('../views/SnippetedMessagesView').default
+			},
+			StarredMessagesView: {
+				name: 'StarredMessagesView',
+				loaded: false,
+				require: () => require('../views/StarredMessagesView').default
+			}
+		};
+		this.isDrawerVisible = false;
+
+		Navigation.events().registerComponentDidAppearListener(({ componentId }) => {
+			if (componentId === DRAWER_ID) {
+				this.isDrawerVisible = true;
+			}
+		});
+
+		Navigation.events().registerComponentDidDisappearListener(({ componentId }) => {
+			if (componentId === DRAWER_ID) {
+				this.isDrawerVisible = false;
+			}
+		});
+	}
+
+	handleComponentName = (componentName) => {
+		if (!componentName) {
+			return console.error('componentName not found');
+		}
+	}
+
+	loadView = (componentName) => {
+		const view = this.views[componentName];
+		if (!view) {
+			return console.error('view not found');
+		}
+		if (!view.loaded) {
+			Navigation.registerComponentWithRedux(view.name, () => gestureHandlerRootHOC(view.require()), Provider, store);
+			view.loaded = true;
+		}
+	}
+
+	push = (...args) => {
+		let componentName;
+		try {
+			componentName = args[1].component.name;
+		} catch (error) {
+			return console.error(error);
+		}
+		this.handleComponentName(componentName);
+		this.loadView(componentName);
+		Navigation.push(...args);
+	}
+
+	showModal = (...args) => {
+		let componentName;
+		try {
+			componentName = args[0].stack.children[0].component.name;
+		} catch (error) {
+			return console.error(error);
+		}
+		this.handleComponentName(componentName);
+		this.loadView(componentName);
+		Navigation.showModal(...args);
+	}
+
+	pop = (...args) => Navigation.pop(...args);
+
+	popToRoot = (...args) => Navigation.popToRoot(...args);
+
+	dismissModal = (...args) => Navigation.dismissModal(...args);
+
+	dismissAllModals = (...args) => Navigation.dismissAllModals(...args);
+
+	events = (...args) => Navigation.events(...args);
+
+	mergeOptions = (...args) => Navigation.mergeOptions(...args);
+
+	setDefaultOptions = (...args) => Navigation.setDefaultOptions(...args);
+
+	setRoot = (...args) => Navigation.setRoot(...args);
+
+	setStackRoot = (...args) => Navigation.setStackRoot(...args);
+
+	toggleDrawer = () => {
+		try {
+			const visibility = !this.isDrawerVisible;
+			Navigation.mergeOptions(DRAWER_ID, {
+				sideMenu: {
+					left: {
+						visible: visibility
+					}
+				}
+			});
+			this.isDrawerVisible = visibility;
+		} catch (error) {
+			console.warn(error);
+		}
+	}
+}
+
+export default new NavigationManager();

app/sagas/deepLinking.js

@@ -3,8 +3,8 @@ import { delay } from 'redux-saga';
 import {
 	takeLatest, take, select, put, all, race
 } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import * as types from '../actions/actionsTypes';
 import { appStart, setStackRoot } from '../actions';
 import { selectServerRequest } from '../actions/server';

app/sagas/login.js

@@ -2,8 +2,8 @@ import { AsyncStorage } from 'react-native';
 import {
 	put, call, takeLatest, select
 } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import * as types from '../actions/actionsTypes';
 import { appStart } from '../actions';
 import { serverFinishAdd } from '../actions/server';

app/sagas/messages.js

@@ -1,7 +1,7 @@
 import { delay } from 'redux-saga';
 import { takeLatest, put, call } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import { MESSAGES } from '../actions/actionsTypes';
 import {
 	messagesSuccess,

app/sagas/rooms.js

@@ -3,8 +3,8 @@ import {
 	put, call, takeLatest, take, select, race, fork, cancel, takeEvery
 } from 'redux-saga/effects';
 import { delay } from 'redux-saga';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import * as types from '../actions/actionsTypes';
 import { addUserTyping, removeUserTyping } from '../actions/room';
 import { messagesRequest, editCancel, replyCancel } from '../actions/messages';

app/sagas/selectServer.js

@@ -1,9 +1,7 @@
 import { put, takeLatest } from 'redux-saga/effects';
 import { AsyncStorage, Alert } from 'react-native';
-import { Navigation } from 'react-native-navigation';
-import { Provider } from 'react-redux';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
+import Navigation from '../lib/Navigation';
 import { SERVER } from '../actions/actionsTypes';
 import * as actions from '../actions';
 import { serverFailure, selectServerRequest, selectServerSuccess } from '../actions/server';
@@ -12,12 +10,8 @@ import { setUser } from '../actions/login';
 import RocketChat from '../lib/rocketchat';
 import database from '../lib/realm';
 import log from '../utils/log';
-import store from '../lib/createStore';
 import I18n from '../i18n';
 
-let LoginSignupView = null;
-let LoginView = null;
-
 const handleSelectServer = function* handleSelectServer({ server }) {
 	try {
 		yield AsyncStorage.setItem('currentServer', server);
@@ -59,20 +53,12 @@ const handleServerRequest = function* handleServerRequest({ server }) {
 
 		const loginServicesLength = yield RocketChat.getLoginServices(server);
 		if (loginServicesLength === 0) {
-			if (LoginView == null) {
-				LoginView = require('../views/LoginView').default;
-				Navigation.registerComponentWithRedux('LoginView', () => gestureHandlerRootHOC(LoginView), Provider, store);
-			}
 			yield Navigation.push('NewServerView', {
 				component: {
 					name: 'LoginView'
 				}
 			});
 		} else {
-			if (LoginSignupView == null) {
-				LoginSignupView = require('../views/LoginSignupView').default;
-				Navigation.registerComponentWithRedux('LoginSignupView', () => gestureHandlerRootHOC(LoginSignupView), Provider, store);
-			}
 			yield Navigation.push('NewServerView', {
 				component: {
 					name: 'LoginSignupView'

app/views/CreateChannelView.js

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import {
 	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList
 } from 'react-native';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import Loading from '../containers/Loading';
 import LoggedView from './View';
 import { createChannelRequest as createChannelRequestAction } from '../actions/createChannel';

app/views/ForgotPasswordView.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, ScrollView } from 'react-native';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 
+import Navigation from '../lib/Navigation';
 import LoggedView from './View';
 import KeyboardView from '../presentation/KeyboardView';
 import TextInput from '../containers/TextInput';

app/views/LegalView.js

@@ -3,22 +3,17 @@ import PropTypes from 'prop-types';
 import {
 	Text, ScrollView, View, StyleSheet, Image, Dimensions
 } from 'react-native';
-import { Provider } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC, RectButton } from 'react-native-gesture-handler';
+import { RectButton } from 'react-native-gesture-handler';
 
+import Navigation from '../lib/Navigation';
 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';
 import { DARK_HEADER } from '../constants/headerOptions';
 
-let TermsServiceView = null;
-let PrivacyPolicyView = null;
-
 const styles = StyleSheet.create({
 	container: {
 		backgroundColor: '#f7f8fa',
@@ -98,15 +93,6 @@ export default class LegalView extends LoggedView {
 	}
 
 	onPressItem = ({ route }) => {
-		if (route === 'TermsServiceView' && TermsServiceView == null) {
-			TermsServiceView = require('./TermsServiceView').default;
-			Navigation.registerComponentWithRedux('TermsServiceView', () => gestureHandlerRootHOC(TermsServiceView), Provider, store);
-		}
-		if (route === 'PrivacyPolicyView' && PrivacyPolicyView == null) {
-			PrivacyPolicyView = require('./PrivacyPolicyView').default;
-			Navigation.registerComponentWithRedux('PrivacyPolicyView', () => gestureHandlerRootHOC(PrivacyPolicyView), Provider, store);
-		}
-
 		const { componentId } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/LoginSignupView.js

@@ -3,20 +3,19 @@ import PropTypes from 'prop-types';
 import {
 	Text, View, ScrollView, Image, StyleSheet, Dimensions, Animated, Easing
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import { Base64 } from 'js-base64';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC, RectButton, BorderlessButton } from 'react-native-gesture-handler';
+import { RectButton, BorderlessButton } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import LoggedView from './View';
 import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import random from '../utils/random';
 import Button from '../containers/Button';
 import I18n from '../i18n';
-import store from '../lib/createStore';
 import { DARK_HEADER } from '../constants/headerOptions';
 
 const styles = StyleSheet.create({
@@ -86,10 +85,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-let OAuthView = null;
-let LoginView = null;
-let RegisterView = null;
-let LegalView = null;
 const SERVICE_HEIGHT = 58;
 const SERVICES_COLLAPSED_HEIGHT = 174;
 
@@ -172,11 +167,6 @@ export default class LoginSignupView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'more') {
-			if (LegalView == null) {
-				LegalView = require('./LegalView').default;
-				Navigation.registerComponentWithRedux('LegalView', () => gestureHandlerRootHOC(LegalView), Provider, store);
-			}
-
 			Navigation.showModal({
 				stack: {
 					children: [{
@@ -267,11 +257,6 @@ export default class LoginSignupView extends LoggedView {
 	}
 
 	openOAuth = (oAuthUrl) => {
-		if (OAuthView == null) {
-			OAuthView = require('./OAuthView').default;
-			Navigation.registerComponentWithRedux('OAuthView', () => gestureHandlerRootHOC(OAuthView), Provider, store);
-		}
-
 		Navigation.showModal({
 			stack: {
 				children: [{
@@ -294,11 +279,6 @@ export default class LoginSignupView extends LoggedView {
 	}
 
 	login = () => {
-		if (LoginView == null) {
-			LoginView = require('./LoginView').default;
-			Navigation.registerComponentWithRedux('LoginView', () => gestureHandlerRootHOC(LoginView), Provider, store);
-		}
-
 		const { componentId, Site_Name } = this.props;
 		Navigation.push(componentId, {
 			component: {
@@ -315,11 +295,6 @@ export default class LoginSignupView extends LoggedView {
 	}
 
 	register = () => {
-		if (RegisterView == null) {
-			RegisterView = require('./RegisterView').default;
-			Navigation.registerComponentWithRedux('RegisterView', () => gestureHandlerRootHOC(RegisterView), Provider, store);
-		}
-
 		const { componentId, Site_Name } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/LoginView.js

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import {
 	Keyboard, Text, ScrollView, View, StyleSheet, Alert, LayoutAnimation, Dimensions
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import { Answers } from 'react-native-fabric';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import KeyboardView from '../presentation/KeyboardView';
 import TextInput from '../containers/TextInput';
 import Button from '../containers/Button';
@@ -17,14 +16,9 @@ import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import LoggedView from './View';
 import I18n from '../i18n';
-import store from '../lib/createStore';
 import { DARK_HEADER } from '../constants/headerOptions';
 import { loginRequest as loginRequestAction } from '../actions/login';
 
-let RegisterView = null;
-let ForgotPasswordView = null;
-let LegalView = null;
-
 const styles = StyleSheet.create({
 	buttonsContainer: {
 		flexDirection: 'column',
@@ -184,11 +178,6 @@ export default class LoginView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'more') {
-			if (LegalView == null) {
-				LegalView = require('./LegalView').default;
-				Navigation.registerComponentWithRedux('LegalView', () => gestureHandlerRootHOC(LegalView), Provider, store);
-			}
-
 			Navigation.showModal({
 				stack: {
 					children: [{
@@ -239,11 +228,6 @@ export default class LoginView extends LoggedView {
 	}
 
 	register = () => {
-		if (RegisterView == null) {
-			RegisterView = require('./RegisterView').default;
-			Navigation.registerComponentWithRedux('RegisterView', () => gestureHandlerRootHOC(RegisterView), Provider, store);
-		}
-
 		const { componentId, Site_Name } = this.props;
 		Navigation.push(componentId, {
 			component: {
@@ -260,11 +244,6 @@ export default class LoginView extends LoggedView {
 	}
 
 	forgotPassword = () => {
-		if (ForgotPasswordView == null) {
-			ForgotPasswordView = require('./ForgotPasswordView').default;
-			Navigation.registerComponentWithRedux('ForgotPasswordView', () => gestureHandlerRootHOC(ForgotPasswordView), Provider, store);
-		}
-
 		const { componentId, Site_Name } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/NewMessageView.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import {
 	View, StyleSheet, FlatList, Text, Image, Dimensions
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import database from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 import UserItem from '../presentation/UserItem';
@@ -19,7 +18,6 @@ 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';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -49,8 +47,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-let SelectedUsersView = null;
-
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
 }))
@@ -131,11 +127,6 @@ export default class NewMessageView extends LoggedView {
 	}
 
 	createChannel = () => {
-		if (SelectedUsersView == null) {
-			SelectedUsersView = require('./SelectedUsersView').default;
-			Navigation.registerComponentWithRedux('SelectedUsersView', () => gestureHandlerRootHOC(SelectedUsersView), Provider, store);
-		}
-
 		const { componentId } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/NewServerView.js

@@ -5,9 +5,9 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import Icon from 'react-native-vector-icons/Ionicons';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 
+import Navigation from '../lib/Navigation';
 import { serverRequest } from '../actions/server';
 import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';

app/views/OAuthView.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WebView, Dimensions } from 'react-native';
 import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import RocketChat from '../lib/rocketchat';
 import I18n from '../i18n';
 import { DARK_HEADER } from '../constants/headerOptions';

app/views/OnboardingView/index.js

@@ -4,10 +4,8 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';
 import { appStart as appStartAction } from '../../actions';
@@ -17,11 +15,9 @@ import Button from './Button';
 import styles from './styles';
 import LoggedView from '../View';
 import { isIOS, isNotch } from '../../utils/deviceInfo';
-import store from '../../lib/createStore';
 import EventEmitter from '../../utils/events';
 import { LIGHT_HEADER } from '../../constants/headerOptions';
-
+import Navigation from '../../lib/Navigation';
-let NewServerView = null;
 
 @connect(state => ({
 	currentServer: state.server.server,
@@ -98,11 +94,6 @@ export default class OnboardingView extends LoggedView {
 	}
 
 	newServer = (server) => {
-		if (NewServerView == null) {
-			NewServerView = require('../NewServerView').default;
-			Navigation.registerComponentWithRedux('NewServerView', () => gestureHandlerRootHOC(NewServerView), Provider, store);
-		}
-
 		const { componentId } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/ProfileView/index.js

@@ -9,10 +9,10 @@ import SHA256 from 'js-sha256';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ImagePicker from 'react-native-image-crop-picker';
 import RNPickerSelect from 'react-native-picker-select';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
+import Navigation from '../../lib/Navigation';
 import LoggedView from '../View';
 import KeyboardView from '../../presentation/KeyboardView';
 import sharedStyles from '../Styles';
@@ -26,7 +26,6 @@ import I18n from '../../i18n';
 import Button from '../../containers/Button';
 import Avatar from '../../containers/Avatar';
 import Touch from '../../utils/touch';
-import Drawer from '../../Drawer';
 import { appStart as appStartAction } from '../../actions';
 import { setUser as setUserAction } from '../../actions/login';
 
@@ -131,7 +130,7 @@ export default class ProfileView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'settings') {
-			Drawer.toggle();
+			Navigation.toggleDrawer();
 		}
 	}
 

app/views/RegisterView.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import {
 	Keyboard, Text, ScrollView, Dimensions, Alert
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
+import Navigation from '../lib/Navigation';
 import TextInput from '../containers/TextInput';
 import Button from '../containers/Button';
 import KeyboardView from '../presentation/KeyboardView';
@@ -15,16 +14,11 @@ import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import LoggedView from './View';
 import I18n from '../i18n';
-import store from '../lib/createStore';
 import { DARK_HEADER } from '../constants/headerOptions';
 import RocketChat from '../lib/rocketchat';
 import { loginRequest as loginRequestAction } from '../actions/login';
 import isValidEmail from '../utils/isValidEmail';
 
-let TermsServiceView = null;
-let PrivacyPolicyView = null;
-let LegalView = null;
-
 const shouldUpdateState = ['name', 'email', 'password', 'username', 'saving'];
 
 @connect(null, dispatch => ({
@@ -99,11 +93,6 @@ export default class RegisterView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'more') {
-			if (LegalView == null) {
-				LegalView = require('./LegalView').default;
-				Navigation.registerComponentWithRedux('LegalView', () => gestureHandlerRootHOC(LegalView), Provider, store);
-			}
-
 			Navigation.showModal({
 				stack: {
 					children: [{
@@ -147,11 +136,6 @@ export default class RegisterView extends LoggedView {
 	}
 
 	termsService = () => {
-		if (TermsServiceView == null) {
-			TermsServiceView = require('./TermsServiceView').default;
-			Navigation.registerComponentWithRedux('TermsServiceView', () => gestureHandlerRootHOC(TermsServiceView), Provider, store);
-		}
-
 		const { componentId } = this.props;
 		Navigation.push(componentId, {
 			component: {
@@ -168,11 +152,6 @@ export default class RegisterView extends LoggedView {
 	}
 
 	privacyPolicy = () => {
-		if (PrivacyPolicyView == null) {
-			PrivacyPolicyView = require('./PrivacyPolicyView').default;
-			Navigation.registerComponentWithRedux('PrivacyPolicyView', () => gestureHandlerRootHOC(PrivacyPolicyView), Provider, store);
-		}
-
 		const { componentId } = this.props;
 		Navigation.push(componentId, {
 			component: {

app/views/RoomActionsView/index.js

@@ -5,12 +5,11 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
+import Navigation from '../../lib/Navigation';
 import { leaveRoom as leaveRoomAction } from '../../actions/room';
 import LoggedView from '../View';
 import styles from './styles';
@@ -24,12 +23,9 @@ import log from '../../utils/log';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import I18n from '../../i18n';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
-import store from '../../lib/createStore';
 
 const renderSeparator = () => <View style={styles.separator} />;
 
-const modules = {};
-
 @connect(state => ({
 	userId: state.login.user && state.login.user.id,
 	username: state.login.user && state.login.user.username,
@@ -119,11 +115,6 @@ export default class RoomActionsView extends LoggedView {
 
 	onPressTouchable = (item) => {
 		if (item.route) {
-			if (modules[item.route] == null) {
-				modules[item.route] = item.require();
-				Navigation.registerComponentWithRedux(item.route, () => gestureHandlerRootHOC(modules[item.route]), Provider, store);
-			}
-
 			const { componentId } = this.props;
 			Navigation.push(componentId, {
 				component: {
@@ -196,8 +187,7 @@ export default class RoomActionsView extends LoggedView {
 				name: I18n.t('Room_Info'),
 				route: 'RoomInfoView',
 				params: { rid },
-				testID: 'room-actions-info',
+				testID: 'room-actions-info'
-				require: () => require('../RoomInfoView').default
 			}],
 			renderItem: this.renderRoomInfo
 		}, {
@@ -222,30 +212,26 @@ export default class RoomActionsView extends LoggedView {
 					icon: 'ios-attach',
 					name: I18n.t('Files'),
 					route: 'RoomFilesView',
-					testID: 'room-actions-files',
+					testID: 'room-actions-files'
-					require: () => require('../RoomFilesView').default
 				},
 				{
 					icon: 'ios-at',
 					name: I18n.t('Mentions'),
 					route: 'MentionedMessagesView',
-					testID: 'room-actions-mentioned',
+					testID: 'room-actions-mentioned'
-					require: () => require('../MentionedMessagesView').default
 				},
 				{
 					icon: 'ios-star',
 					name: I18n.t('Starred'),
 					route: 'StarredMessagesView',
-					testID: 'room-actions-starred',
+					testID: 'room-actions-starred'
-					require: () => require('../StarredMessagesView').default
 				},
 				{
 					icon: 'ios-search',
 					name: I18n.t('Search'),
 					route: 'SearchMessagesView',
 					params: { rid },
-					testID: 'room-actions-search',
+					testID: 'room-actions-search'
-					require: () => require('../SearchMessagesView').default
 				},
 				{
 					icon: 'ios-share',
@@ -257,16 +243,14 @@ export default class RoomActionsView extends LoggedView {
 					icon: 'ios-pin',
 					name: I18n.t('Pinned'),
 					route: 'PinnedMessagesView',
-					testID: 'room-actions-pinned',
+					testID: 'room-actions-pinned'
-					require: () => require('../PinnedMessagesView').default
 				},
 				{
 					icon: 'ios-code',
 					name: I18n.t('Snippets'),
 					route: 'SnippetedMessagesView',
 					params: { rid },
-					testID: 'room-actions-snippeted',
+					testID: 'room-actions-snippeted'
-					require: () => require('../SnippetedMessagesView').default
 				}
 			],
 			renderItem: this.renderItem
@@ -296,8 +280,7 @@ export default class RoomActionsView extends LoggedView {
 					description: membersCount > 0 ? `${ membersCount } ${ I18n.t('members') }` : null,
 					route: 'RoomMembersView',
 					params: { rid },
-					testID: 'room-actions-members',
+					testID: 'room-actions-members'
-					require: () => require('../RoomMembersView').default
 				});
 			}
 
@@ -317,8 +300,7 @@ export default class RoomActionsView extends LoggedView {
 							}
 						}
 					},
-					testID: 'room-actions-add-user',
+					testID: 'room-actions-add-user'
-					require: () => require('../SelectedUsersView').default
 				});
 			}
 			sections[2].data = [...actions, ...sections[2].data];

app/views/RoomInfoView/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, Text, ScrollView } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
 import moment from 'moment';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 
+import Navigation from '../../lib/Navigation';
 import LoggedView from '../View';
 import Status from '../../containers/status';
 import Avatar from '../../containers/Avatar';
@@ -19,7 +18,6 @@ import log from '../../utils/log';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import I18n from '../../i18n';
 import { iconsMap } from '../../Icons';
-import store from '../../lib/createStore';
 
 const PERMISSION_EDIT_ROOM = 'edit-room';
 
@@ -34,8 +32,6 @@ const getRoomTitle = room => (room.t === 'd'
 	)
 );
 
-let RoomInfoEditView = null;
-
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
 	userId: state.login.user && state.login.user.id,
@@ -165,11 +161,6 @@ export default class RoomInfoView extends LoggedView {
 	navigationButtonPressed = ({ buttonId }) => {
 		const { rid, componentId } = this.props;
 		if (buttonId === 'edit') {
-			if (RoomInfoEditView == null) {
-				RoomInfoEditView = require('../RoomInfoEditView').default;
-				Navigation.registerComponentWithRedux('RoomInfoEditView', () => gestureHandlerRootHOC(RoomInfoEditView), Provider, store);
-			}
-
 			Navigation.push(componentId, {
 				component: {
 					id: 'RoomInfoEditView',

app/views/RoomMembersView/index.js

@@ -5,10 +5,10 @@ import {
 } from 'react-native';
 import ActionSheet from 'react-native-action-sheet';
 import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
+import Navigation from '../../lib/Navigation';
 import LoggedView from '../View';
 import styles from './styles';
 import UserItem from '../../presentation/UserItem';

app/views/RoomView/index.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import {
 	Text, View, LayoutAnimation, ActivityIndicator
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { RectButton, gestureHandlerRootHOC } from 'react-native-gesture-handler';
+import { RectButton } from 'react-native-gesture-handler';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 
+import Navigation from '../../lib/Navigation';
 import { openRoom as openRoomAction, closeRoom as closeRoomAction, setLastOpen as setLastOpenAction } from '../../actions/room';
 import { toggleReactionPicker as toggleReactionPickerAction, actionsShow as actionsShowAction } from '../../actions/messages';
 import LoggedView from '../View';
@@ -25,11 +25,8 @@ 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';
 
-let RoomActionsView = null;
-
 @connect(state => ({
 	user: {
 		id: state.login.user && state.login.user.id,
@@ -224,11 +221,6 @@ export default class RoomView extends LoggedView {
 		const { componentId } = this.props;
 
 		if (buttonId === 'more') {
-			if (RoomActionsView == null) {
-				RoomActionsView = require('../RoomActionsView').default;
-				Navigation.registerComponentWithRedux('RoomActionsView', () => gestureHandlerRootHOC(RoomActionsView), Provider, store);
-			}
-
 			Navigation.push(componentId, {
 				component: {
 					id: 'RoomActionsView',

app/views/RoomsListView/ServerDropdown.js

@@ -4,10 +4,10 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import * as SDK from '@rocket.chat/sdk';
 import equal from 'deep-equal';
 
+import Navigation from '../../lib/Navigation';
 import { toggleServerDropdown as toggleServerDropdownAction } from '../../actions/rooms';
 import { selectServerRequest as selectServerRequestAction } from '../../actions/server';
 import { appStart as appStartAction } from '../../actions';

app/views/RoomsListView/index.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import {
 	View, FlatList, BackHandler, ActivityIndicator, Text, Image, Dimensions, ScrollView, Keyboard, LayoutAnimation
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
 import { isEqual } from 'lodash';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
+import Navigation from '../../lib/Navigation';
 import SearchBox from '../../containers/SearchBox';
 import ConnectionBadge from '../../containers/ConnectionBadge';
 import database from '../../lib/realm';
@@ -23,8 +22,6 @@ import ServerDropdown from './ServerDropdown';
 import Touch from '../../utils/touch';
 import { toggleSortDropdown as toggleSortDropdownAction, openSearchHeader as openSearchHeaderAction, closeSearchHeader as closeSearchHeaderAction } from '../../actions/rooms';
 import { appStart as appStartAction } from '../../actions';
-import store from '../../lib/createStore';
-import Drawer from '../../Drawer';
 import debounce from '../../utils/debounce';
 import { isIOS, isAndroid } from '../../utils/deviceInfo';
 
@@ -53,8 +50,6 @@ if (isAndroid) {
 	});
 }
 
-let NewMessageView = null;
-
 @connect(state => ({
 	userId: state.login.user && state.login.user.id,
 	server: state.server.server,
@@ -247,11 +242,6 @@ export default class RoomsListView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'newMessage') {
-			if (NewMessageView == null) {
-				NewMessageView = require('../NewMessageView').default;
-				Navigation.registerComponentWithRedux('NewMessageView', () => gestureHandlerRootHOC(NewMessageView), Provider, store);
-			}
-
 			Navigation.showModal({
 				stack: {
 					children: [{
@@ -272,7 +262,7 @@ export default class RoomsListView extends LoggedView {
 				}
 			});
 		} else if (buttonId === 'settings') {
-			Drawer.toggle();
+			Navigation.toggleDrawer();
 		} else if (buttonId === 'search') {
 			this.initSearchingAndroid();
 		} else if (buttonId === 'back') {

app/views/SelectedUsersView.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import {
 	View, StyleSheet, FlatList, LayoutAnimation
 } from 'react-native';
-import { connect, Provider } from 'react-redux';
+import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import {
 	addUser as addUserAction, removeUser as removeUserAction, reset as resetAction, setLoading as setLoadingAction
 } from '../actions/selectedUsers';
@@ -23,7 +22,6 @@ 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';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -38,8 +36,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-let CreateChannelView = null;
-
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
 	users: state.selectedUsers.users,
@@ -127,12 +123,6 @@ export default class SelectedUsersView extends LoggedView {
 			const { nextAction, setLoadingInvite } = this.props;
 			if (nextAction === 'CREATE_CHANNEL') {
 				const { componentId } = this.props;
-
-				if (CreateChannelView == null) {
-					CreateChannelView = require('./CreateChannelView').default;
-					Navigation.registerComponentWithRedux('CreateChannelView', () => gestureHandlerRootHOC(CreateChannelView), Provider, store);
-				}
-
 				Navigation.push(componentId, {
 					component: {
 						name: 'CreateChannelView'

app/views/SetUsernameView.js

@@ -5,8 +5,8 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import SafeAreaView from 'react-native-safe-area-view';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import { loginRequest as loginRequestAction } from '../actions/login';
 import TextInput from '../containers/TextInput';
 import Button from '../containers/Button';

app/views/SettingsView/index.js

@@ -5,9 +5,9 @@ import {
 } from 'react-native';
 import RNPickerSelect from 'react-native-picker-select';
 import { connect } from 'react-redux';
-import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
 
+import Navigation from '../../lib/Navigation';
 import LoggedView from '../View';
 import RocketChat from '../../lib/rocketchat';
 import KeyboardView from '../../presentation/KeyboardView';
@@ -21,7 +21,6 @@ import { showErrorAlert, showToast } from '../../utils/info';
 import log from '../../utils/log';
 import { setUser as setUserAction } from '../../actions/login';
 import { appStart as appStartAction } from '../../actions';
-import Drawer from '../../Drawer';
 
 @connect(state => ({
 	userLanguage: state.login.user && state.login.user.language
@@ -106,7 +105,7 @@ export default class SettingsView extends LoggedView {
 
 	navigationButtonPressed = ({ buttonId }) => {
 		if (buttonId === 'settings') {
-			Drawer.toggle();
+			Navigation.toggleDrawer();
 		}
 	}
 

app/views/SidebarView.js

@@ -5,13 +5,13 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { Navigation } from 'react-native-navigation';
 import equal from 'deep-equal';
 
+import Navigation from '../lib/Navigation';
 import { setStackRoot as setStackRootAction } from '../actions';
 import { logout as logoutAction } from '../actions/login';
-import Avatar from './Avatar';
+import Avatar from '../containers/Avatar';
-import Status from './status';
+import Status from '../containers/status';
 import Touch from '../utils/touch';
 import { STATUS_COLORS } from '../constants/colors';
 import RocketChat from '../lib/rocketchat';
@@ -19,7 +19,6 @@ import log from '../utils/log';
 import I18n from '../i18n';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import { getReadableVersion } from '../utils/deviceInfo';
-import Drawer from '../Drawer';
 
 const styles = StyleSheet.create({
 	container: {
@@ -210,7 +209,7 @@ export default class Sidebar extends Component {
 	}
 
 	closeDrawer = () => {
-		Drawer.toggle();
+		Navigation.toggleDrawer();
 	}
 
 	toggleStatus = () => {
@@ -327,7 +326,7 @@ export default class Sidebar extends Component {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar' style={styles.container}>
+			<SafeAreaView testID='sidebar-view' style={styles.container}>
 				<ScrollView style={styles.container} {...scrollPersistTaps}>
 					<Touch
 						onPress={() => this.toggleStatus()}

app/views/index.js

@@ -1,23 +0,0 @@
-import { Navigation } from 'react-native-navigation';
-import { Provider } from 'react-redux';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
-
-import OnboardingView from './OnboardingView';
-import ProfileView from './ProfileView';
-import RoomsListHeaderView from './RoomsListView/Header';
-import RoomsListView from './RoomsListView';
-import RoomView from './RoomView';
-import RoomHeaderView from './RoomView/Header';
-import SettingsView from './SettingsView';
-import Sidebar from '../containers/Sidebar';
-
-export const registerScreens = (store) => {
-	Navigation.registerComponentWithRedux('OnboardingView', () => gestureHandlerRootHOC(OnboardingView), Provider, store);
-	Navigation.registerComponentWithRedux('ProfileView', () => gestureHandlerRootHOC(ProfileView), Provider, store);
-	Navigation.registerComponentWithRedux('RoomsListHeaderView', () => gestureHandlerRootHOC(RoomsListHeaderView), Provider, store);
-	Navigation.registerComponentWithRedux('RoomsListView', () => gestureHandlerRootHOC(RoomsListView), Provider, store);
-	Navigation.registerComponentWithRedux('RoomView', () => gestureHandlerRootHOC(RoomView), Provider, store);
-	Navigation.registerComponentWithRedux('RoomHeaderView', () => gestureHandlerRootHOC(RoomHeaderView), Provider, store);
-	Navigation.registerComponentWithRedux('SettingsView', () => gestureHandlerRootHOC(SettingsView), Provider, store);
-	Navigation.registerComponentWithRedux('Sidebar', () => gestureHandlerRootHOC(Sidebar), Provider, store);
-};

e2e/06-roomslist.spec.js

@@ -63,7 +63,7 @@ describe('Rooms list screen', () => {
 		});
 
 		// Usage - Sidebar
-		describe('Sidebar', async() => {
+		describe('SidebarView', async() => {
 			it('should navigate to add server', async() => {
 				await element(by.id('rooms-list-header-server-dropdown-button')).tap();
 				await waitFor(element(by.id('rooms-list-header-server-dropdown'))).toBeVisible().withTimeout(2000);
@@ -79,7 +79,7 @@ describe('Rooms list screen', () => {
 	
 			it('should logout', async() => {
 				await element(by.id('rooms-list-view-sidebar')).tap();
-				await waitFor(element(by.id('sidebar'))).toBeVisible().withTimeout(2000);
+				await waitFor(element(by.id('sidebar-view'))).toBeVisible().withTimeout(2000);
 				await waitFor(element(by.id('sidebar-logout'))).toBeVisible().withTimeout(2000);
 				await element(by.id('sidebar-logout')).tap();
 				await waitFor(element(by.id('onboarding-view'))).toBeVisible().withTimeout(60000);

e2e/13-profile.spec.js

@@ -10,7 +10,7 @@ const scrollDown = 200;
 describe('Profile screen', () => {
 	before(async() => {
 		await element(by.id('rooms-list-view-sidebar')).tap();
-		await waitFor(element(by.id('sidebar'))).toBeVisible().withTimeout(2000);
+		await waitFor(element(by.id('sidebar-view'))).toBeVisible().withTimeout(2000);
 		await waitFor(element(by.id('sidebar-profile'))).toBeVisible().withTimeout(2000);
 		// await expect(element(by.id('sidebar-profile'))).toBeVisible();
 		await element(by.id('sidebar-profile')).tap();

e2e/helpers/app.js

@@ -36,7 +36,7 @@ async function login() {
 
 async function logout() {
     await element(by.id('rooms-list-view-sidebar')).tap();
-    await waitFor(element(by.id('sidebar'))).toBeVisible().withTimeout(2000);
+    await waitFor(element(by.id('sidebar-view'))).toBeVisible().withTimeout(2000);
 	await waitFor(element(by.id('sidebar-logout'))).toBeVisible().withTimeout(2000);
     await element(by.id('sidebar-logout')).tap();
     await waitFor(element(by.id('onboarding-view'))).toBeVisible().withTimeout(2000);