diff --git a/app/AppContainer.js b/app/AppContainer.js
new file mode 100644
index 000000000..f717761dd
--- /dev/null
+++ b/app/AppContainer.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { connect } from 'react-redux';
+import { defaultHeader, onNavigationStateChange } from './utils/navigation';
+import Navigation from './lib/Navigation';
+
+// Stacks
+import AuthLoadingView from './views/AuthLoadingView';
+
+// SetUsername Stack
+import SetUsernameView from './views/SetUsernameView';
+
+import OutsideStack from './stacks/OutsideStack';
+import InsideStack from './stacks/InsideStack';
+
+// SetUsernameStack
+const SetUsername = createStackNavigator();
+const SetUsernameStack = () => (
+	<SetUsername.Navigator screenOptions={defaultHeader}>
+		<SetUsername.Screen
+			name='SetUsernameView'
+			component={SetUsernameView}
+		/>
+	</SetUsername.Navigator>
+);
+
+// App
+const Stack = createStackNavigator();
+const App = ({ root }) => {
+	if (!root) {
+		return null;
+	}
+
+	return (
+		<NavigationContainer
+			ref={(navigatorRef) => {
+				Navigation.setTopLevelNavigator(navigatorRef);
+			}}
+			onNavigationStateChange={onNavigationStateChange}
+		>
+			<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+				<>
+					{root === 'loading' ? (
+						<Stack.Screen
+							name='AuthLoading'
+							component={AuthLoadingView}
+						/>
+					) : null}
+					{root === 'outside' ? (
+						<Stack.Screen
+							name='OutsideStack'
+							component={OutsideStack}
+						/>
+					) : null}
+					{root === 'inside' ? (
+						<Stack.Screen
+							name='InsideStack'
+							component={InsideStack}
+						/>
+					) : null}
+					{root === 'setUsername' ? (
+						<Stack.Screen
+							name='SetUsernameStack'
+							component={SetUsernameStack}
+						/>
+					) : null}
+				</>
+			</Stack.Navigator>
+		</NavigationContainer>
+	);
+};
+const mapStateToProps = state => ({
+	root: state.app.root
+});
+
+App.propTypes = {
+	root: PropTypes.string
+};
+
+const AppContainer = connect(mapStateToProps)(App);
+export default AppContainer;
diff --git a/app/index.js b/app/index.js
index f4a84363f..2e3ec2199 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,7 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Linking } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
 import { AppearanceProvider } from 'react-native-appearance';
 import { Provider } from 'react-redux';
 import RNUserDefaults from 'rn-user-defaults';
@@ -31,16 +29,7 @@ import {
 import { KEY_COMMAND } from './commands';
 import Tablet, { initTabletNav } from './tablet';
 import { SplitContext } from './split';
-import { defaultHeader, onNavigationStateChange } from './utils/navigation';
-
-// App Stack
-import AuthLoadingView from './views/AuthLoadingView';
-
-// SetUsername Stack
-import SetUsernameView from './views/SetUsernameView';
-
-import OutsideStack from './stacks/OutsideStack';
-import InsideStack from './stacks/InsideStack';
+import AppContainer from './AppContainer';
 
 RNScreens.enableScreens();
 
@@ -58,60 +47,6 @@ const parseDeepLinking = (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);
-
-	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);
@@ -223,7 +158,7 @@ export default class Root extends React.Component {
 	render() {
 		const { split, themePreferences, theme } = this.state;
 
-		let content = <App />;
+		let content = <AppContainer />;
 
 		if (isTablet) {
 			const { inside, showModal } = this.state;
diff --git a/app/sagas/init.js b/app/sagas/init.js
index ae47a1430..101e84ca8 100644
--- a/app/sagas/init.js
+++ b/app/sagas/init.js
@@ -113,16 +113,7 @@ const restore = function* restore() {
 	}
 };
 
-const start = function* start({ root, text }) {
-	if (root === 'inside') {
-		yield Navigation.navigate('InsideStack');
-	} else if (root === 'setUsername') {
-		yield Navigation.navigate('SetUsernameStack');
-	} else if (root === 'outside') {
-		yield Navigation.navigate('OutsideStack');
-	} else if (root === 'loading') {
-		yield Navigation.navigate('AuthLoading', { text });
-	}
+const start = function start() {
 	RNBootSplash.hide();
 };