TabRowNavigator is now quite usable and almost pleasing to look at

front/components/navigators/TabRowNavigator.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StyleProp, ViewStyle, StyleSheet } from "react-native";
-import { View, Text, Pressable, Box, Row, Icon } from "native-base";
+import { View, Text, Pressable, Box, Row, Icon, Button } from "native-base";
 import {
 	createNavigatorFactory,
 	DefaultNavigatorOptions,
@@ -12,6 +12,7 @@ import {
 	TabRouterOptions,
 	useNavigationBuilder,
 } from "@react-navigation/native";
+import TextButton from "../TextButton";
 
 // Props accepted by the view
 type TabNavigationConfig = {
@@ -76,76 +77,62 @@ function TabNavigator({
 							display: "flex",
 							flexDirection: "column",
 							justifyContent: "flex-start",
-							width: "300px",
+                            borderRightWidth: 1,
+                            borderRightColor: "lightgray",
 						},
 						tabBarStyle,
 					]}
 				>
-					{state.routes.map((route) => (
+					{state.routes.map((route) => {
-						<Pressable
+						const isSelected = route.key === state.routes[state.index]?.key;
-							key={route.key}
+						const { options } = descriptors[route.key];
-							onPress={() => {
-								const event = navigation.emit({
-									type: "tabPress",
-									target: route.key,
-									canPreventDefault: true,
-									data: {
-										isAlreadyFocused:
-											route.key === state.routes[state.index]?.key,
-									},
-								});
 
-								if (!event.defaultPrevented) {
+						return (
-									navigation.dispatch({
+							<Button
-										...CommonActions.navigate(route),
+								variant={"ghost"}
-										target: state.key,
+								key={route.key}
+								onPress={() => {
+									const event = navigation.emit({
+										type: "tabPress",
+										target: route.key,
+										canPreventDefault: true,
+										data: {
+											isAlreadyFocused: isSelected,
+										},
 									});
-								}
-							}}
-							style={{ flex: 1 }}
-						>
-							{({ isHovered, isPressed }) => (
-								<Box
-									style={{
-										flex: 1,
-										justifyContent: "center",
-										alignItems: "center",
-                                        flexDirection: "row",
-									}}
-									bgColor={(() => {
-										let colorLevel = 0;
-										if (isHovered) {
-											colorLevel += 100;
-										}
-										if (route.key === state.routes[state.index]?.key) {
-											colorLevel += 300;
-										}
-										if (isPressed) {
-											colorLevel += 200;
-										}
 
-										if (colorLevel <= 0) {
+									if (!event.defaultPrevented) {
-											return "transparent";
+										navigation.dispatch({
-										}
+											...CommonActions.navigate(route),
-										return `primary.${colorLevel}`;
+											target: state.key,
-									})()}
+										});
-								>
+									}
-									{descriptors[route.key]?.options.iconProvider &&
+								}}
-										descriptors[route.key]?.options.iconName && (
+								bgColor={isSelected ? "primary.300" : undefined}
-											<Icon
+								style={{
-												as={descriptors[route.key]?.options.iconProvider}
+                                    justifyContent: "flex-start",
-												name={descriptors[route.key]?.options.iconName}
+									padding: "10px",
-												size="lg"
+									height: "50px",
-												color="white"
+									width: "250px",
-											/>
+								}}
-										)}
+							>
-									<Text>
+								<Row style={{ alignItems: "center" }}>
-										{descriptors[route.key]?.options.title || route.name}
+									{options.iconProvider && options.iconName && (
+										<Icon
+											as={options.iconProvider}
+											name={options.iconName}
+											size="xl"
+											color="black"
+                                            margin={2}
+										/>
+									)}
+									<Text fontSize="lg" isTruncated w="100%">
+										{options.title || route.name}
 									</Text>
-								</Box>
+								</Row>
-							)}
+							</Button>
-						</Pressable>
+						);
-					))}
+					})}
 				</View>
 				<View style={[{ flex: 1, width: "700px" }, contentStyle]}>
 					{state.routes.map((route, i) => {

front/views/SettingsView.tsx

@@ -168,9 +168,9 @@ const NotificationsView = ({navigation}) => {
             <Heading style={{ textAlign: "center" }}>
                 <Translate translationKey='notifBtn'/>
             </Heading>
-            <Button style={{ margin: 10}} onPress={() => navigation.navigate('Main')} >
+            <TextButton style={{ margin: 10}} onPress={() => navigation.navigate('Main')} translate = {{
-                <Translate translationKey='backBtn'/>
+                translationKey: 'backBtn'
-            </Button>
+            }} />
             <View style={{margin: 20}} >
                 <Text style={{ textAlign: "center" }}>Push notifications</Text>
                 <Switch value={settings.enablePushNotifications} style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"