From 796c82a9669ac1a3a68a1398b84e7ad3e7e8d863 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 21 May 2020 11:08:53 -0300
Subject: [PATCH] compiling

---
 app/containers/FormContainer.js               |   4 +-
 app/containers/LoginServices.js               |   2 +-
 app/index.js                                  | 286 ++++++-
 app/index.js_                                 | 753 ------------------
 app/lib/ModalNavigation.js                    |   8 +-
 app/lib/Navigation.js                         |  10 +-
 app/lib/ShareNavigation.js                    |   2 +-
 app/share.js                                  | 179 +++++
 app/share.js_                                 | 135 ----
 app/{split.js_ => split.js}                   |   0
 app/stacks/InsideStack.js                     | 300 +++++++
 app/stacks/OutsideStack.js                    |  84 ++
 app/{tablet.js_ => tablet.js}                 | 121 ++-
 app/views/AdminPanelView/index.js             |   2 +-
 app/views/AutoTranslateView/index.js          |   4 +-
 app/views/CreateChannelView.js                |   4 +-
 app/views/CreateDiscussionView/index.js       |   4 +-
 app/views/DefaultBrowserView.js               |   4 +-
 app/views/DirectoryView/index.js              |   4 +-
 app/views/InviteUsersEditView/index.js        |   4 +-
 app/views/InviteUsersView/index.js            |   4 +-
 app/views/LanguageView/index.js               |   4 +-
 app/views/LegalView.js                        |   4 +-
 app/views/LivechatEditView.js                 |   4 +-
 app/views/MessagesView/index.js               |   4 +-
 app/views/NewMessageView.js                   |   4 +-
 .../NotificationPreferencesView/index.js      |   4 +-
 app/views/ProfileView/index.js                |  22 +-
 app/views/ReadReceiptView/index.js            |   4 +-
 app/views/RoomActionsView/index.js            |   4 +-
 app/views/RoomInfoEditView/index.js           |   4 +-
 app/views/RoomInfoView/index.js               |   4 +-
 app/views/RoomMembersView/index.js            |   4 +-
 app/views/RoomView/Header/RoomHeaderLeft.js   |  19 +-
 app/views/RoomView/index.js                   |   4 +-
 app/views/RoomsListView/ServerDropdown.js     |   2 +-
 app/views/RoomsListView/index.js              |   5 +-
 app/views/ScreenLockConfigView.js             |   4 +-
 app/views/SearchMessagesView/index.js         |   4 +-
 app/views/SelectServerView.js                 |   4 +-
 app/views/SelectedUsersView.js                |   4 +-
 app/views/SetUsernameView.js                  |   4 +-
 app/views/SettingsView/index.js               |   4 +-
 app/views/ShareListView/index.js              |   4 +-
 app/views/StatusView.js                       |   4 +-
 app/views/ThemeView.js                        |   4 +-
 app/views/ThreadMessagesView/index.js         |   4 +-
 package.json                                  |   2 +
 yarn.lock                                     |  13 +
 49 files changed, 988 insertions(+), 1077 deletions(-)
 delete mode 100644 app/index.js_
 create mode 100644 app/share.js
 delete mode 100644 app/share.js_
 rename app/{split.js_ => split.js} (100%)
 create mode 100644 app/stacks/InsideStack.js
 create mode 100644 app/stacks/OutsideStack.js
 rename app/{tablet.js_ => tablet.js} (63%)

diff --git a/app/containers/FormContainer.js b/app/containers/FormContainer.js
index 763e98df6..7938a5f9e 100644
--- a/app/containers/FormContainer.js
+++ b/app/containers/FormContainer.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View, SafeAreaView } from 'react-native';
 import PropTypes from 'prop-types';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
diff --git a/app/containers/LoginServices.js b/app/containers/LoginServices.js
index 2cf06d327..9bedbed87 100644
--- a/app/containers/LoginServices.js
+++ b/app/containers/LoginServices.js
@@ -5,7 +5,7 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
-import { withNavigation } from 'react-navigation';
+import { withNavigation } from '@react-navigation/compat';
 
 import { withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
diff --git a/app/index.js b/app/index.js
index 1e4765b96..f4a84363f 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,41 +1,261 @@
-import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import React, { useState } from 'react';
+import { Linking } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import RNBootSplash from 'react-native-bootsplash';
-RNBootSplash.hide();
+import { AppearanceProvider } from 'react-native-appearance';
+import { Provider } from 'react-redux';
+import RNUserDefaults from 'rn-user-defaults';
+import KeyCommands, { KeyCommandsEmitter } from 'react-native-keycommands';
+import RNScreens from 'react-native-screens';
 
-function HomeScreen({ navigation }) {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
-    </View>
-  );
-}
+import {
+	defaultTheme,
+	newThemeState,
+	subscribeTheme,
+	unsubscribeTheme
+} from './utils/theme';
+import EventEmitter from './utils/events';
+import { appInit, appInitLocalSettings } from './actions';
+import { deepLinkingOpen } from './actions/deepLinking';
+import Navigation from './lib/Navigation';
+import parseQuery from './lib/methods/helpers/parseQuery';
+import { initializePushNotifications, onNotification } from './notifications/push';
+import store from './lib/createStore';
+import { loggerConfig, analytics } from './utils/log';
+import { ThemeContext } from './theme';
+import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
+import { MIN_WIDTH_SPLIT_LAYOUT } from './constants/tablet';
+import {
+	isTablet, isIOS, setWidth, supportSystemTheme
+} from './utils/deviceInfo';
+import { KEY_COMMAND } from './commands';
+import Tablet, { initTabletNav } from './tablet';
+import { SplitContext } from './split';
+import { defaultHeader, onNavigationStateChange } from './utils/navigation';
 
-function DetailsScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Details Screen</Text>
-    </View>
-  );
-}
+// App Stack
+import AuthLoadingView from './views/AuthLoadingView';
 
