jellyfin/jellyfin-expo
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-expo.git synced 2024-11-23 05:59:39 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Move NavigationContainer to App

Browse Source
This commit is contained in:
Bill Thornton 2021-03-22 15:19:22 -04:00
parent 9e82d3d7a8
commit e382a0fada
2 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
App.js
View File

@ -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>

76
navigation/AppNavigator.js
View File

@ -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>
);
});