Split routes up

apps/app/src/components/home/FollowedStores.tsx

@@ -6,7 +6,7 @@ import { View, StyleSheet } from 'react-native';
 
 import FollowedStoresItem from './FollowedStoresItem';
 import { HomeQuery } from '../../types/api';
-import { HomeStackParamList, HomeTabParamList } from '../../types/navigation';
+import { HomeStackParamList, MainTabParamList } from '../../types/navigation';
 
 interface FollowedStoresProps {
 	followed: HomeQuery['currentUser']['followed'];
@@ -39,7 +39,7 @@ const FollowedStoresMain: React.FC<FollowedStoresMainProps> = ({
 	followed
 }) => {
 	const { navigate } =
-		useNavigation<NavigationProp<HomeStackParamList & HomeTabParamList>>();
+		useNavigation<NavigationProp<HomeStackParamList & MainTabParamList>>();
 
 	const handleStorePress = React.useCallback(
 		(storeId: string) => () => {

apps/app/src/components/home/RecentOrders.tsx

@@ -5,7 +5,7 @@ import { View, StyleSheet } from 'react-native';
 
 import RecentOrder from './RecentOrder';
 import { HomeQuery } from '../../types/api';
-import { HomeStackParamList, HomeTabParamList } from '../../types/navigation';
+import { HomeStackParamList, MainTabParamList } from '../../types/navigation';
 
 interface RecentOrdersProps {
 	orders: HomeQuery['currentUser']['orders'];
@@ -17,7 +17,7 @@ interface RecentOrdersProps {
 
 const RecentOrders: React.FC<RecentOrdersProps> = ({ orders }) => {
 	const { navigate } =
-		useNavigation<NavigationProp<HomeTabParamList & HomeStackParamList>>();
+		useNavigation<NavigationProp<MainTabParamList & HomeStackParamList>>();
 
 	const handleOrderPress = React.useCallback(
 		(orderId: string) => () => {

apps/app/src/components/home/Watchlist.tsx

@@ -6,7 +6,7 @@ import { View, StyleSheet } from 'react-native';
 
 import WatchlistProduct from './WatchlistProduct';
 import { HomeQuery } from '../../types/api';
-import { HomeTabParamList, AppStackParamList } from '../../types/navigation';
+import { MainTabParamList, AppStackParamList } from '../../types/navigation';
 
 // Consider not displaying anything when the watchlist is empty.
 
@@ -28,7 +28,7 @@ interface WatchlistMainProps {
 }
 
 const WatchlistMain: React.FC<WatchlistMainProps> = ({ watchlist }) => {
-	const { navigate } = useNavigation<NavigationProp<HomeTabParamList>>();
+	const { navigate } = useNavigation<NavigationProp<MainTabParamList>>();
 	const navigation = useNavigation<NavigationProp<AppStackParamList>>();
 
 	const products = watchlist.map(({ product }) => product);

apps/app/src/navigation/CartsStack.tsx

@@ -0,0 +1,20 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import Carts from '../screens/Carts';
+import { CartStackParamList } from '../types/navigation';
+
+const CartsNavigator = createNativeStackNavigator<CartStackParamList>();
+
+const CartsStack = () => {
+	return (
+		<CartsNavigator.Navigator>
+			<CartsNavigator.Screen
+				name='Carts.Main'
+				component={Carts}
+				options={{ headerTitle: 'Carts' }}
+			/>
+		</CartsNavigator.Navigator>
+	);
+};
+
+export default CartsStack;

apps/app/src/navigation/ExploreStack.tsx

@@ -0,0 +1,26 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import StoreStack from './StoreStack';
+import Explore from '../screens/Explore';
+import { ExploreStackParamList } from '../types/navigation';
+
+const ExploreNavigator = createNativeStackNavigator<ExploreStackParamList>();
+
+const ExploreStack = () => {
+	return (
+		<ExploreNavigator.Navigator>
+			<ExploreNavigator.Screen
+				name='Explore.Main'
+				component={Explore}
+				options={{ headerShown: false }}
+			/>
+			<ExploreNavigator.Screen
+				name='Store'
+				component={StoreStack}
+				options={{ headerShown: false }}
+			/>
+		</ExploreNavigator.Navigator>
+	);
+};
+
+export default ExploreStack;

apps/app/src/navigation/HomeStack.tsx

@@ -0,0 +1,26 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import StoreStack from './StoreStack';
+import Home from '../screens/Home';
+import Notifications from '../screens/Notifications';
+import Order from '../screens/Order';
+import { HomeStackParamList } from '../types/navigation';
+
+const HomeNavigator = createNativeStackNavigator<HomeStackParamList>();
+
+const HomeStack = () => {
+	return (
+		<HomeNavigator.Navigator>
+			<HomeNavigator.Screen name='Home' component={Home} />
+			<HomeNavigator.Screen name='Order' component={Order} />
+			<HomeNavigator.Screen name='Notifications' component={Notifications} />
+			<HomeNavigator.Screen
+				name='Store'
+				component={StoreStack}
+				options={{ headerShown: false }}
+			/>
+		</HomeNavigator.Navigator>
+	);
+};
+
+export default HomeStack;

apps/app/src/navigation/MainTab.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '@habiti/components';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import React from 'react';
+
+import ExploreStack from './ExploreStack';
+import HomeStack from './HomeStack';
+import { MainTabParamList } from '../types/navigation';
+import { tabScreenOptions } from '../utils/navigation';
+
+const MainTab = createBottomTabNavigator<MainTabParamList>();
+
+const MainTabNavigator = () => {
+	const { name } = useTheme();
+
+	return (
+		<MainTab.Navigator screenOptions={tabScreenOptions(name)}>
+			<MainTab.Screen name='For You' component={HomeStack} />
+			<MainTab.Screen name='Explore' component={ExploreStack} />
+			<MainTab.Screen name='Carts' component={CartsStack} />
+			<MainTab.Screen name='Profile' component={ProfileStack} />
+		</MainTab.Navigator>
+	);
+};
+
+export default MainTabNavigator;

apps/app/src/navigation/ProfileStack.tsx

@@ -0,0 +1,45 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import AccountSettings from '../screens/AccountSettings';
+import DeliveryAddress from '../screens/DeliveryAddress';
+import NotificationSettings from '../screens/NotificationSettings';
+import PaymentMethods from '../screens/PaymentMethods';
+import Profile from '../screens/Profile';
+import SettingsTheme from '../screens/SettingsTheme';
+import { ProfileStackParamList } from '../types/navigation';
+const ProfileNavigator = createNativeStackNavigator<ProfileStackParamList>();
+
+const ProfileStack = () => {
+	return (
+		<ProfileNavigator.Navigator>
+			<ProfileNavigator.Screen
+				name='Profile.Main'
+				component={Profile}
+				options={{ headerTitle: 'Profile' }}
+			/>
+			<ProfileNavigator.Screen name='Edit Profile' component={EditProfile} />
+			<ProfileNavigator.Screen
+				name='Payment Methods'
+				component={PaymentMethods}
+			/>
+			<ProfileNavigator.Screen
+				name='DeliveryAddress'
+				component={DeliveryAddress}
+				options={{ headerTitle: 'Delivery Address' }}
+			/>
+			<ProfileNavigator.Screen
+				name='NotificationSettings'
+				component={NotificationSettings}
+				options={{ headerTitle: 'Notifications' }}
+			/>
+			<ProfileNavigator.Screen name='Appearance' component={SettingsTheme} />
+			<ProfileNavigator.Screen
+				name='Profile.AccountSettings'
+				component={AccountSettings}
+				options={{ headerTitle: 'Account Settings' }}
+			/>
+		</ProfileNavigator.Navigator>
+	);
+};
+
+export default ProfileStack;

apps/app/src/navigation/Routes.tsx

@@ -6,7 +6,7 @@ import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { Provider } from 'urql';
 
-import HomeTabNavigator from './HomeTab';
+import MainTabNavigator from './MainTab';
 import useClient from '../hooks/useClient';
 import AddCardWebview from '../screens/AddCardWebview';
 import Authenticate from '../screens/Authenticate';
@@ -40,7 +40,7 @@ const Routes: React.FC = () => {
 				<AppStack.Navigator screenOptions={{ headerShown: false }}>
 					{accessToken ? (
 						<>
-							<AppStack.Screen name='Home' component={HomeTabNavigator} />
+							<AppStack.Screen name='Main' component={MainTabNavigator} />
 							<AppStack.Group screenOptions={{ headerShown: true }}>
 								<AppStack.Screen name='Cart' component={Cart} />
 								<AppStack.Group screenOptions={{ presentation: 'modal' }}>

apps/app/src/navigation/StoreStack.tsx

@@ -0,0 +1,26 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import SearchStore from '../screens/SearchStore';
+import Store from '../screens/Store';
+import { StoreStackParamList } from '../types/navigation';
+
+const StoreNavigator = createNativeStackNavigator<StoreStackParamList>();
+
+const StoreStack = () => {
+	return (
+		<StoreNavigator.Navigator>
+			<StoreNavigator.Screen
+				name='Store.Main'
+				component={Store}
+				options={{ headerTitle: '' }}
+			/>
+			<StoreNavigator.Screen
+				name='Store.Search'
+				component={SearchStore}
+				options={{ headerShown: false }}
+			/>
+		</StoreNavigator.Navigator>
+	);
+};
+
+export default StoreStack;