mirror of
https://github.com/jellyfin/jellyfin-expo.git
synced 2025-02-17 04:49:22 +00:00
Merge pull request #238 from thornbill/split-navigators
Refactor navigation code into multiple files
This commit is contained in:
Bill Thornton
GitHub
commit
d2e8a069f8
@ -3,118 +3,22 @@
|
||||
* 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 } from 'react';
|
||||
import { ThemeContext } from 'react-native-elements';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import {
|
||||
getFocusedRouteNameFromRoute,
|
||||
NavigationContainer,
|
||||
useNavigation
|
||||
NavigationContainer
|
||||
} from '@react-navigation/native';
|
||||
import { createStackNavigator } from '@react-navigation/stack';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { observer } from 'mobx-react';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useStores } from '../hooks/useStores';
|
||||
import Screens from '../constants/Screens';
|
||||
import AddServerScreen from '../screens/AddServerScreen';
|
||||
import ErrorScreen from '../screens/ErrorScreen';
|
||||
import HomeScreen from '../screens/HomeScreen';
|
||||
import SettingsScreen from '../screens/SettingsScreen';
|
||||
import { getIconName } from '../utils/Icons';
|
||||
import Screens from '../constants/Screens';
|
||||
import TabNavigator from './TabNavigator';
|
||||
import { useStores } from '../hooks/useStores';
|
||||
|
||||
const RootStack = createStackNavigator();
|
||||
const Tab = createBottomTabNavigator();
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
function TabIcon(routeName, color, size) {
|
||||
let iconName = null;
|
||||
if (routeName === Screens.HomeTab) {
|
||||
iconName = getIconName('tv');
|
||||
} else if (routeName === Screens.SettingsTab) {
|
||||
iconName = getIconName('cog');
|
||||
}
|
||||
|
||||
return (
|
||||
iconName ? <Ionicons name={iconName} color={color} size={size} /> : null
|
||||
);
|
||||
}
|
||||
|
||||
const Home = observer(() => {
|
||||
const { rootStore } = useStores();
|
||||
const navigation = useNavigation();
|
||||
|
||||
useEffect(() => {
|
||||
// Show/hide the bottom tab bar
|
||||
navigation.setOptions({
|
||||
tabBarVisible: !rootStore.isFullscreen
|
||||
});
|
||||
}, [ rootStore.isFullscreen ]);
|
||||
|
||||
return (
|
||||
<HomeStack.Navigator
|
||||
mode='modal'
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
animationEnabled: false,
|
||||
animationTypeForReplace: 'pop'
|
||||
}}
|
||||
>
|
||||
<HomeStack.Screen
|
||||
name={Screens.HomeScreen}
|
||||
component={HomeScreen}
|
||||
/>
|
||||
<HomeStack.Screen
|
||||
name={Screens.ErrorScreen}
|
||||
component={ErrorScreen}
|
||||
options={{
|
||||
gestureEnabled: false
|
||||
}}
|
||||
/>
|
||||
</HomeStack.Navigator>
|
||||
);
|
||||
});
|
||||
|
||||
const Main = observer(() => {
|
||||
const { rootStore } = useStores();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { t } = useTranslation();
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
// Use a smaller height for the tab bar when labels are disabled
|
||||
const tabBarStyle = !rootStore.settingStore.isTabLabelsEnabled ? { height: insets.bottom + 28 } : {};
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
tabBarIcon: ({ color, size }) => TabIcon(route.name, color, size)
|
||||
})}
|
||||
tabBarOptions={{
|
||||
inactiveTintColor: theme.colors.grey1,
|
||||
showLabel: rootStore.settingStore.isTabLabelsEnabled,
|
||||
style: tabBarStyle
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name={Screens.HomeTab}
|
||||
component={Home}
|
||||
options={{
|
||||
title: t('headings.home')
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name={Screens.SettingsTab}
|
||||
component={SettingsScreen}
|
||||
options={{
|
||||
title: t('headings.settings')
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
});
|
||||
|
||||
const AppNavigator = observer(() => {
|
||||
const { rootStore } = useStores();
|
||||
@ -132,7 +36,7 @@ const AppNavigator = observer(() => {
|
||||
>
|
||||
<RootStack.Screen
|
||||
name={Screens.MainScreen}
|
||||
component={Main}
|
||||
component={TabNavigator}
|
||||
options={({ route }) => {
|
||||
const routeName =
|
||||
// Get the currently active route name in the tab navigator
|
||||
|
||||
53
navigation/HomeNavigator.js
Normal file
53
navigation/HomeNavigator.js
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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, { useEffect } from 'react';
|
||||
import { createStackNavigator } from '@react-navigation/stack';
|
||||
import { observer } from 'mobx-react';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
import ErrorScreen from '../screens/ErrorScreen';
|
||||
import HomeScreen from '../screens/HomeScreen';
|
||||
import Screens from '../constants/Screens';
|
||||
import { useStores } from '../hooks/useStores';
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
const HomeNavigator = observer(() => {
|
||||
const { rootStore } = useStores();
|
||||
const navigation = useNavigation();
|
||||
|
||||
useEffect(() => {
|
||||
// Show/hide the bottom tab bar
|
||||
navigation.setOptions({
|
||||
tabBarVisible: !rootStore.isFullscreen
|
||||
});
|
||||
}, [ rootStore.isFullscreen ]);
|
||||
|
||||
return (
|
||||
<HomeStack.Navigator
|
||||
mode='modal'
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
animationEnabled: false,
|
||||
animationTypeForReplace: 'pop'
|
||||
}}
|
||||
>
|
||||
<HomeStack.Screen
|
||||
name={Screens.HomeScreen}
|
||||
component={HomeScreen}
|
||||
/>
|
||||
<HomeStack.Screen
|
||||
name={Screens.ErrorScreen}
|
||||
component={ErrorScreen}
|
||||
options={{
|
||||
gestureEnabled: false
|
||||
}}
|
||||
/>
|
||||
</HomeStack.Navigator>
|
||||
);
|
||||
});
|
||||
|
||||
export default HomeNavigator;
|
||||
73
navigation/TabNavigator.js
Normal file
73
navigation/TabNavigator.js
Normal file
@ -0,0 +1,73 @@
|
||||
/**
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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 } from 'react';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { observer } from 'mobx-react';
|
||||
import { ThemeContext } from 'react-native-elements';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { getIconName } from '../utils/Icons';
|
||||
import HomeNavigator from './HomeNavigator';
|
||||
import Screens from '../constants/Screens';
|
||||
import SettingsScreen from '../screens/SettingsScreen';
|
||||
import { useStores } from '../hooks/useStores';
|
||||
|
||||
function TabIcon(routeName, color, size) {
|
||||
let iconName = null;
|
||||
if (routeName === Screens.HomeTab) {
|
||||
iconName = getIconName('tv');
|
||||
} else if (routeName === Screens.SettingsTab) {
|
||||
iconName = getIconName('cog');
|
||||
}
|
||||
|
||||
return (
|
||||
iconName ? <Ionicons name={iconName} color={color} size={size} /> : null
|
||||
);
|
||||
}
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
const TabNavigator = observer(() => {
|
||||
const { rootStore } = useStores();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { t } = useTranslation();
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
// Use a smaller height for the tab bar when labels are disabled
|
||||
const tabBarStyle = !rootStore.settingStore.isTabLabelsEnabled ? { height: insets.bottom + 28 } : {};
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
tabBarIcon: ({ color, size }) => TabIcon(route.name, color, size)
|
||||
})}
|
||||
tabBarOptions={{
|
||||
inactiveTintColor: theme.colors.grey1,
|
||||
showLabel: rootStore.settingStore.isTabLabelsEnabled,
|
||||
style: tabBarStyle
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name={Screens.HomeTab}
|
||||
component={HomeNavigator}
|
||||
options={{
|
||||
title: t('headings.home')
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name={Screens.SettingsTab}
|
||||
component={SettingsScreen}
|
||||
options={{
|
||||
title: t('headings.settings')
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
});
|
||||
|
||||
export default TabNavigator;
|
||||
Loading…
x
Reference in New Issue
Block a user