From e382a0fada97a42eeb53d11cb0d1fe4bf77e913e Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 22 Mar 2021 15:19:22 -0400
Subject: [PATCH] Move NavigationContainer to App

---
 App.js                     | 21 ++++++-----
 navigation/AppNavigator.js | 76 ++++++++++++++++++--------------------
 2 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/App.js b/App.js
index f886a61..676dd7e 100644
--- a/App.js
+++ b/App.js
@@ -3,20 +3,21 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import React, { useContext, useEffect, useState } from 'react';
-import { AsyncStorage } from 'react-native';
-import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
-import { ThemeContext, ThemeProvider } from 'react-native-elements';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { observer } from 'mobx-react';
-import { AsyncTrunk } from 'mobx-sync';
+import { Ionicons } from '@expo/vector-icons';
+import { NavigationContainer } from '@react-navigation/native';
 import { AppLoading } from 'expo';
 import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBar } from 'expo-status-bar';
-import { Ionicons } from '@expo/vector-icons';
+import { observer } from 'mobx-react';
+import { AsyncTrunk } from 'mobx-sync';
 import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useState } from 'react';
+import { AsyncStorage } from 'react-native';
+import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
+import { ThemeContext, ThemeProvider } from 'react-native-elements';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import ThemeSwitcher from './components/ThemeSwitcher';
 import { useStores } from './hooks/useStores';
@@ -117,7 +118,9 @@ const App = observer(({ skipLoadingScreen }) => {
 						backgroundColor={theme.colors.grey0}
 						hidden={rootStore.isFullscreen}
 					/>
-					<AppNavigator />
+					<NavigationContainer theme={rootStore.settingStore.theme.Navigation}>
+						<AppNavigator />
+					</NavigationContainer>
 				</ThemeProvider>
 			</SafeAreaProvider>
 		</AppearanceProvider>
diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js
index dc9240b..2431cfc 100644
--- a/navigation/AppNavigator.js
+++ b/navigation/AppNavigator.js
@@ -3,22 +3,20 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import * as SplashScreen from 'expo-splash-screen';
-import {
-	getFocusedRouteNameFromRoute,
-	NavigationContainer
-} from '@react-navigation/native';
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as SplashScreen from 'expo-splash-screen';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import AddServerScreen from '../screens/AddServerScreen';
 import Screens from '../constants/Screens';
-import TabNavigator from './TabNavigator';
 import { useStores } from '../hooks/useStores';
+import AddServerScreen from '../screens/AddServerScreen';
 
-const RootStack = createStackNavigator();
+import TabNavigator from './TabNavigator';
+
+const AppStack = createStackNavigator();
 
 const AppNavigator = observer(() => {
 	const { rootStore } = useStores();
@@ -28,38 +26,36 @@ const AppNavigator = observer(() => {
 	SplashScreen.hideAsync().catch(console.debug);
 
 	return (
-		<NavigationContainer theme={rootStore.settingStore.theme.Navigation}>
-			<RootStack.Navigator
-				initialRouteName={(rootStore.serverStore.servers?.length > 0) ? Screens.MainScreen : Screens.AddServerScreen}
-				headerMode='screen'
-				screenOptions={{ headerShown: false }}
-			>
-				<RootStack.Screen
-					name={Screens.MainScreen}
-					component={TabNavigator}
-					options={({ route }) => {
-						const routeName =
-							// Get the currently active route name in the tab navigator
-							getFocusedRouteNameFromRoute(route) ||
-							// If state doesn't exist, we need to default to `screen` param if available, or the initial screen
-							// In our case, it's "Main" as that's the first screen inside the navigator
-							route.params?.screen || Screens.MainScreen;
-						return ({
-							headerShown: routeName === Screens.SettingsTab,
-							title: t(`headings.${routeName.toLowerCase()}`)
-						});
-					}}
-				/>
-				<RootStack.Screen
-					name={Screens.AddServerScreen}
-					component={AddServerScreen}
-					options={{
-						headerShown: rootStore.serverStore.servers?.length > 0,
-						title: t('headings.addServer')
-					}}
-				/>
-			</RootStack.Navigator>
-		</NavigationContainer>
+		<AppStack.Navigator
+			initialRouteName={(rootStore.serverStore.servers?.length > 0) ? Screens.MainScreen : Screens.AddServerScreen}
+			headerMode='screen'
+			screenOptions={{ headerShown: false }}
+		>
+			<AppStack.Screen
+				name={Screens.MainScreen}
+				component={TabNavigator}
+				options={({ route }) => {
+					const routeName =
+						// Get the currently active route name in the tab navigator
+						getFocusedRouteNameFromRoute(route) ||
+						// If state doesn't exist, we need to default to `screen` param if available, or the initial screen
+						// In our case, it's "Main" as that's the first screen inside the navigator
+						route.params?.screen || Screens.MainScreen;
+					return ({
+						headerShown: routeName === Screens.SettingsTab,
+						title: t(`headings.${routeName.toLowerCase()}`)
+					});
+				}}
+			/>
+			<AppStack.Screen
+				name={Screens.AddServerScreen}
+				component={AddServerScreen}
+				options={{
+					headerShown: rootStore.serverStore.servers?.length > 0,
+					title: t('headings.addServer')
+				}}
+			/>
+		</AppStack.Navigator>
 	);
 });