Merge pull request #202 from thornbill/add-tab-labels-setting

Add setting to toggle tab labels
jellyfin · Jan 2, 2021 · a07c07d · a07c07d
2 parents e6cb203 + 322e9eb
commit a07c07d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/langs/en.json b/langs/en.json
@@ -48,6 +48,7 @@
  "version": "Version: {{version}}",
  "keepAwake": "Keep Screen Awake",
  "rotationLock": "Rotation Lock",
+ "tabLabels": "Show Tab Labels",
  "expoVersion": "Expo Version: {{version}}"
  },
  "links": {

diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js
@@ -5,6 +5,7 @@
  */
 import React, { useContext, useEffect } from 'react';
 import { ThemeContext } from 'react-native-elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
  NavigationContainer,
  getFocusedRouteNameFromRoute,
@@ -78,16 +79,23 @@ const Home = observer(() => {
 });
 
 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
+ inactiveTintColor: theme.colors.grey1,
+ showLabel: rootStore.settingStore.isTabLabelsEnabled,
+ style: tabBarStyle
  }}
  >
  <Tab.Screen

diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
@@ -118,6 +118,13 @@ const SettingsScreen = observer(() => {
  });
  }
 
+ settingsData.push({
+ key: 'tab-labels-switch',
+ title: t('settings.tabLabels'),
+ value: rootStore.settingStore.isTabLabelsEnabled,
+ onValueChange: action(value => rootStore.settingStore.isTabLabelsEnabled = value)
+ });
+
  return [
  {
  title: t('headings.servers'),

diff --git a/stores/SettingStore.js b/stores/SettingStore.js
@@ -25,16 +25,23 @@ export default class SettingStore {
  */
  isScreenLockEnabled = Platform.OS === 'ios' ? (parseInt(Platform.Version, 10) < 14) : true
 
+ /**
+ * Are tab labels enabled
+ */
+ isTabLabelsEnabled = true
+
  reset() {
  this.activeServer = 0;
  this.isRotationLockEnabled = Platform.OS === 'ios' && !Platform.isPad;
  this.isScreenLockEnabled = Platform.OS === 'ios' ? (parseInt(Platform.Version, 10) < 14) : true;
+ this.isTabLabelsEnabled = true;
  }
 }
 
 decorate(SettingStore, {
  activeServer: observable,
  isRotationLockEnabled: observable,
  isScreenLockEnabled: observable,
+ isTabLabelsEnabled: observable,
  reset: action
 });