v1 of TabRowNavigator

front/Navigation.tsx

@@ -7,7 +7,7 @@ import SongLobbyView from './views/SongLobbyView';
 import AuthenticationView from './views/AuthenticationView';
 import HomeView from './views/HomeView';
 import SearchView from './views/SearchView';
-import SetttingsNavigator from './views/settings/SettingsView';
+import SetttingsNavigator from './views/SettingsView';
 import { useQuery } from 'react-query';
 import API from './API';
 import PlayView from './views/PlayView';

front/components/forms/changePasswordForm.tsx

@@ -40,12 +40,6 @@ const ChangePasswordForm = ({ onSubmit }: ChangePasswordFormProps) => {
 		password: string()
 			.min(4, translate("passwordTooShort"))
 			.max(100, translate("passwordTooLong"))
-			.matches(
-				/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
-				translate(
-					"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
-				)
-			)
 			.required("Password is required"),
 	};
 	const toast = useToast();

front/components/navigators/TabRowNavigator.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import {
+	View,
+	Text,
+	Pressable,
+	StyleProp,
+	ViewStyle,
+	StyleSheet,
+} from "react-native";
+import { Box } from "native-base";
+import {
+	createNavigatorFactory,
+	DefaultNavigatorOptions,
+	ParamListBase,
+	CommonActions,
+	TabActionHelpers,
+	TabNavigationState,
+	TabRouter,
+	TabRouterOptions,
+	useNavigationBuilder,
+} from "@react-navigation/native";
+
+// Props accepted by the view
+type TabNavigationConfig = {
+	tabBarStyle: StyleProp<ViewStyle>;
+	contentStyle: StyleProp<ViewStyle>;
+};
+
+// Supported screen options
+type TabNavigationOptions = {
+	title?: string;
+};
+
+// Map of event name and the type of data (in event.data)
+//
+// canPreventDefault: true adds the defaultPrevented property to the
+// emitted events.
+type TabNavigationEventMap = {
+	tabPress: {
+		data: { isAlreadyFocused: boolean };
+		canPreventDefault: true;
+	};
+};
+
+// The props accepted by the component is a combination of 3 things
+type Props = DefaultNavigatorOptions<
+	ParamListBase,
+	TabNavigationState<ParamListBase>,
+	TabNavigationOptions,
+	TabNavigationEventMap
+> &
+	TabRouterOptions &
+	TabNavigationConfig;
+
+function TabNavigator({
+	initialRouteName,
+	children,
+	screenOptions,
+	tabBarStyle,
+	contentStyle,
+}: Props) {
+	const { state, navigation, descriptors, NavigationContent } =
+		useNavigationBuilder<
+			TabNavigationState<ParamListBase>,
+			TabRouterOptions,
+			TabActionHelpers<ParamListBase>,
+			TabNavigationOptions,
+			TabNavigationEventMap
+		>(TabRouter, {
+			children,
+			screenOptions,
+			initialRouteName,
+		});
+
+	return (
+		<NavigationContent>
+            <Box style={{ display: "flex", flexDirection: "row" }}>
+			<View style={[{ flexDirection: "column", width: "300px" }, tabBarStyle]}>
+				{state.routes.map((route) => (
+					<Pressable
+						key={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) {
+								navigation.dispatch({
+									...CommonActions.navigate(route),
+									target: state.key,
+								});
+							}
+						}}
+						style={{ flex: 1 }}
+					>
+						<Text>{descriptors[route.key].options.title || route.name}</Text>
+					</Pressable>
+				))}
+			</View>
+			<View style={[{ flex: 1, width: "700px" }, contentStyle]}>
+				{state.routes.map((route, i) => {
+					return (
+						<View
+							key={route.key}
+							style={[
+								StyleSheet.absoluteFill,
+								{ display: i === state.index ? "flex" : "none" },
+							]}
+						>
+							{descriptors[route.key].render()}
+						</View>
+					);
+				})}
+			</View>
+            </Box>
+		</NavigationContent>
+	);
+}
+
+export default createNavigatorFactory<
+	TabNavigationState<ParamListBase>,
+	TabNavigationOptions,
+	TabNavigationEventMap,
+	typeof TabNavigator
+>(TabNavigator);

front/views/SettingsView.tsx

@@ -9,6 +9,7 @@ import { useLanguage } from "../state/LanguageSlice";
 import { SettingsState, updateSettings } from '../state/SettingsSlice';
 import { AvailableLanguages, translate, Translate } from "../i18n/i18n";
 import TextButton from '../components/TextButton';
+import createTabRowNavigator from '../components/navigators/TabRowNavigator';
 
 import API from '../API';
 
@@ -239,7 +240,6 @@ export const ChangeEmailView = ({navigation}) => {
     return (
         <Center style={{ flex: 1}}>
             <Button onPress={() => navigation.navigate('Main')}>Back</Button>
-            <ChangeEmailView></ChangeEmailView>
         </Center>
     )
 }
@@ -253,17 +253,19 @@ export const GoogleAccountView = ({navigation}) => {
     )
 }
 
+const TabRow = createTabRowNavigator(); 
+
 const SetttingsNavigator = () => {
     return (
-        <SettingsStack.Navigator initialRouteName='Main' screenOptions={{headerShown: false}}>
-            <SettingsStack.Screen name='Main' component={MainView} />
-            <SettingsStack.Screen name='Preferences' component={PreferencesView} />
-            <SettingsStack.Screen name='Notifications' component={NotificationsView} />
-            <SettingsStack.Screen name='Privacy' component={PrivacyView} />
-            <SettingsStack.Screen name='ChangePassword' component={ChangePasswordView} />
-            <SettingsStack.Screen name='ChangeEmail' component={ChangeEmailView} />
-            <SettingsStack.Screen name='GoogleAccount' component={GoogleAccountView} />
-        </SettingsStack.Navigator>
+        <TabRow.Navigator initialRouteName='Main' screenOptions={{headerShown: false}}>
+            <TabRow.Screen name='Main' component={MainView} />
+            <TabRow.Screen name='Preferences' component={PreferencesView} />
+            <TabRow.Screen name='Notifications' component={NotificationsView} />
+            <TabRow.Screen name='Privacy' component={PrivacyView} />
+            <TabRow.Screen name='ChangePassword' component={ChangePasswordView} />
+            <TabRow.Screen name='ChangeEmail' component={ChangeEmailView} />
+            <TabRow.Screen name='GoogleAccount' component={GoogleAccountView} />
+        </TabRow.Navigator>
     )
 }