⚡️ add large titles on ios, improve tab navigation and icons

apps/expo/app.json

@@ -4,7 +4,7 @@
     "slug": "packrat",
     "version": "1.1.0",
     "orientation": "portrait",
-    "icon": "./assets/packrat-app-icon.png",
+    "icon": "./assets/packrat-app-icon-gradient.png",
     "userInterfaceStyle": "automatic",
     "scheme": "packrat",
     "splash": {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx

@@ -1,110 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useIsMobileView } from 'app/hooks/common';
-import { useNavigate } from 'app/hooks/navigation';
-import { useAuthUser } from 'app/modules/auth';
-import { Button } from 'tamagui';
-import { EvilIcons } from '@expo/vector-icons';
-import SVGLogoComponent from 'app/components/logo';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerActions } from '@react-navigation/native';
-import { Slot } from 'expo-router';
-import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function StackLayout() {
-  const user = useAuthUser();
-  const isMobileView = useIsMobileView();
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles);
-  const navigate = useNavigate();
-
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
   return (
     <Stack
       screenOptions={{
         headerRight: () => <DrawerToggleButton />,
-        headerTitleStyle: {
-          fontSize: 24,
-        },
-        headerStyle: {
-          backgroundColor: currentTheme.colors.secondaryBlue,
-        },
-        headerTintColor: currentTheme.colors.text,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
       }}
     />
   );
 }
-
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    drawerStyles: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    safeArea: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    container: {
-      width: '100%',
-      backgroundColor: currentTheme.colors.background,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: 16,
-      width: '100%',
-    },
-    logoContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    logoWrapper: {
-      marginHorizontal: 10,
-    },
-    logoText: {
-      color: currentTheme.colors.text,
-      fontSize: 38,
-      fontWeight: '900',
-    },
-    menuBar: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      paddingHorizontal: 16,
-      height: 60,
-    },
-    menuBarItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      paddingHorizontal: 12,
-    },
-    menuBarItemText: {
-      color: currentTheme.colors.text,
-      fontSize: 18,
-    },
-    drawerTrigger: {},
-    menuBarItemActive: {
-      // Apply styles for the active item
-      // ...
-    },
-    menuBarItemTextActive: {
-      // Apply styles for the active item's text
-      // ...
-    },
-    menuBarItemSelected: {
-      // Apply styles for the selected item
-      // ...
-    },
-    menuBarItemTextSelected: {
-      // Apply styles for the selected item's text
-      // ...
-    },
-  };
-};

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import About from 'app/screens/about';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform, StyleSheet } from 'react-native';
 
 /**
  * Renders the AboutRoute component.
@@ -26,8 +26,8 @@ export default function AboutRoute() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'About',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx

@@ -1,10 +1,10 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import ChatNative from 'app/components/chat/ChatNative';
+import useTheme from 'app/hooks/useTheme';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
-import ChatNative from 'app/components/chat/ChatNative';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function Chat() {
   const { currentTheme } = useTheme();
@@ -19,8 +19,8 @@ export default function Chat() {
       <Stack.Screen
         options={{
           title: 'Chat',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { ItemsScreen } from 'app/modules/item';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function ItemsPage() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function ItemsPage() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Items',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function MapsScreen() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Maps',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import { Stack } from 'expo-router';
-import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
 import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { PackTemplateDetailsScreen } from 'app/modules/pack-templates';
+import { Stack } from 'expo-router';
+import Head from 'expo-router/head';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Pack() {
   const { currentTheme } = useTheme();
@@ -21,8 +21,8 @@ export default function Pack() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack Template',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function PackTemplates() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function PackTemplates() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack Templates',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-import PackContainer from 'app/components/pack/PackContainer';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { PackDetailsScreen } from 'app/modules/pack';
-import { DetailsComponent } from 'app/components/details';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Pack() {
   const { currentTheme } = useTheme();
@@ -23,23 +21,11 @@ export default function Pack() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
-
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 24,
-          },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
-          // https://reactnavigation.org/docs/headers#adjusting-header-styles
-
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      {/* <DetailsComponent type='pack'/> */}
       <PackDetailsScreen />
     </>
   );

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function ProductsPage() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Products',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {

apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx

@@ -0,0 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function StackLayout() {
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
+      }}
+    />
+  );
+}