Clean up navigation keys

apps/app/src/components/explore/SearchResults.tsx

@@ -19,7 +19,7 @@ const StoresView: React.FC = () => {
 	const { stores } = useSearchContext();
 
 	const handleStorePress = (storeId: string) => () => {
-		navigate('Store', {
+		navigate('Explore.Store', {
 			screen: 'Store.Main',
 			params: { storeId }
 		});

apps/app/src/components/explore/TrendingStores.tsx

@@ -14,7 +14,7 @@ const TrendingStores: React.FC = () => {
 
 	const handleStorePress = React.useCallback(
 		(storeId: string) => () => {
-			navigate('Store', { screen: 'Store.Main', params: { storeId } });
+			navigate('Explore.Store', { screen: 'Store.Main', params: { storeId } });
 		},
 		[]
 	);

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

@@ -43,7 +43,7 @@ const FollowedStoresMain: React.FC<FollowedStoresMainProps> = ({
 
 	const handleStorePress = React.useCallback(
 		(storeId: string) => () => {
-			navigate('Store', { screen: 'Store.Main', params: { storeId } });
+			navigate('Home.Store', { screen: 'Store.Main', params: { storeId } });
 		},
 		[]
 	);

apps/app/src/navigation/ExploreStack.tsx

@@ -15,7 +15,7 @@ const ExploreStack = () => {
 				options={{ headerShown: false }}
 			/>
 			<ExploreNavigator.Screen
-				name='Store'
+				name='Explore.Store'
 				component={StoreStack}
 				options={{ headerShown: false }}
 			/>

apps/app/src/navigation/HomeStack.tsx

@@ -11,11 +11,14 @@ 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='Home.Main' component={Home} />
+			<HomeNavigator.Screen name='Home.Order' component={Order} />
 			<HomeNavigator.Screen
-				name='Store'
+				name='Home.Notifications'
+				component={Notifications}
+			/>
+			<HomeNavigator.Screen
+				name='Home.Store'
 				component={StoreStack}
 				options={{ headerShown: false }}
 			/>

apps/app/src/navigation/MainTab.tsx

@@ -16,10 +16,10 @@ const MainTabNavigator = () => {
 
 	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.Screen name='Main.ForYou' component={HomeStack} />
+			<MainTab.Screen name='Main.Explore' component={ExploreStack} />
+			<MainTab.Screen name='Main.Carts' component={CartsStack} />
+			<MainTab.Screen name='Main.Profile' component={ProfileStack} />
 		</MainTab.Navigator>
 	);
 };

apps/app/src/navigation/ProfileStack.tsx

@@ -18,22 +18,25 @@ const ProfileStack = () => {
 				component={Profile}
 				options={{ headerTitle: 'Profile' }}
 			/>
-			<ProfileNavigator.Screen name='Edit Profile' component={EditProfile} />
+			<ProfileNavigator.Screen name='Profile.Edit' component={EditProfile} />
 			<ProfileNavigator.Screen
-				name='Payment Methods'
+				name='Profile.PaymentMethods'
 				component={PaymentMethods}
 			/>
 			<ProfileNavigator.Screen
-				name='DeliveryAddress'
+				name='Profile.DeliveryAddress'
 				component={DeliveryAddress}
 				options={{ headerTitle: 'Delivery Address' }}
 			/>
 			<ProfileNavigator.Screen
-				name='NotificationSettings'
+				name='Profile.NotificationSettings'
 				component={NotificationSettings}
 				options={{ headerTitle: 'Notifications' }}
 			/>
-			<ProfileNavigator.Screen name='Appearance' component={SettingsTheme} />
+			<ProfileNavigator.Screen
+				name='Profile.Appearance'
+				component={SettingsTheme}
+			/>
 			<ProfileNavigator.Screen
 				name='Profile.AccountSettings'
 				component={AccountSettings}

apps/app/src/navigation/Routes.tsx

@@ -47,11 +47,7 @@ const Routes: React.FC = () => {
 									<AppStack.Screen
 										name='Product'
 										component={Product}
-										options={{
-											headerTitle: '',
-											gestureDirection: 'vertical'
-											// gestureResponseDistance: Dimensions.get('window').height
-										}}
+										options={{ headerTitle: '', gestureDirection: 'vertical' }}
 									/>
 									<AppStack.Screen name='Add Card' component={AddCardWebview} />
 								</AppStack.Group>

apps/app/src/screens/Carts.tsx

@@ -44,7 +44,7 @@ const Carts: React.FC = () => {
 						description={`Looks like your cart is empty. Let's change that.`}
 						cta={{
 							text: 'Discover new stores',
-							action: () => navigate('Explore')
+							action: () => navigate('Main.Explore')
 						}}
 						viewStyle={{ marginTop: 32 }}
 					/>

apps/app/src/screens/FollowedStores.tsx

@@ -15,7 +15,7 @@ const FollowedStores = () => {
 	const { navigate } = useNavigation<NavigationProp<HomeStackParamList>>();
 
 	const handleStoreItemPress = (storeId: string) => () => {
-		navigate('Store', { screen: 'Store.Main', params: { storeId } });
+		navigate('Home.Store', { screen: 'Store.Main', params: { storeId } });
 	};
 
 	const handleStoreItemLongPress = (storeId: string) => () => {

apps/app/src/screens/Onboarding.tsx

@@ -103,7 +103,6 @@ const Password = () => {
 		if (error) {
 			console.log(error);
 		} else if (data?.register) {
-			// FIXME: UX hole! Let them know that their account has been created.
 			navigate('Authenticate');
 		}
 	};

apps/app/src/screens/Order.tsx

@@ -21,7 +21,7 @@ import { AppStackParamList, HomeStackParamList } from '../types/navigation';
 const Order: React.FC = () => {
 	const {
 		params: { orderId }
-	} = useRoute<RouteProp<HomeStackParamList, 'Order'>>();
+	} = useRoute<RouteProp<HomeStackParamList, 'Home.Order'>>();
 	const { navigate } = useNavigation<NavigationProp<AppStackParamList>>();
 	const [{ data, fetching }] = useOrderQuery({ variables: { orderId } });
 	useGoBack();

apps/app/src/screens/Orders.tsx

@@ -15,7 +15,7 @@ const Orders: React.FC = () => {
 
 	const handleOrderPress = React.useCallback(
 		(orderId: string) => () => {
-			navigate('Order', { orderId });
+			navigate('Home.Order', { orderId });
 		},
 		[]
 	);

apps/app/src/screens/Profile.tsx

@@ -40,17 +40,20 @@ const Profile: React.FC = () => {
 			<View>
 				<ProfileRow
 					title='Payment methods'
-					onPress={() => navigate('Payment Methods')}
+					onPress={() => navigate('Profile.PaymentMethods')}
 				/>
 				{/* <ProfileRow
 					title='Delivery address'
 					onPress={() => navigate('DeliveryAddress')}
 				/> */}
 				<ProfileRow
 					title='Notifications'
-					onPress={() => navigate('NotificationSettings')}
+					onPress={() => navigate('Profile.NotificationSettings')}
+				/>
+				<ProfileRow
+					title='Appearance'
+					onPress={() => navigate('Profile.Appearance')}
 				/>
-				<ProfileRow title='Appearance' onPress={() => navigate('Appearance')} />
 				<ProfileRow
 					title='Manage account'
 					onPress={() => navigate('Profile.AccountSettings')}

apps/app/src/types/navigation.ts

@@ -12,17 +12,17 @@ export type AppStackParamList = {
 };
 
 export type HomeStackParamList = {
-	Home: undefined;
-	Order: { orderId: string };
-	Store: NavigatorScreenParams<StoreStackParamList>;
-	Settings: undefined;
-	SettingsTheme: undefined;
-	Notifications: undefined;
+	'Home.Main': undefined;
+	'Home.Order': { orderId: string };
+	'Home.Store': NavigatorScreenParams<StoreStackParamList>;
+	'Home.Settings': undefined;
+	'Home.SettingsTheme': undefined;
+	'Home.Notifications': undefined;
 };
 
 export type ExploreStackParamList = {
 	'Explore.Main': undefined;
-	Store: NavigatorScreenParams<StoreStackParamList>;
+	'Explore.Store': NavigatorScreenParams<StoreStackParamList>;
 };
 
 export type CartStackParamList = {
@@ -31,11 +31,11 @@ export type CartStackParamList = {
 
 export type ProfileStackParamList = {
 	'Profile.Main': undefined;
-	'Edit Profile': undefined;
-	'Payment Methods': undefined;
-	DeliveryAddress: undefined;
-	NotificationSettings: undefined;
-	Appearance: undefined;
+	'Profile.Edit': undefined;
+	'Profile.PaymentMethods': undefined;
+	'Profile.DeliveryAddress': undefined;
+	'Profile.NotificationSettings': undefined;
+	'Profile.Appearance': undefined;
 	'Profile.AccountSettings': undefined;
 };
 
@@ -46,8 +46,8 @@ export type StoreStackParamList = {
 };
 
 export type MainTabParamList = {
-	'For You': undefined;
-	Explore: undefined;
-	Carts: undefined;
-	Profile: undefined;
+	'Main.ForYou': undefined;
+	'Main.Explore': undefined;
+	'Main.Carts': undefined;
+	'Main.Profile': undefined;
 };

apps/dashboard/src/components/order/OrderProduct.tsx

@@ -1,7 +1,7 @@
 import { formatNaira } from '@habiti/common';
-import { CustomImage, Typography } from '@habiti/components';
+import { CustomImage, Typography, Row } from '@habiti/components';
 import React from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 import { OrderQuery } from '../../types/api';
 
@@ -14,7 +14,7 @@ const OrderProduct: React.FC<OrderProductProps> = ({
 	orderProduct: { product, quantity, unitPrice },
 	onPress
 }) => (
-	<Pressable key={product.id} onPress={onPress} style={styles.container}>
+	<Row key={product.id} onPress={onPress} style={styles.container}>
 		<View style={styles.image}>
 			<CustomImage uri={product.images[0]?.path} height={40} width={40} />
 		</View>
@@ -24,15 +24,15 @@ const OrderProduct: React.FC<OrderProductProps> = ({
 				{formatNaira(unitPrice * quantity)}
 			</Typography>
 		</View>
-	</Pressable>
+	</Row>
 );
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
 		alignItems: 'center',
 		paddingHorizontal: 16,
-		paddingVertical: 4
+		paddingVertical: 6
 	},
 	image: {
 		marginRight: 8

apps/dashboard/src/components/order/OrderProducts.tsx

@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
 	},
 	sectionHeader: {
 		marginLeft: 16,
-		marginBottom: 8
+		marginBottom: 4
 	}
 });
 

apps/dashboard/src/components/orders/OrdersList.tsx

@@ -50,7 +50,6 @@ const OrdersList = () => {
 			data={data?.currentStore.orders}
 			renderItem={renderOrder}
 			estimatedItemSize={60}
-			ListHeaderComponent={<View style={{ height: 4 }} />}
 			ListEmptyComponent={
 				<View style={styles.empty}>
 					<Typography variant='secondary' style={styles.emptyText}>

apps/dashboard/src/components/orders/OrdersListItem.tsx

@@ -1,7 +1,7 @@
 import { formatNaira } from '@habiti/common';
-import { useTheme, Typography } from '@habiti/components';
+import { useTheme, Typography, Row } from '@habiti/components';
 import React from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 import { OrdersQuery } from '../../types/api';
 import { parseTimestamp } from '../../utils/date';
@@ -15,7 +15,7 @@ const OrdersListItem: React.FC<OrdersListItemProps> = ({ order, onPress }) => {
 	const { theme } = useTheme();
 
 	return (
-		<Pressable
+		<Row
 			onPress={onPress}
 			style={[styles.container, { borderBottomColor: theme.border.color }]}
 		>
@@ -26,7 +26,7 @@ const OrdersListItem: React.FC<OrdersListItemProps> = ({ order, onPress }) => {
 				</Typography>
 			</View>
 			<Typography style={styles.total}>{formatNaira(order.total)}</Typography>
-		</Pressable>
+		</Row>
 	);
 };
 

apps/dashboard/src/components/products/ProductList.tsx

@@ -16,7 +16,7 @@ import {
 	ProductsStackParamList
 } from '../../types/navigation';
 
-const ProductListHeader = <View style={{ height: 4 }} />;
+const ProductListHeader = <View style={{}} />;
 
 const ProductList: React.FC = () => {
 	const { params } = useRoute<RouteProp<MainTabParamList, 'Products'>>();

apps/dashboard/src/components/products/ProductsListItem.tsx

@@ -1,7 +1,13 @@
 import { formatNaira } from '@habiti/common';
-import { useTheme, CustomImage, Icon, Typography } from '@habiti/components';
+import {
+	useTheme,
+	CustomImage,
+	Icon,
+	Typography,
+	Row
+} from '@habiti/components';
 import React from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 import { ProductsQuery } from '../../types/api';
 
@@ -17,7 +23,7 @@ const ProductsListItem: React.FC<ProductsListItemProps> = ({
 	const { theme } = useTheme();
 
 	return (
-		<Pressable onPress={onPress} style={styles.container}>
+		<Row onPress={onPress} style={styles.container}>
 			<View style={styles.left}>
 				<CustomImage
 					uri={product.images[0]?.path}
@@ -33,7 +39,7 @@ const ProductsListItem: React.FC<ProductsListItemProps> = ({
 				</View>
 			</View>
 			<Icon name='chevron-right' color={theme.text.secondary} />
-		</Pressable>
+		</Row>
 	);
 };
 
@@ -43,7 +49,7 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		justifyContent: 'space-between',
 		alignItems: 'center',
-		paddingVertical: 4,
+		paddingVertical: 6,
 		paddingHorizontal: 12
 	},
 	name: {

apps/dashboard/src/components/store/StoreMenuRow.tsx

@@ -1,6 +1,6 @@
-import { Icon, Typography } from '@habiti/components';
+import { Icon, Row, Typography } from '@habiti/components';
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 interface StoreMenuRowProps {
 	title: string;
@@ -9,10 +9,10 @@ interface StoreMenuRowProps {
 
 const StoreMenuRow: React.FC<StoreMenuRowProps> = ({ title, onPress }) => {
 	return (
-		<Pressable style={styles.menuButton} onPress={onPress}>
+		<Row onPress={onPress} style={styles.menuButton}>
 			<Typography>{title}</Typography>
 			<Icon name='chevron-right' color='#505050' />
-		</Pressable>
+		</Row>
 	);
 };