+// SetUsername Stack
+import SetUsernameView from './views/SetUsernameView';
+
+import OutsideStack from './stacks/OutsideStack';
+import InsideStack from './stacks/InsideStack';
+
+RNScreens.enableScreens();
+
+const parseDeepLinking = (url) => {
+	if (url) {
+		url = url.replace(/rocketchat:\/\/|https:\/\/go.rocket.chat\//, '');
+		const regex = /^(room|auth|invite)\?/;
+		if (url.match(regex)) {
+			url = url.replace(regex, '').trim();
+			if (url) {
+				return parseQuery(url);
+			}
+		}
+	}
+	return null;
+};
+
+// SetUsernameStack
+const SetUsername = createStackNavigator();
+const SetUsernameStack = () => (
+	<SetUsername.Navigator screenOptions={defaultHeader}>
+		<SetUsername.Screen
+			name='SetUsernameView'
+			component={SetUsernameView}
+		/>
+	</SetUsername.Navigator>
+);
+
+const AuthContext = React.createContext();
+
+// App
 const Stack = createStackNavigator();
+export const App = () => {
+	const [loading] = useState(false);
 
-function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} />
-        <Stack.Screen name="Details" component={DetailsScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
+	return (
+		<NavigationContainer
+			ref={(navigatorRef) => {
+				Navigation.setTopLevelNavigator(navigatorRef);
+			}}
+			onNavigationStateChange={onNavigationStateChange}
+		>
+			<AuthContext.Provider value={{}}>
+				<Stack.Navigator screenOptions={{ headerShown: false }}>
+					{loading ? (
+						<Stack.Screen
+							name='AuthLoading'
+							component={AuthLoadingView}
+						/>
+					) : (
+						<>
+							<Stack.Screen
+								name='OutsideStack'
+								component={OutsideStack}
+							/>
+							<Stack.Screen
+								name='InsideStack'
+								component={InsideStack}
+							/>
+							<Stack.Screen
+								name='SetUsernameStack'
+								component={SetUsernameStack}
+							/>
+						</>
+					)}
+				</Stack.Navigator>
+			</AuthContext.Provider>
+		</NavigationContainer>
+	);
+};
+
+export default class Root extends React.Component {
+	constructor(props) {
+		super(props);
+		this.init();
+		this.initCrashReport();
+		this.state = {
+			split: false,
+			inside: false,
+			showModal: false,
+			theme: defaultTheme(),
+			themePreferences: {
+				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
+				darkLevel: 'dark'
+			}
+		};
+		if (isTablet) {
+			this.initTablet();
+		}
+	}
+
+	componentDidMount() {
+		this.listenerTimeout = setTimeout(() => {
+			Linking.addEventListener('url', ({ url }) => {
+				const parsedDeepLinkingURL = parseDeepLinking(url);
+				if (parsedDeepLinkingURL) {
+					store.dispatch(deepLinkingOpen(parsedDeepLinkingURL));
+				}
+			});
+		}, 5000);
+	}
+
+	// eslint-disable-next-line no-unused-vars
+	componentDidUpdate(_, prevState) {
+		if (isTablet) {
+			const { split, inside } = this.state;
+			if (inside && split !== prevState.split) {
+				// Reset app on split mode changes
+				Navigation.navigate('RoomsListView');
+				this.closeModal();
+			}
+		}
+	}
+
+	componentWillUnmount() {
+		clearTimeout(this.listenerTimeout);
+
+		unsubscribeTheme();
+
+		if (this.onKeyCommands && this.onKeyCommands.remove) {
+			this.onKeyCommands.remove();
+		}
+	}
+
+	init = async() => {
+		if (isIOS) {
+			await RNUserDefaults.setName('group.ios.chat.rocket');
+		}
+		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
+		const [notification, deepLinking] = await Promise.all([initializePushNotifications(), Linking.getInitialURL()]);
+		const parsedDeepLinkingURL = parseDeepLinking(deepLinking);
+		store.dispatch(appInitLocalSettings());
+		if (notification) {
+			onNotification(notification);
+		} else if (parsedDeepLinkingURL) {
+			store.dispatch(deepLinkingOpen(parsedDeepLinkingURL));
+		} else {
+			store.dispatch(appInit());
+		}
+	}
+
+	setTheme = (newTheme = {}) => {
+		// change theme state
+		this.setState(prevState => newThemeState(prevState, newTheme), () => {
+			const { themePreferences } = this.state;
+			// subscribe to Appearance changes
+			subscribeTheme(themePreferences, this.setTheme);
+		});
+	}
+
+	initTablet = async() => {
+		initTabletNav(args => this.setState(args));
+		await KeyCommands.setKeyCommands([]);
+		this.onKeyCommands = KeyCommandsEmitter.addListener(
+			'onKeyCommand',
+			command => EventEmitter.emit(KEY_COMMAND, { event: command })
+		);
+	}
+
+	initCrashReport = () => {
+		RocketChat.getAllowCrashReport()
+			.then((allowCrashReport) => {
+				if (!allowCrashReport) {
+					loggerConfig.autoNotify = false;
+					loggerConfig.registerBeforeSendCallback(() => false);
+					analytics().setAnalyticsCollectionEnabled(false);
+				}
+			});
+	}
+
+	onLayout = ({ nativeEvent: { layout: { width } } }) => (isTablet ? this.setSplit(width) : null);
+
+	setSplit = (width) => {
+		this.setState({ split: width > MIN_WIDTH_SPLIT_LAYOUT });
+		setWidth(width);
+	}
+
+	closeModal = () => this.setState({ showModal: false });
+
+	render() {
+		const { split, themePreferences, theme } = this.state;
+
+		let content = <App />;
+
+		if (isTablet) {
+			const { inside, showModal } = this.state;
+			content = (
+				<SplitContext.Provider value={{ split }}>
+					<Tablet
+						theme={theme}
+						tablet={split}
+						inside={inside}
+						showModal={showModal}
+						closeModal={this.closeModal}
+						onLayout={this.onLayout}
+					>
+						{content}
+					</Tablet>
+				</SplitContext.Provider>
+			);
+		}
+		return (
+			<AppearanceProvider>
+				<Provider store={store}>
+					<ThemeContext.Provider
+						value={{
+							theme,
+							themePreferences,
+							setTheme: this.setTheme
+						}}
+					>
+						{content}
+					</ThemeContext.Provider>
+				</Provider>
+			</AppearanceProvider>
+		);
+	}
 }
-
-export default App;
diff --git a/app/index.js_ b/app/index.js_
deleted file mode 100644
index 824172707..000000000
--- a/app/index.js_
+++ /dev/null
@@ -1,753 +0,0 @@
-import React from 'react';
-import {
-	View, Linking, BackHandler, ScrollView
-} from 'react-native';
-import { createAppContainer, createSwitchNavigator } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
-import { createDrawerNavigator } from 'react-navigation-drawer';
-import { AppearanceProvider } from 'react-native-appearance';
-import { Provider } from 'react-redux';
-import PropTypes from 'prop-types';
-import RNUserDefaults from 'rn-user-defaults';
-import Modal from 'react-native-modal';
-import KeyCommands, { KeyCommandsEmitter } from 'react-native-keycommands';
-
-import {
-	defaultTheme,
-	newThemeState,
-	subscribeTheme,
-	unsubscribeTheme
-} from './utils/theme';
-import EventEmitter from './utils/events';
-import { appInit, appInitLocalSettings } from './actions';
-import { deepLinkingOpen } from './actions/deepLinking';
-import Navigation from './lib/Navigation';
-import Sidebar from './views/SidebarView';
-import parseQuery from './lib/methods/helpers/parseQuery';
-import { initializePushNotifications, onNotification } from './notifications/push';
-import store from './lib/createStore';
-import NotificationBadge from './notifications/inApp';
-import {
-	defaultHeader, onNavigationStateChange, cardStyle, getActiveRouteName
-} from './utils/navigation';
-import { loggerConfig, analytics } from './utils/log';
-import Toast from './containers/Toast';
-import { ThemeContext } from './theme';
-import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
-import { MIN_WIDTH_SPLIT_LAYOUT } from './constants/tablet';
-import {
-	isTablet, isSplited, isIOS, setWidth, supportSystemTheme, isAndroid
-} from './utils/deviceInfo';
-import { KEY_COMMAND } from './commands';
-import Tablet, { initTabletNav } from './tablet';
-import sharedStyles from './views/Styles';
-import { SplitContext } from './split';
-import TwoFactor from './containers/TwoFactor';
-
-import RoomsListView from './views/RoomsListView';
-import RoomView from './views/RoomView';
-import ScreenLockedView from './views/ScreenLockedView';
-import ChangePasscodeView from './views/ChangePasscodeView';
-
-if (isIOS) {
-	const RNScreens = require('react-native-screens');
-	RNScreens.useScreens();
-}
-
-const parseDeepLinking = (url) => {
-	if (url) {
-		url = url.replace(/rocketchat:\/\/|https:\/\/go.rocket.chat\//, '');
-		const regex = /^(room|auth|invite)\?/;
-		if (url.match(regex)) {
-			url = url.replace(regex, '').trim();
-			if (url) {
-				return parseQuery(url);
-			}
-		}
-	}
-	return null;
-};
-
-// Outside
-const OutsideStack = createStackNavigator({
-	OnboardingView: {
-		getScreen: () => require('./views/OnboardingView').default,
-		header: null
-	},
-	NewServerView: {
-		getScreen: () => require('./views/NewServerView').default
-	},
-	WorkspaceView: {
-		getScreen: () => require('./views/WorkspaceView').default
-	},
-	LoginView: {
-		getScreen: () => require('./views/LoginView').default
-	},
-	ForgotPasswordView: {
-		getScreen: () => require('./views/ForgotPasswordView').default
-	},
-	RegisterView: {
-		getScreen: () => require('./views/RegisterView').default
-	},
-	LegalView: {
-		getScreen: () => require('./views/LegalView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const AuthenticationWebViewStack = createStackNavigator({
-	AuthenticationWebView: {
-		getScreen: () => require('./views/AuthenticationWebView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const OutsideStackModal = createStackNavigator({
-	OutsideStack,
-	AuthenticationWebViewStack
-},
-{
-	mode: 'modal',
-	headerMode: 'none',
-	cardStyle
-});
-
-const RoomRoutes = {
-	RoomView,
-	ThreadMessagesView: {
-		getScreen: () => require('./views/ThreadMessagesView').default
-	},
-	MarkdownTableView: {
-		getScreen: () => require('./views/MarkdownTableView').default
-	},
-	ReadReceiptsView: {
-		getScreen: () => require('./views/ReadReceiptView').default
-	}
-};
-
-// Inside
-const ChatsStack = createStackNavigator({
-	RoomsListView,
-	RoomActionsView: {
-		getScreen: () => require('./views/RoomActionsView').default
-	},
-	RoomInfoView: {
-		getScreen: () => require('./views/RoomInfoView').default
-	},
-	RoomInfoEditView: {
-		getScreen: () => require('./views/RoomInfoEditView').default
-	},
-	RoomMembersView: {
-		getScreen: () => require('./views/RoomMembersView').default
-	},
-	SearchMessagesView: {
-		getScreen: () => require('./views/SearchMessagesView').default
-	},
-	SelectedUsersView: {
-		getScreen: () => require('./views/SelectedUsersView').default
-	},
-	InviteUsersView: {
-		getScreen: () => require('./views/InviteUsersView').default
-	},
-	InviteUsersEditView: {
-		getScreen: () => require('./views/InviteUsersEditView').default
-	},
-	MessagesView: {
-		getScreen: () => require('./views/MessagesView').default
-	},
-	AutoTranslateView: {
-		getScreen: () => require('./views/AutoTranslateView').default
-	},
-	DirectoryView: {
-		getScreen: () => require('./views/DirectoryView').default
-	},
-	NotificationPrefView: {
-		getScreen: () => require('./views/NotificationPreferencesView').default
-	},
-	VisitorNavigationView: {
-		getScreen: () => require('./views/VisitorNavigationView').default
-	},
-	ForwardLivechatView: {
-		getScreen: () => require('./views/ForwardLivechatView').default
-	},
-	LivechatEditView: {
-		getScreen: () => require('./views/LivechatEditView').default
-	},
-	PickerView: {
-		getScreen: () => require('./views/PickerView').default
-	},
-	...RoomRoutes
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-// Inside
-const RoomStack = createStackNavigator({
-	...RoomRoutes
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-ChatsStack.navigationOptions = ({ navigation }) => {
-	let drawerLockMode = 'unlocked';
-	if (navigation.state.index > 0 || isSplited()) {
-		drawerLockMode = 'locked-closed';
-	}
-	return {
-		drawerLockMode
-	};
-};
-
-const ProfileStack = createStackNavigator({
-	ProfileView: {
-		getScreen: () => require('./views/ProfileView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-ProfileStack.navigationOptions = ({ navigation }) => {
-	let drawerLockMode = 'unlocked';
-	if (navigation.state.index > 0) {
-		drawerLockMode = 'locked-closed';
-	}
-	return {
-		drawerLockMode
-	};
-};
-
-const SettingsStack = createStackNavigator({
-	SettingsView: {
-		getScreen: () => require('./views/SettingsView').default
-	},
-	LanguageView: {
-		getScreen: () => require('./views/LanguageView').default
-	},
-	ThemeView: {
-		getScreen: () => require('./views/ThemeView').default
-	},
-	DefaultBrowserView: {
-		getScreen: () => require('./views/DefaultBrowserView').default
-	},
-	ScreenLockConfigView: {
-		getScreen: () => require('./views/ScreenLockConfigView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const AdminPanelStack = createStackNavigator({
-	AdminPanelView: {
-		getScreen: () => require('./views/AdminPanelView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-SettingsStack.navigationOptions = ({ navigation }) => {
-	let drawerLockMode = 'unlocked';
-	if (navigation.state.index > 0) {
-		drawerLockMode = 'locked-closed';
-	}
-	return {
-		drawerLockMode
-	};
-};
-
-const ChatsDrawer = createDrawerNavigator({
-	ChatsStack,
-	ProfileStack,
-	SettingsStack,
-	AdminPanelStack
-}, {
-	contentComponent: Sidebar,
-	overlayColor: '#00000090'
-});
-
-const NewMessageStack = createStackNavigator({
-	NewMessageView: {
-		getScreen: () => require('./views/NewMessageView').default
-	},
-	SelectedUsersViewCreateChannel: {
-		getScreen: () => require('./views/SelectedUsersView').default
-	},
-	CreateChannelView: {
-		getScreen: () => require('./views/CreateChannelView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const AttachmentStack = createStackNavigator({
-	AttachmentView: {
-		getScreen: () => require('./views/AttachmentView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const ModalBlockStack = createStackNavigator({
-	ModalBlockView: {
-		getScreen: () => require('./views/ModalBlockView').default
-	}
-}, {
-	mode: 'modal',
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const CreateDiscussionStack = createStackNavigator({
-	CreateDiscussionView: {
-		getScreen: () => require('./views/CreateDiscussionView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const StatusStack = createStackNavigator({
-	StatusView: {
-		getScreen: () => require('./views/StatusView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const InsideStackModal = createStackNavigator({
-	Main: ChatsDrawer,
-	NewMessageStack,
-	AttachmentStack,
-	ModalBlockStack,
-	StatusStack,
-	CreateDiscussionStack,
-	JitsiMeetView: {
-		getScreen: () => require('./views/JitsiMeetView').default
-	}
-},
-{
-	mode: 'modal',
-	headerMode: 'none',
-	cardStyle
-});
-
-const SetUsernameStack = createStackNavigator({
-	SetUsernameView: {
-		getScreen: () => require('./views/SetUsernameView').default
-	}
-},
-{
-	cardStyle
-});
-
-class CustomInsideStack extends React.Component {
-	static router = InsideStackModal.router;
-
-	static propTypes = {
-		navigation: PropTypes.object,
-		screenProps: PropTypes.object
-	}
-
-	render() {
-		const { navigation, screenProps } = this.props;
-		return (
-			<>
-				<InsideStackModal navigation={navigation} screenProps={screenProps} />
-				{ !isTablet ? <NotificationBadge navigation={navigation} /> : null }
-				{ !isTablet ? <Toast /> : null }
-			</>
-		);
-	}
-}
-
-class CustomRoomStack extends React.Component {
-	static router = RoomStack.router;
-
-	static propTypes = {
-		navigation: PropTypes.object,
-		screenProps: PropTypes.object
-	}
-
-	render() {
-		const { navigation, screenProps } = this.props;
-		return (
-			<>
-				<RoomStack navigation={navigation} screenProps={screenProps} />
-				<Toast />
-			</>
-		);
-	}
-}
-
-const MessagesStack = createStackNavigator({
-	NewMessageView: {
-		getScreen: () => require('./views/NewMessageView').default
-	},
-	SelectedUsersViewCreateChannel: {
-		getScreen: () => require('./views/SelectedUsersView').default
-	},
-	CreateChannelView: {
-		getScreen: () => require('./views/CreateChannelView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const DirectoryStack = createStackNavigator({
-	DirectoryView: {
-		getScreen: () => require('./views/DirectoryView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const SidebarStack = createStackNavigator({
-	SettingsView: {
-		getScreen: () => require('./views/SettingsView').default
-	},
-	ProfileView: {
-		getScreen: () => require('./views/ProfileView').default
-	},
-	AdminPanelView: {
-		getScreen: () => require('./views/AdminPanelView').default
-	},
-	StatusView: {
-		getScreen: () => require('./views/StatusView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const RoomActionsStack = createStackNavigator({
-	RoomActionsView: {
-		getScreen: () => require('./views/RoomActionsView').default
-	},
-	RoomInfoView: {
-		getScreen: () => require('./views/RoomInfoView').default
-	},
-	RoomInfoEditView: {
-		getScreen: () => require('./views/RoomInfoEditView').default
-	},
-	RoomMembersView: {
-		getScreen: () => require('./views/RoomMembersView').default
-	},
-	SearchMessagesView: {
-		getScreen: () => require('./views/SearchMessagesView').default
-	},
-	SelectedUsersView: {
-		getScreen: () => require('./views/SelectedUsersView').default
-	},
-	MessagesView: {
-		getScreen: () => require('./views/MessagesView').default
-	},
-	AutoTranslateView: {
-		getScreen: () => require('./views/AutoTranslateView').default
-	},
-	ReadReceiptsView: {
-		getScreen: () => require('./views/ReadReceiptView').default
-	},
-	NotificationPrefView: {
-		getScreen: () => require('./views/NotificationPreferencesView').default
-	},
-	AttachmentView: {
-		getScreen: () => require('./views/AttachmentView').default
-	},
-	PickerView: {
-		getScreen: () => require('./views/PickerView').default
-	}
-}, {
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-
-const ModalSwitch = createSwitchNavigator({
-	MessagesStack,
-	DirectoryStack,
-	SidebarStack,
-	RoomActionsStack,
-	SettingsStack,
-	ModalBlockStack,
-	CreateDiscussionStack,
-	AuthLoading: () => null
-},
-{
-	initialRouteName: 'AuthLoading'
-});
-
-class CustomModalStack extends React.Component {
-	static router = ModalSwitch.router;
-
-	static propTypes = {
-		navigation: PropTypes.object,
-		showModal: PropTypes.bool,
-		closeModal: PropTypes.func,
-		screenProps: PropTypes.object
-	}
-
-	componentDidMount() {
-		this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.closeModal);
-	}
-
-	componentWillUnmount() {
-		this.backHandler.remove();
-	}
-
-	closeModal = () => {
-		const { closeModal, navigation } = this.props;
-		const { state } = navigation;
-		if (state && state.routes[state.index] && state.routes[state.index].index === 0) {
-			closeModal();
-			return true;
-		}
-		if (state && state.routes[state.index] && state.routes[state.index].routes && state.routes[state.index].routes.length > 1) {
-			navigation.goBack();
-		}
-		return false;
-	}
-
-	render() {
-		const {
-			navigation, showModal, closeModal, screenProps
-		} = this.props;
-
-		const pageSheetViews = ['AttachmentView'];
-		const pageSheet = pageSheetViews.includes(getActiveRouteName(navigation.state));
-
-		const androidProps = isAndroid && !pageSheet && {
-			style: { marginBottom: 0 }
-		};
-
-		let content = (
-			<View style={[sharedStyles.modal, pageSheet ? sharedStyles.modalPageSheet : sharedStyles.modalFormSheet]}>
-				<ModalSwitch navigation={navigation} screenProps={{ ...screenProps, closeModal: this.closeModal }} />
-			</View>
-		);
-
-		if (isAndroid && !pageSheet) {
-			content = (
-				<ScrollView overScrollMode='never'>
-					{content}
-				</ScrollView>
-			);
-		}
-
-		return (
-			<Modal
-				useNativeDriver
-				coverScreen={false}
-				isVisible={showModal}
-				onBackdropPress={closeModal}
-				hideModalContentWhileAnimating
-				avoidKeyboard
-				{...androidProps}
-			>
-				{content}
-			</Modal>
-		);
-	}
-}
-
-class CustomNotificationStack extends React.Component {
-	static router = InsideStackModal.router;
-
-	static propTypes = {
-		navigation: PropTypes.object,
-		screenProps: PropTypes.object
-	}
-
-	render() {
-		const { navigation, screenProps } = this.props;
-		return <NotificationBadge navigation={navigation} screenProps={screenProps} />;
-	}
-}
-
-export const App = createAppContainer(createSwitchNavigator(
-	{
-		OutsideStack: OutsideStackModal,
-		InsideStack: CustomInsideStack,
-		AuthLoading: {
-			getScreen: () => require('./views/AuthLoadingView').default
-		},
-		SetUsernameStack
-	},
-	{
-		initialRouteName: 'AuthLoading'
-	}
-));
-
-export const RoomContainer = createAppContainer(CustomRoomStack);
-
-export const ModalContainer = createAppContainer(CustomModalStack);
-
-export const NotificationContainer = createAppContainer(CustomNotificationStack);
-
-export default class Root extends React.Component {
-	constructor(props) {
-		super(props);
-		this.init();
-		this.initCrashReport();
-		this.state = {
-			split: false,
-			inside: false,
-			showModal: false,
-			theme: defaultTheme(),
-			themePreferences: {
-				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
-				darkLevel: 'dark'
-			}
-		};
-		if (isTablet) {
-			this.initTablet();
-		}
-	}
-
-	componentDidMount() {
-		this.listenerTimeout = setTimeout(() => {
-			Linking.addEventListener('url', ({ url }) => {
-				const parsedDeepLinkingURL = parseDeepLinking(url);
-				if (parsedDeepLinkingURL) {
-					store.dispatch(deepLinkingOpen(parsedDeepLinkingURL));
-				}
-			});
-		}, 5000);
-	}
-
-	// eslint-disable-next-line no-unused-vars
-	componentDidUpdate(_, prevState) {
-		if (isTablet) {
-			const { split, inside } = this.state;
-			if (inside && split !== prevState.split) {
-				// Reset app on split mode changes
-				Navigation.navigate('RoomsListView');
-				this.closeModal();
-			}
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout(this.listenerTimeout);
-
-		unsubscribeTheme();
-
-		if (this.onKeyCommands && this.onKeyCommands.remove) {
-			this.onKeyCommands.remove();
-		}
-	}
-
-	init = async() => {
-		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
-		const [notification, deepLinking] = await Promise.all([initializePushNotifications(), Linking.getInitialURL()]);
-		const parsedDeepLinkingURL = parseDeepLinking(deepLinking);
-		store.dispatch(appInitLocalSettings());
-		if (notification) {
-			onNotification(notification);
-		} else if (parsedDeepLinkingURL) {
-			store.dispatch(deepLinkingOpen(parsedDeepLinkingURL));
-		} else {
-			store.dispatch(appInit());
-		}
-	}
-
-	setTheme = (newTheme = {}) => {
-		// change theme state
-		this.setState(prevState => newThemeState(prevState, newTheme), () => {
-			const { themePreferences } = this.state;
-			// subscribe to Appearance changes
-			subscribeTheme(themePreferences, this.setTheme);
-		});
-	}
-
-	initTablet = async() => {
-		initTabletNav(args => this.setState(args));
-		await KeyCommands.setKeyCommands([]);
-		this.onKeyCommands = KeyCommandsEmitter.addListener(
-			'onKeyCommand',
-			command => EventEmitter.emit(KEY_COMMAND, { event: command })
-		);
-	}
-
-	initCrashReport = () => {
-		RocketChat.getAllowCrashReport()
-			.then((allowCrashReport) => {
-				if (!allowCrashReport) {
-					loggerConfig.autoNotify = false;
-					loggerConfig.registerBeforeSendCallback(() => false);
-					analytics().setAnalyticsCollectionEnabled(false);
-				}
-			});
-	}
-
-	onLayout = ({ nativeEvent: { layout: { width } } }) => (isTablet ? this.setSplit(width) : null);
-
-	setSplit = (width) => {
-		this.setState({ split: width > MIN_WIDTH_SPLIT_LAYOUT });
-		setWidth(width);
-	}
-
-	closeModal = () => this.setState({ showModal: false });
-
-	render() {
-		const { split, themePreferences, theme } = this.state;
-
-		let content = (
-			<App
-				ref={(navigatorRef) => {
-					Navigation.setTopLevelNavigator(navigatorRef);
-				}}
-				screenProps={{ split, theme }}
-				onNavigationStateChange={onNavigationStateChange}
-			/>
-		);
-
-		if (isTablet) {
-			const { inside, showModal } = this.state;
-			content = (
-				<SplitContext.Provider value={{ split }}>
-					<Tablet
-						theme={theme}
-						tablet={split}
-						inside={inside}
-						showModal={showModal}
-						closeModal={this.closeModal}
-						onLayout={this.onLayout}
-					>
-						{content}
-					</Tablet>
-				</SplitContext.Provider>
-			);
-		}
-		return (
-			<AppearanceProvider>
-				<Provider store={store}>
-					<ThemeContext.Provider
-						value={{
-							theme,
-							themePreferences,
-							setTheme: this.setTheme
-						}}
-					>
-						{content}
-						<TwoFactor />
-						<ScreenLockedView />
-						<ChangePasscodeView />
-					</ThemeContext.Provider>
-				</Provider>
-			</AppearanceProvider>
-		);
-	}
-}
diff --git a/app/lib/ModalNavigation.js b/app/lib/ModalNavigation.js
index 3474a7451..ef8d8b06e 100644
--- a/app/lib/ModalNavigation.js
+++ b/app/lib/ModalNavigation.js
@@ -1,4 +1,4 @@
-import { NavigationActions } from 'react-navigation';
+import { CommonActions } from '@react-navigation/native';
 
 let _navigatorModal;
 
@@ -6,10 +6,10 @@ function setTopLevelNavigator(navigatorRef) {
 	_navigatorModal = navigatorRef;
 }
 
-function navigate(routeName, params) {
+function navigate(name, params) {
 	_navigatorModal.dispatch(
-		NavigationActions.navigate({
-			routeName,
+		CommonActions.navigate({
+			name,
 			params
 		})
 	);
diff --git a/app/lib/Navigation.js b/app/lib/Navigation.js
index 252c6ed95..cbd3b44b1 100644
--- a/app/lib/Navigation.js
+++ b/app/lib/Navigation.js
@@ -1,4 +1,4 @@
-import { NavigationActions } from 'react-navigation';
+import { CommonActions } from '@react-navigation/native';
 
 let _navigator;
 
@@ -8,14 +8,14 @@ function setTopLevelNavigator(navigatorRef) {
 
 function back() {
 	_navigator.dispatch(
-		NavigationActions.back()
+		CommonActions.back()
 	);
 }
 
-function navigate(routeName, params) {
+function navigate(name, params) {
 	_navigator.dispatch(
-		NavigationActions.navigate({
-			routeName,
+		CommonActions.navigate({
+			name,
 			params
 		})
 	);
diff --git a/app/lib/ShareNavigation.js b/app/lib/ShareNavigation.js
index 84bc27908..35abac7d9 100644
--- a/app/lib/ShareNavigation.js
+++ b/app/lib/ShareNavigation.js
@@ -1,4 +1,4 @@
-import { NavigationActions } from 'react-navigation';
+import { NavigationActions } from '@react-navigation/native';
 
 let _shareNavigator;
 
diff --git a/app/share.js b/app/share.js
new file mode 100644
index 000000000..90dd5a9e0
--- /dev/null
+++ b/app/share.js
@@ -0,0 +1,179 @@
+import React, { useState, useContext } from 'react';
+import { View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { AppearanceProvider } from 'react-native-appearance';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Provider } from 'react-redux';
+import RNUserDefaults from 'rn-user-defaults';
+
+import {
+	defaultTheme,
+	newThemeState,
+	subscribeTheme,
+	unsubscribeTheme
+} from './utils/theme';
+import Navigation from './lib/ShareNavigation';
+import store from './lib/createStore';
+import sharedStyles from './views/Styles';
+import { isNotch, isIOS, supportSystemTheme } from './utils/deviceInfo';
+import { defaultHeader, onNavigationStateChange, themedHeader } from './utils/navigation';
+import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
+import { ThemeContext } from './theme';
+
+// Outside Stack
+import AuthLoadingView from './views/AuthLoadingView';
+import WithoutServersView from './views/WithoutServersView';
+
+// Inside Stack
+import ShareListView from './views/ShareListView';
+import ShareView from './views/ShareView';
+import SelectServerView from './views/SelectServerView';
+
+const Inside = createStackNavigator();
+const InsideStack = () => {
+	const { theme } = useContext(ThemeContext);
+
+	return (
+		<Inside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Inside.Screen
+				name='ShareListView'
+				component={ShareListView}
+				options={props => ShareListView.navigationOptions({ ...props, theme })}
+			/>
+			<Inside.Screen
+				name='ShareView'
+				component={ShareView}
+				options={ShareView.navigationOptions}
+			/>
+			<Inside.Screen
+				name='SelectServerView'
+				component={SelectServerView}
+				options={SelectServerView.navigationOptions}
+			/>
+		</Inside.Navigator>
+	);
+};
+
+const Outside = createStackNavigator();
+const OutsideStack = () => {
+	const { theme } = useContext(ThemeContext);
+
+	return (
+		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Outside.Screen
+				name='WithoutServersView'
+				component={WithoutServersView}
+				options={WithoutServersView.navigationOptions}
+			/>
+		</Outside.Navigator>
+	);
+};
+
+const AuthContext = React.createContext();
+
+// App
+const Stack = createStackNavigator();
+export const App = () => {
+	const [loading] = useState(false);
+
+	return (
+		<AuthContext.Provider value={{}}>
+			<Stack.Navigator screenOptions={{ headerShown: false }}>
+				{loading ? (
+					<Stack.Screen
+						name='AuthLoading'
+						component={AuthLoadingView}
+					/>
+				) : (
+					<>
+						<Stack.Screen
+							name='OutsideStack'
+							component={OutsideStack}
+						/>
+						<Stack.Screen
+							name='InsideStack'
+							component={InsideStack}
+						/>
+					</>
+				)}
+			</Stack.Navigator>
+		</AuthContext.Provider>
+	);
+};
+
+class Root extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isLandscape: false,
+			theme: defaultTheme(),
+			themePreferences: {
+				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
+				darkLevel: 'dark'
+			}
+		};
+		this.init();
+	}
+
+	componentWillUnmount() {
+		RocketChat.closeShareExtension();
+		unsubscribeTheme();
+	}
+
+	init = async() => {
+		if (isIOS) {
+			await RNUserDefaults.setName('group.ios.chat.rocket');
+		}
+		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
+		const currentServer = await RNUserDefaults.get('currentServer');
+		const token = await RNUserDefaults.get(RocketChat.TOKEN_KEY);
+
+		if (currentServer && token) {
+			await Navigation.navigate('InsideStack');
+			await RocketChat.shareExtensionInit(currentServer);
+		} else {
+			await Navigation.navigate('OutsideStack');
+		}
+	}
+
+	setTheme = (newTheme = {}) => {
+		// change theme state
+		this.setState(prevState => newThemeState(prevState, newTheme), () => {
+			const { themePreferences } = this.state;
+			// subscribe to Appearance changes
+			subscribeTheme(themePreferences, this.setTheme);
+		});
+	}
+
+	handleLayout = (event) => {
+		const { width, height } = event.nativeEvent.layout;
+		this.setState({ isLandscape: width > height });
+	}
+
+	render() {
+		const { isLandscape, theme } = this.state;
+		return (
+			<AppearanceProvider>
+				<View
+					style={[sharedStyles.container, isLandscape && isNotch ? sharedStyles.notchLandscapeContainer : {}]}
+					onLayout={this.handleLayout}
+				>
+					<Provider store={store}>
+						<ThemeContext.Provider value={{ theme }}>
+							<NavigationContainer
+								ref={(navigatorRef) => {
+									Navigation.setTopLevelNavigator(navigatorRef);
+								}}
+								onNavigationStateChange={onNavigationStateChange}
+							>
+								<App />
+							</NavigationContainer>
+						</ThemeContext.Provider>
+					</Provider>
+				</View>
+			</AppearanceProvider>
+		);
+	}
+}
+
+export default Root;
diff --git a/app/share.js_ b/app/share.js_
deleted file mode 100644
index 35e865296..000000000
--- a/app/share.js_
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createAppContainer, createSwitchNavigator } from 'react-navigation';
-import { AppearanceProvider } from 'react-native-appearance';
-import { createStackNavigator } from 'react-navigation-stack';
-import { Provider } from 'react-redux';
-import RNUserDefaults from 'rn-user-defaults';
-
-import {
-	defaultTheme,
-	newThemeState,
-	subscribeTheme,
-	unsubscribeTheme
-} from './utils/theme';
-import Navigation from './lib/ShareNavigation';
-import store from './lib/createStore';
-import sharedStyles from './views/Styles';
-import { hasNotch, supportSystemTheme } from './utils/deviceInfo';
-import { defaultHeader, onNavigationStateChange, cardStyle } from './utils/navigation';
-import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
-import { ThemeContext } from './theme';
-import { localAuthenticate } from './utils/localAuthentication';
-import ScreenLockedView from './views/ScreenLockedView';
-
-const InsideNavigator = createStackNavigator({
-	ShareListView: {
-		getScreen: () => require('./views/ShareListView').default
-	},
-	ShareView: {
-		getScreen: () => require('./views/ShareView').default
-	},
-	SelectServerView: {
-		getScreen: () => require('./views/SelectServerView').default
-	}
-}, {
-	initialRouteName: 'ShareListView',
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const OutsideNavigator = createStackNavigator({
-	WithoutServersView: {
-		getScreen: () => require('./views/WithoutServersView').default
-	}
-}, {
-	initialRouteName: 'WithoutServersView',
-	defaultNavigationOptions: defaultHeader,
-	cardStyle
-});
-
-const AppContainer = createAppContainer(createSwitchNavigator({
-	OutsideStack: OutsideNavigator,
-	InsideStack: InsideNavigator,
-	AuthLoading: {
-		getScreen: () => require('./views/AuthLoadingView').default
-	}
-},
-{
-	initialRouteName: 'AuthLoading'
-}));
-
-class Root extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isLandscape: false,
-			theme: defaultTheme(),
-			themePreferences: {
-				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
-				darkLevel: 'dark'
-			}
-		};
-		this.init();
-	}
-
-	componentWillUnmount() {
-		RocketChat.closeShareExtension();
-		unsubscribeTheme();
-	}
-
-	init = async() => {
-		RNUserDefaults.objectForKey(THEME_PREFERENCES_KEY).then(this.setTheme);
-		const currentServer = await RNUserDefaults.get('currentServer');
-		const token = await RNUserDefaults.get(RocketChat.TOKEN_KEY);
-
-		if (currentServer && token) {
-			await localAuthenticate(currentServer);
-			await Navigation.navigate('InsideStack');
-			await RocketChat.shareExtensionInit(currentServer);
-		} else {
-			await Navigation.navigate('OutsideStack');
-		}
-	}
-
-	setTheme = (newTheme = {}) => {
-		// change theme state
-		this.setState(prevState => newThemeState(prevState, newTheme), () => {
-			const { themePreferences } = this.state;
-			// subscribe to Appearance changes
-			subscribeTheme(themePreferences, this.setTheme);
-		});
-	}
-
-	handleLayout = (event) => {
-		const { width, height } = event.nativeEvent.layout;
-		this.setState({ isLandscape: width > height });
-	}
-
-	render() {
-		const { isLandscape, theme } = this.state;
-		return (
-			<AppearanceProvider>
-				<View
-					style={[sharedStyles.container, isLandscape && hasNotch ? sharedStyles.notchLandscapeContainer : {}]}
-					onLayout={this.handleLayout}
-				>
-					<Provider store={store}>
-						<ThemeContext.Provider value={{ theme }}>
-							<AppContainer
-								ref={(navigatorRef) => {
-									Navigation.setTopLevelNavigator(navigatorRef);
-								}}
-								onNavigationStateChange={onNavigationStateChange}
-								screenProps={{ theme }}
-							/>
-							<ScreenLockedView />
-						</ThemeContext.Provider>
-					</Provider>
-				</View>
-			</AppearanceProvider>
-		);
-	}
-}
-
-export default Root;
diff --git a/app/split.js_ b/app/split.js
similarity index 100%
rename from app/split.js_
rename to app/split.js
diff --git a/app/stacks/InsideStack.js b/app/stacks/InsideStack.js
new file mode 100644
index 000000000..2f6c5eaa6
--- /dev/null
+++ b/app/stacks/InsideStack.js
@@ -0,0 +1,300 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+import { ThemeContext } from '../theme';
+import { SplitContext } from '../split';
+import { defaultHeader, themedHeader } from '../utils/navigation';
+import Toast from '../containers/Toast';
+import Sidebar from '../views/SidebarView';
+import NotificationBadge from '../notifications/inApp';
+
+// Chats Stack
+import RoomView from '../views/RoomView';
+import RoomsListView from '../views/RoomsListView';
+import RoomActionsView from '../views/RoomActionsView';
+import RoomInfoView from '../views/RoomInfoView';
+import RoomInfoEditView from '../views/RoomInfoEditView';
+import RoomMembersView from '../views/RoomMembersView';
+import SearchMessagesView from '../views/SearchMessagesView';
+import SelectedUsersView from '../views/SelectedUsersView';
+import InviteUsersView from '../views/InviteUsersView';
+import InviteUsersEditView from '../views/InviteUsersEditView';
+import MessagesView from '../views/MessagesView';
+import AutoTranslateView from '../views/AutoTranslateView';
+import DirectoryView from '../views/DirectoryView';
+import NotificationPrefView from '../views/NotificationPreferencesView';
+import ThreadMessagesView from '../views/ThreadMessagesView';
+import MarkdownTableView from '../views/MarkdownTableView';
+import ReadReceiptsView from '../views/ReadReceiptView';
+
+// Profile Stack
+import ProfileView from '../views/ProfileView';
+
+// Settings Stack
+import SettingsView from '../views/SettingsView';
+import LanguageView from '../views/LanguageView';
+import ThemeView from '../views/ThemeView';
+import DefaultBrowserView from '../views/DefaultBrowserView';
+
+// Admin Stack
+import AdminPanelView from '../views/AdminPanelView';
+
+// NewMessage Stack
+import NewMessageView from '../views/NewMessageView';
+import CreateChannelView from '../views/CreateChannelView';
+
+// InsideStackModal
+import AttachmentView from '../views/AttachmentView';
+import ModalBlockView from '../views/ModalBlockView';
+import JitsiMeetView from '../views/JitsiMeetView';
+
+// ChatsStack
+const Chats = createStackNavigator();
+const ChatsStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+	const { split } = React.useContext(SplitContext);
+
+	return (
+		<Chats.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Chats.Screen
+				name='RoomsListView'
+				component={RoomsListView}
+				options={RoomsListView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='RoomActionsView'
+				component={RoomActionsView}
+				options={RoomActionsView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='RoomInfoView'
+				component={RoomInfoView}
+				options={RoomInfoView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='RoomInfoEditView'
+				component={RoomInfoEditView}
+				options={RoomInfoEditView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='RoomMembersView'
+				component={RoomMembersView}
+				options={RoomMembersView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='SearchMessagesView'
+				component={SearchMessagesView}
+				options={SearchMessagesView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='SelectedUsersView'
+				component={SelectedUsersView}
+				options={SelectedUsersView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='InviteUsersView'
+				component={InviteUsersView}
+				options={InviteUsersView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='InviteUsersEditView'
+				component={InviteUsersEditView}
+				options={InviteUsersEditView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='MessagesView'
+				component={MessagesView}
+				options={MessagesView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='AutoTranslateView'
+				component={AutoTranslateView}
+				options={AutoTranslateView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='DirectoryView'
+				component={DirectoryView}
+				options={props => DirectoryView.navigationOptions({ ...props, split })}
+			/>
+			<Chats.Screen
+				name='NotificationPrefView'
+				component={NotificationPrefView}
+				options={NotificationPrefView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='RoomView'
+				component={RoomView}
+				options={RoomView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='ThreadMessagesView'
+				component={ThreadMessagesView}
+				options={ThreadMessagesView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='MarkdownTableView'
+				component={MarkdownTableView}
+				options={MarkdownTableView.navigationOptions}
+			/>
+			<Chats.Screen
+				name='ReadReceiptsView'
+				component={ReadReceiptsView}
+				options={ReadReceiptsView.navigationOptions}
+			/>
+		</Chats.Navigator>
+	);
+};
+
+// ProfileStack
+const Profile = createStackNavigator();
+const ProfileStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+	const { split } = React.useContext(SplitContext);
+
+	return (
+		<Profile.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Profile.Screen
+				name='ProfileView'
+				component={ProfileView}
+				options={props => ProfileView.navigationOptions({ ...props, split })}
+			/>
+		</Profile.Navigator>
+	);
+};
+
+// SettingsStack
+const Settings = createStackNavigator();
+const SettingsStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+	const { split } = React.useContext(SplitContext);
+
+	return (
+		<Settings.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Settings.Screen
+				name='SettingsView'
+				component={SettingsView}
+				options={props => SettingsView.navigationOptions({ ...props, split })}
+			/>
+			<Settings.Screen
+				name='LanguageView'
+				component={LanguageView}
+				options={LanguageView.navigationOptions}
+			/>
+			<Settings.Screen
+				name='ThemeView'
+				component={ThemeView}
+				options={ThemeView.navigationOptions}
+			/>
+			<Settings.Screen
+				name='DefaultBrowserView'
+				component={DefaultBrowserView}
+				options={DefaultBrowserView.navigationOptions}
+			/>
+		</Settings.Navigator>
+	);
+};
+
+// AdminPanelStack
+const AdminPanel = createStackNavigator();
+const AdminPanelStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<AdminPanel.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<AdminPanel.Screen
+				name='AdminPanelView'
+				component={AdminPanelView}
+				options={AdminPanelView.navigationOptions}
+			/>
+		</AdminPanel.Navigator>
+	);
+};
+
+// ChatsDrawer
+const Drawer = createDrawerNavigator();
+const ChatsDrawer = () => (
+	<Drawer.Navigator drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}>
+		<Drawer.Screen name='ChatsStack' component={ChatsStack} />
+		<Drawer.Screen name='ProfileStack' component={ProfileStack} />
+		<Drawer.Screen name='SettingsStack' component={SettingsStack} />
+		<Drawer.Screen name='AdminPanelStack' component={AdminPanelStack} />
+	</Drawer.Navigator>
+);
+
+// NewMessageStack
+const NewMessage = createStackNavigator();
+const NewMessageStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<NewMessage.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<NewMessage.Screen
+				name='NewMessageView'
+				component={NewMessageView}
+				options={NewMessageView.navigationOptions}
+			/>
+			<NewMessage.Screen
+				name='SelectedUsersViewCreateChannel'
+				component={SelectedUsersView}
+				options={SelectedUsersView.navigationOptions}
+			/>
+			<NewMessage.Screen
+				name='CreateChannelView'
+				component={CreateChannelView}
+				options={CreateChannelView.navigationOptions}
+			/>
+		</NewMessage.Navigator>
+	);
+};
+
+// InsideStackModal
+const InsideStack = createStackNavigator();
+const InsideStackModal = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<InsideStack.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<InsideStack.Screen
+				name='ChatsDrawer'
+				component={ChatsDrawer}
+				options={{ headerShown: false }}
+			/>
+			<InsideStack.Screen
+				name='NewMessageStack'
+				component={NewMessageStack}
+				options={{ headerShown: false }}
+			/>
+			<InsideStack.Screen
+				name='AttachmentView'
+				component={AttachmentView}
+				options={AttachmentView.navigationOptions}
+			/>
+			<InsideStack.Screen
+				name='ModalBlockView'
+				component={ModalBlockView}
+				options={ModalBlockView.navigationOptions}
+			/>
+			<InsideStack.Screen
+				name='JitsiMeetView'
+				component={JitsiMeetView}
+				options={{ headerShown: false }}
+			/>
+		</InsideStack.Navigator>
+	);
+};
+
+const CustomInsideStack = ({ navigation, route }) => (
+	<>
+		<InsideStackModal navigation={navigation} />
+		<NotificationBadge navigation={navigation} route={route} />
+		<Toast />
+	</>
+);
+CustomInsideStack.propTypes = {
+	navigation: PropTypes.object,
+	route: PropTypes.object
+};
+
+export default CustomInsideStack;
diff --git a/app/stacks/OutsideStack.js b/app/stacks/OutsideStack.js
new file mode 100644
index 000000000..9cbc9545d
--- /dev/null
+++ b/app/stacks/OutsideStack.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import { ThemeContext } from '../theme';
+import { defaultHeader, themedHeader } from '../utils/navigation';
+
+// Outside Stack
+import OnboardingView from '../views/OnboardingView';
+import NewServerView from '../views/NewServerView';
+import WorkspaceView from '../views/WorkspaceView';
+import LoginView from '../views/LoginView';
+import ForgotPasswordView from '../views/ForgotPasswordView';
+import RegisterView from '../views/RegisterView';
+import LegalView from '../views/LegalView';
+import AuthenticationWebView from '../views/AuthenticationWebView';
+
+// Outside
+const Outside = createStackNavigator();
+const OutsideStack = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<Outside.Screen
+				name='OnboardingView'
+				component={OnboardingView}
+				// options={{ headerShown: false }}
+			/>
+			<Outside.Screen
+				name='NewServerView'
+				component={NewServerView}
+				// options={{ headerShown: false }}
+			/>
+			<Outside.Screen
+				name='WorkspaceView'
+				component={WorkspaceView}
+				// options={WorkspaceView.navigationOptions}
+			/>
+			<Outside.Screen
+				name='LoginView'
+				component={LoginView}
+				// options={LoginView.navigationOptions}
+			/>
+			<Outside.Screen
+				name='ForgotPasswordView'
+				component={ForgotPasswordView}
+				// options={ForgotPasswordView.navigationOptions}
+			/>
+			<Outside.Screen
+				name='RegisterView'
+				component={RegisterView}
+				// options={RegisterView.navigationOptions}
+			/>
+			<Outside.Screen
+				name='LegalView'
+				component={LegalView}
+				// options={LegalView.navigationOptions}
+			/>
+		</Outside.Navigator>
+	);
+};
+
+// OutsideStackModal
+const OutsideModal = createStackNavigator();
+const OutsideStackModal = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<OutsideModal.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+			<OutsideModal.Screen
+				name='OutsideStack'
+				component={OutsideStack}
+				options={{ headerShown: false }}
+			/>
+			<OutsideModal.Screen
+				name='AuthenticationWebView'
+				component={AuthenticationWebView}
+				options={AuthenticationWebView.navigationOptions}
+			/>
+		</OutsideModal.Navigator>
+	);
+};
+
+export default OutsideStackModal;
diff --git a/app/tablet.js_ b/app/tablet.js
similarity index 63%
rename from app/tablet.js_
rename to app/tablet.js
index e0533b31e..88c1fd699 100644
--- a/app/tablet.js_
+++ b/app/tablet.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
-import { NavigationActions, StackActions } from 'react-navigation';
+import { NavigationActions, StackActions } from '@react-navigation/native';
 import KeyCommands from 'react-native-keycommands';
 
 import Navigation from './lib/Navigation';
 import { isSplited } from './utils/deviceInfo';
-import {
-	App, RoomContainer, ModalContainer, NotificationContainer
-} from './index.js';
+import { App } from './index';
 import { MAX_SIDEBAR_WIDTH } from './constants/tablet';
 import ModalNavigation from './lib/ModalNavigation';
 import { keyCommands, defaultCommands } from './commands';
@@ -24,61 +22,61 @@ export const initTabletNav = (setState) => {
 	let inCall = false;
 
 	const defaultApp = App.router.getStateForAction;
-	const defaultModal = ModalContainer.router.getStateForAction;
-	const defaultRoom = RoomContainer.router.getStateForAction;
-	const defaultNotification = NotificationContainer.router.getStateForAction;
+	// const defaultModal = ModalContainer.router.getStateForAction;
+	// const defaultRoom = RoomContainer.router.getStateForAction;
+	// const defaultNotification = NotificationContainer.router.getStateForAction;
 
-	NotificationContainer.router.getStateForAction = (action, state) => {
-		if (action.type === NavigationActions.NAVIGATE && isSplited()) {
-			const { routeName, params } = action;
-			if (routeName === 'RoomView') {
-				const resetAction = StackActions.reset({
-					index: 0,
-					actions: [NavigationActions.navigate({ routeName, params })]
-				});
-				roomRef.dispatch(resetAction);
-			}
-		}
-		return defaultNotification(action, state);
-	};
+	// NotificationContainer.router.getStateForAction = (action, state) => {
+	// 	if (action.type === NavigationActions.NAVIGATE && isSplited()) {
+	// 		const { routeName, params } = action;
+	// 		if (routeName === 'RoomView') {
+	// 			const resetAction = StackActions.reset({
+	// 				index: 0,
+	// 				actions: [NavigationActions.navigate({ routeName, params })]
+	// 			});
+	// 			roomRef.dispatch(resetAction);
+	// 		}
+	// 	}
+	// 	return defaultNotification(action, state);
+	// };
 
-	RoomContainer.router.getStateForAction = (action, state) => {
-		if (action.type === NavigationActions.NAVIGATE && isSplited()) {
-			const { routeName, params } = action;
-			if (routeName === 'RoomActionsView') {
-				modalRef.dispatch(NavigationActions.navigate({ routeName, params }));
-				setState({ showModal: true });
-				return null;
-			}
-			if (routeName === 'AttachmentView') {
-				modalRef.dispatch(NavigationActions.navigate({ routeName, params }));
-				setState({ showModal: true });
-				return null;
-			}
-		}
-		if (action.type === 'Navigation/RESET' && isSplited()) {
-			const { params } = action.actions[action.index];
-			const routes = state.routes[state.index] && state.routes[state.index].params;
-			if (params && params.rid && routes && routes.rid && params.rid === routes.rid) {
-				return null;
-			}
-		}
-		return defaultRoom(action, state);
-	};
+	// RoomContainer.router.getStateForAction = (action, state) => {
+	// 	if (action.type === NavigationActions.NAVIGATE && isSplited()) {
+	// 		const { routeName, params } = action;
+	// 		if (routeName === 'RoomActionsView') {
+	// 			modalRef.dispatch(NavigationActions.navigate({ routeName, params }));
+	// 			setState({ showModal: true });
+	// 			return null;
+	// 		}
+	// 		if (routeName === 'AttachmentView') {
+	// 			modalRef.dispatch(NavigationActions.navigate({ routeName, params }));
+	// 			setState({ showModal: true });
+	// 			return null;
+	// 		}
+	// 	}
+	// 	if (action.type === 'Navigation/RESET' && isSplited()) {
+	// 		const { params } = action.actions[action.index];
+	// 		const routes = state.routes[state.index] && state.routes[state.index].params;
+	// 		if (params && params.rid && routes && routes.rid && params.rid === routes.rid) {
+	// 			return null;
+	// 		}
+	// 	}
+	// 	return defaultRoom(action, state);
+	// };
 
-	ModalContainer.router.getStateForAction = (action, state) => {
-		if (action.type === 'Navigation/POP' && isSplited()) {
-			modalRef.dispatch(NavigationActions.navigate({ routeName: 'AuthLoading' }));
-			setState({ showModal: false });
-		}
-		if (action.type === NavigationActions.NAVIGATE && isSplited()) {
-			const { routeName, params } = action;
-			if (routeName === 'RoomView') {
-				Navigation.navigate(routeName, params);
-			}
-		}
-		return defaultModal(action, state);
-	};
+	// ModalContainer.router.getStateForAction = (action, state) => {
+	// 	if (action.type === 'Navigation/POP' && isSplited()) {
+	// 		modalRef.dispatch(NavigationActions.navigate({ routeName: 'AuthLoading' }));
+	// 		setState({ showModal: false });
+	// 	}
+	// 	if (action.type === NavigationActions.NAVIGATE && isSplited()) {
+	// 		const { routeName, params } = action;
+	// 		if (routeName === 'RoomView') {
+	// 			Navigation.navigate(routeName, params);
+	// 		}
+	// 	}
+	// 	return defaultModal(action, state);
+	// };
 
 	App.router.getStateForAction = (action, state) => {
 		if (action.type === NavigationActions.NAVIGATE) {
@@ -108,15 +106,16 @@ export const initTabletNav = (setState) => {
 					KeyCommands.deleteKeyCommands([...defaultCommands, ...keyCommands]);
 					setState({ inside: false, showModal: false });
 				}
-				if (routeName === 'OnboardingView' || routeName === 'NewServerView') {
+				if (routeName === 'OnboardingView') {
 					KeyCommands.deleteKeyCommands([...defaultCommands, ...keyCommands]);
 					setState({ inside: false, showModal: false });
 				}
-				if (routeName === 'ModalBlockView' || routeName === 'StatusView' || routeName === 'CreateDiscussionView') {
+				if (routeName === 'ModalBlockView') {
 					modalRef.dispatch(NavigationActions.navigate({ routeName, params }));
 					setState({ showModal: true });
 					return null;
 				}
+
 				if (routeName === 'RoomView') {
 					const resetAction = StackActions.reset({
 						index: 0,
@@ -171,9 +170,9 @@ const Split = ({
 		return (
 			<>
 				<View style={[sharedStyles.container, sharedStyles.separatorLeft, { borderColor: themes[theme].separatorColor }]}>
-					<RoomContainer ref={ref => roomRef = ref} screenProps={{ split: tablet, theme }} />
+					<App ref={ref => roomRef = ref} />
 				</View>
-				<ModalContainer showModal={showModal} closeModal={closeModal} ref={setModalRef} screenProps={{ split: tablet, theme }} />
+				{/* <ModalContainer showModal={showModal} closeModal={closeModal} ref={setModalRef} /> */}
 			</>
 		);
 	}
@@ -195,7 +194,7 @@ const Tablet = ({
 				{children}
 			</View>
 			<Split split={split} tablet={tablet} theme={theme} showModal={showModal} closeModal={closeModal} setModalRef={setModalRef} />
-			<NotificationContainer ref={ref => notificationRef = ref} screenProps={{ theme }} />
+			{/* <NotificationContainer ref={ref => notificationRef = ref} /> */}
 		</View>
 	);
 };
diff --git a/app/views/AdminPanelView/index.js b/app/views/AdminPanelView/index.js
index 3bda33ffe..4311337e4 100644
--- a/app/views/AdminPanelView/index.js
+++ b/app/views/AdminPanelView/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { WebView } from 'react-native-webview';
-import { SafeAreaView } from 'react-navigation';
+import { SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import I18n from '../../i18n';
diff --git a/app/views/AutoTranslateView/index.js b/app/views/AutoTranslateView/index.js
index b9beac37a..899ca01bc 100644
--- a/app/views/AutoTranslateView/index.js
+++ b/app/views/AutoTranslateView/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, Switch, View, StyleSheet
+	FlatList, Switch, View, StyleSheet, SafeAreaView, ScrollView
 } from 'react-native';
-import { SafeAreaView, ScrollView } from 'react-navigation';
+// import { SafeAreaView, ScrollView } from 'react-navigation';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
diff --git a/app/views/CreateChannelView.js b/app/views/CreateChannelView.js
index 4709afd6c..2e00ecf35 100644
--- a/app/views/CreateChannelView.js
+++ b/app/views/CreateChannelView.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, SafeAreaView } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
 	View, Text, Switch, ScrollView, StyleSheet, FlatList
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 
 import TextInput from '../presentation/TextInput';
diff --git a/app/views/CreateDiscussionView/index.js b/app/views/CreateDiscussionView/index.js
index f9e02598c..a0977c917 100644
--- a/app/views/CreateDiscussionView/index.js
+++ b/app/views/CreateDiscussionView/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { ScrollView, Text } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { ScrollView, Text, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import isEqual from 'lodash/isEqual';
 
 import Loading from '../../containers/Loading';
diff --git a/app/views/DefaultBrowserView.js b/app/views/DefaultBrowserView.js
index 528d3d59a..78beb0ab7 100644
--- a/app/views/DefaultBrowserView.js
+++ b/app/views/DefaultBrowserView.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, FlatList, View, Text, Linking
+	StyleSheet, FlatList, View, Text, Linking, SafeAreaView
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import RNUserDefaults from 'rn-user-defaults';
 
 import I18n from '../i18n';
diff --git a/app/views/DirectoryView/index.js b/app/views/DirectoryView/index.js
index 180acde91..11f9ef355 100644
--- a/app/views/DirectoryView/index.js
+++ b/app/views/DirectoryView/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, FlatList, Text
+	View, FlatList, Text, SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import Touch from '../../utils/touch';
 import RocketChat from '../../lib/rocketchat';
diff --git a/app/views/InviteUsersEditView/index.js b/app/views/InviteUsersEditView/index.js
index 5287358af..a7254786c 100644
--- a/app/views/InviteUsersEditView/index.js
+++ b/app/views/InviteUsersEditView/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ScrollView, View } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { ScrollView, View, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 import RNPickerSelect from 'react-native-picker-select';
 
diff --git a/app/views/InviteUsersView/index.js b/app/views/InviteUsersView/index.js
index 2df7ee064..9a15402d6 100644
--- a/app/views/InviteUsersView/index.js
+++ b/app/views/InviteUsersView/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Share, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { View, Share, ScrollView, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
diff --git a/app/views/LanguageView/index.js b/app/views/LanguageView/index.js
index 716ba335e..b9ff06d5d 100644
--- a/app/views/LanguageView/index.js
+++ b/app/views/LanguageView/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList } from 'react-native';
+import { FlatList, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
diff --git a/app/views/LegalView.js b/app/views/LegalView.js
index 3c16429bb..3e6d6c8bd 100644
--- a/app/views/LegalView.js
+++ b/app/views/LegalView.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, ScrollView, View, StyleSheet
+	Text, ScrollView, View, StyleSheet, SafeAreaView
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 
 import Touch from '../utils/touch';
diff --git a/app/views/LivechatEditView.js b/app/views/LivechatEditView.js
index 5ac1692e1..7ad45616c 100644
--- a/app/views/LivechatEditView.js
+++ b/app/views/LivechatEditView.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Text, StyleSheet, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { Text, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 
 import { withTheme } from '../theme';
diff --git a/app/views/MessagesView/index.js b/app/views/MessagesView/index.js
index cd7b25201..79ae3b5c7 100644
--- a/app/views/MessagesView/index.js
+++ b/app/views/MessagesView/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text } from 'react-native';
+import { FlatList, View, Text, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import ActionSheet from 'react-native-action-sheet';
 
diff --git a/app/views/NewMessageView.js b/app/views/NewMessageView.js
index 42f9c1d5e..07e77ea98 100644
--- a/app/views/NewMessageView.js
+++ b/app/views/NewMessageView.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import {
 	View, StyleSheet, FlatList, Text
 } from 'react-native';
-import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import { connect, SafeAreaView } from 'react-redux';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';
diff --git a/app/views/NotificationPreferencesView/index.js b/app/views/NotificationPreferencesView/index.js
index 52acad338..c694bb663 100644
--- a/app/views/NotificationPreferencesView/index.js
+++ b/app/views/NotificationPreferencesView/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {
-	View, ScrollView, Switch, Text
+	View, ScrollView, Switch, Text, SafeAreaView
 } from 'react-native';
 import PropTypes from 'prop-types';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import database from '../../lib/database';
 import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js
index 4ca1ea4a7..083824d45 100644
--- a/app/views/ProfileView/index.js
+++ b/app/views/ProfileView/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ScrollView, Keyboard } from 'react-native';
+import { View, ScrollView, Keyboard, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import prompt from 'react-native-prompt-android';
 import SHA256 from 'js-sha256';
 import ImagePicker from 'react-native-image-crop-picker';
 import RNPickerSelect from 'react-native-picker-select';
-import { SafeAreaView } from 'react-navigation';
-import { HeaderBackButton } from 'react-navigation-stack';
+// import { SafeAreaView } from 'react-navigation';
+// import { HeaderBackButton } from 'react-navigation-stack';
 import equal from 'deep-equal';
 
 import Touch from '../../utils/touch';
@@ -36,14 +36,14 @@ import { getUserSelector } from '../../selectors/login';
 class ProfileView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
 		...themedHeader(screenProps.theme),
-		headerLeft: screenProps.split ? (
-			<HeaderBackButton
-				onPress={() => navigation.navigate('SettingsView')}
-				tintColor={themes[screenProps.theme].headerTintColor}
-			/>
-		) : (
-			<DrawerButton navigation={navigation} />
-		),
+		// headerLeft: screenProps.split ? (
+		// 	<HeaderBackButton
+		// 		onPress={() => navigation.navigate('SettingsView')}
+		// 		tintColor={themes[screenProps.theme].headerTintColor}
+		// 	/>
+		// ) : (
+		// 	<DrawerButton navigation={navigation} />
+		// ),
 		title: I18n.t('Profile')
 	})
 
diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index bd58e6906..19bbcda6a 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { FlatList, View, Text, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import moment from 'moment';
 import { connect } from 'react-redux';
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
index 626feb7a7..1bfb56279 100644
--- a/app/views/RoomActionsView/index.js
+++ b/app/views/RoomActionsView/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, SectionList, Text, Alert, Share
+	View, SectionList, Text, Alert, Share, SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import _ from 'lodash';
 
 import Touch from '../../utils/touch';
diff --git a/app/views/RoomInfoEditView/index.js b/app/views/RoomInfoEditView/index.js
index 592ff8467..eea35359e 100644
--- a/app/views/RoomInfoEditView/index.js
+++ b/app/views/RoomInfoEditView/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, View, ScrollView, TouchableOpacity, Keyboard, Alert
+	Text, View, ScrollView, TouchableOpacity, Keyboard, Alert, SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import isEqual from 'lodash/isEqual';
diff --git a/app/views/RoomInfoView/index.js b/app/views/RoomInfoView/index.js
index 7cc2cff56..fc875551d 100644
--- a/app/views/RoomInfoView/index.js
+++ b/app/views/RoomInfoView/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, ScrollView, SafeAreaView } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import UAParser from 'ua-parser-js';
 import _ from 'lodash';
 
diff --git a/app/views/RoomMembersView/index.js b/app/views/RoomMembersView/index.js
index 74e4bf6a8..59e73e615 100644
--- a/app/views/RoomMembersView/index.js
+++ b/app/views/RoomMembersView/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View } from 'react-native';
+import { FlatList, View, SafeAreaView } from 'react-native';
 import ActionSheet from 'react-native-action-sheet';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import * as Haptics from 'expo-haptics';
 import { Q } from '@nozbe/watermelondb';
 
diff --git a/app/views/RoomView/Header/RoomHeaderLeft.js b/app/views/RoomView/Header/RoomHeaderLeft.js
index 670dfd150..bf180f3e4 100644
--- a/app/views/RoomView/Header/RoomHeaderLeft.js
+++ b/app/views/RoomView/Header/RoomHeaderLeft.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet } from 'react-native';
-import { HeaderBackButton } from 'react-navigation-stack';
+// import { HeaderBackButton } from 'react-navigation-stack';
 
 import { isIOS } from '../../../utils/deviceInfo';
 import { themes } from '../../../constants/colors';
@@ -18,14 +18,15 @@ const RoomHeaderLeft = ({
 	tmid, unreadsCount, navigation, baseUrl, userId, token, title, t, theme, goRoomActionsView, split
 }) => {
 	if (!split || tmid) {
-		return (
-			<HeaderBackButton
-				title={unreadsCount > 999 ? '+999' : unreadsCount || ' '}
-				backTitleVisible={isIOS}
-				onPress={() => navigation.goBack()}
-				tintColor={themes[theme].headerTintColor}
-			/>
-		);
+		// return (
+		// 	<HeaderBackButton
+		// 		title={unreadsCount > 999 ? '+999' : unreadsCount || ' '}
+		// 		backTitleVisible={isIOS}
+		// 		onPress={() => navigation.goBack()}
+		// 		tintColor={themes[theme].headerTintColor}
+		// 	/>
+		// );
+		return null;
 	}
 	if (baseUrl && userId && token) {
 		return (
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 5dba91af7..2d1800ded 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, InteractionManager } from 'react-native';
+import { Text, View, InteractionManager, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';
diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js
index f151f42d1..9c12cd58f 100644
--- a/app/views/RoomsListView/ServerDropdown.js
+++ b/app/views/RoomsListView/ServerDropdown.js
@@ -5,7 +5,7 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import equal from 'deep-equal';
-import { withNavigation } from 'react-navigation';
+import { withNavigation } from '@react-navigation/compat';
 import RNUserDefaults from 'rn-user-defaults';
 
 import { toggleServerDropdown as toggleServerDropdownAction } from '../../actions/rooms';
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 15d00d1aa..a4132dc85 100644
--- a/app/views/RoomsListView/index.js
+++ b/app/views/RoomsListView/index.js
@@ -7,11 +7,12 @@ import {
 	Text,
 	Keyboard,
 	Dimensions,
-	RefreshControl
+	RefreshControl,
+	SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
 import { isEqual, orderBy } from 'lodash';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
 import { Q } from '@nozbe/watermelondb';
 
diff --git a/app/views/ScreenLockConfigView.js b/app/views/ScreenLockConfigView.js
index e4e3f5387..f57f56d57 100644
--- a/app/views/ScreenLockConfigView.js
+++ b/app/views/ScreenLockConfigView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, Switch, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { StyleSheet, Switch, ScrollView, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 
 import I18n from '../i18n';
diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.js
index 856d83713..a84ae9ca8 100644
--- a/app/views/SearchMessagesView/index.js
+++ b/app/views/SearchMessagesView/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, FlatList, Text } from 'react-native';
+import { View, FlatList, Text, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 
 import RCTextInput from '../../containers/TextInput';
diff --git a/app/views/SelectServerView.js b/app/views/SelectServerView.js
index 201642905..f9303573a 100644
--- a/app/views/SelectServerView.js
+++ b/app/views/SelectServerView.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-	FlatList, StyleSheet, View
+	FlatList, StyleSheet, View, SafeAreaView
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
diff --git a/app/views/SelectedUsersView.js b/app/views/SelectedUsersView.js
index 1a1ac044d..53c088b90 100644
--- a/app/views/SelectedUsersView.js
+++ b/app/views/SelectedUsersView.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, FlatList } from 'react-native';
+import { View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';
diff --git a/app/views/SetUsernameView.js b/app/views/SetUsernameView.js
index d6fbb5e3d..3303479c0 100644
--- a/app/views/SetUsernameView.js
+++ b/app/views/SetUsernameView.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, ScrollView, StyleSheet
+	Text, ScrollView, StyleSheet, SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
 
 import { loginRequest as loginRequestAction } from '../actions/login';
diff --git a/app/views/SettingsView/index.js b/app/views/SettingsView/index.js
index 2fda8de9b..0dcd829aa 100644
--- a/app/views/SettingsView/index.js
+++ b/app/views/SettingsView/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-	View, Linking, ScrollView, Switch, Share, Clipboard
+	View, Linking, ScrollView, Switch, Share, Clipboard, SafeAreaView
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import AsyncStorage from '@react-native-community/async-storage';
 
 import { logout as logoutAction } from '../../actions/login';
diff --git a/app/views/ShareListView/index.js b/app/views/ShareListView/index.js
index 3deb9685f..d15379a5e 100644
--- a/app/views/ShareListView/index.js
+++ b/app/views/ShareListView/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, FlatList, Keyboard, BackHandler
+	View, Text, FlatList, Keyboard, BackHandler, SafeAreaView
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import ShareExtension from 'rn-extensions-share';
 import { connect } from 'react-redux';
 import RNFetchBlob from 'rn-fetch-blob';
diff --git a/app/views/StatusView.js b/app/views/StatusView.js
index 335529907..9dd927bbd 100644
--- a/app/views/StatusView.js
+++ b/app/views/StatusView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { FlatList, StyleSheet, SafeAreaView } from 'react-native';
+// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 
 import I18n from '../i18n';
diff --git a/app/views/ThemeView.js b/app/views/ThemeView.js
index 1db0fb71c..36f567ca2 100644
--- a/app/views/ThemeView.js
+++ b/app/views/ThemeView.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, Text, View, StyleSheet
+	FlatList, Text, View, StyleSheet, SafeAreaView
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import RNUserDefaults from 'rn-user-defaults';
 
 import I18n from '../i18n';
diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js
index eb664d672..650ef0e35 100644
--- a/app/views/ThreadMessagesView/index.js
+++ b/app/views/ThreadMessagesView/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, View, Text, InteractionManager
+	FlatList, View, Text, InteractionManager, SafeAreaView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+// import { SafeAreaView } from 'react-navigation';
 import moment from 'moment';
 import orderBy from 'lodash/orderBy';
 import { Q } from '@nozbe/watermelondb';
diff --git a/package.json b/package.json
index 77e6e76d2..90b4bf65f 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
     "@react-native-community/datetimepicker": "2.3.2",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/slider": "2.0.9",
+    "@react-navigation/compat": "^5.1.23",
+    "@react-navigation/drawer": "^5.7.7",
     "@react-navigation/native": "^5.4.2",
     "@react-navigation/stack": "^5.3.9",
     "@rocket.chat/sdk": "djorkaeffalexandre/Rocket.Chat.js.SDK#test.fix-ddp",
diff --git a/yarn.lock b/yarn.lock
index e0fdc85a7..5574eeda0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1764,6 +1764,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-2.0.2.tgz#622b190294b1310c4825c98daeaee1c8443f7124"
   integrity sha512-CKVhIZdX/Cmb80muog8sKpi5vM8npwFp4tx4Dj1IvTBidZweuO22+VH2rDOj7E0LzdV9IYRJ4FGBwcPBD2qUrQ==
 
+"@react-navigation/compat@^5.1.23":
+  version "5.1.23"
+  resolved "https://registry.yarnpkg.com/@react-navigation/compat/-/compat-5.1.23.tgz#2e43727815919c38ef7bd198cdbf0ca08ec85599"
+  integrity sha512-JczqRNZujNcz32SsNJeBEcMatsQix/9MIPOXZcAnmUV8UxYpcXt8NKD0Us60evqVc8pZDTV3vCLvAOkOY7OxeA==
+
 "@react-navigation/core@^5.8.1":
   version "5.8.1"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.8.1.tgz#4f0d744a10eec7dc8bfad2901eec5fb9623b0972"
@@ -1776,6 +1781,14 @@
     react-is "^16.13.0"
     use-subscription "^1.4.0"
 
+"@react-navigation/drawer@^5.7.7":
+  version "5.7.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.7.7.tgz#25d088b7bf53368085bc88a853071e3c14560296"
+  integrity sha512-E/1kcZexfIXC3uLJSokAb5CD4qmOF1udjZ8QzDyzKWgygWk6YhvXX+koCENOvGnslU0HfUH/BCoecxksilJ7kA==
+  dependencies:
+    color "^3.1.2"
+    react-native-iphone-x-helper "^1.2.1"
+
 "@react-navigation/native@^5.4.2":
   version "5.4.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.4.2.tgz#256d4f67aa97083de9c8ff52cdc77ac039b66350"