From 322e9ebe913c9355013da21f337deedcda9be45d Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Wed, 30 Dec 2020 18:18:39 -0500
Subject: [PATCH] Add setting to toggle tab labels

---
 langs/en.json              |  1 +
 navigation/AppNavigator.js | 10 +++++++++-
 screens/SettingsScreen.js  |  7 +++++++
 stores/SettingStore.js     |  7 +++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/langs/en.json b/langs/en.json
index 75e7d649b..3f9f21212 100644
--- 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
index b0ef9963b..fc7532bc4 100644
--- 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
index 8799e4e92..9fecaa4ec 100644
--- 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
index d95803701..d26037102 100644
--- a/stores/SettingStore.js
+++ b/stores/SettingStore.js
@@ -25,10 +25,16 @@ 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;
 	}
 }
 
@@ -36,5 +42,6 @@ decorate(SettingStore, {
 	activeServer: observable,
 	isRotationLockEnabled: observable,
 	isScreenLockEnabled: observable,
+	isTabLabelsEnabled: observable,
 	reset: action
 });