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

andrew-bierman · Dec 20, 2024 · 8c1eea0 · 8c1eea0
1 parent 92fc6dd
commit 8c1eea0
Show file tree

Hide file tree

Showing 15 changed files with 208 additions and 198 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx b/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
-      // ...
-    },
-  };
-};
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx
@@ -0,0 +1,18 @@
+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',
+        title: 'Feed',
+      }}
+    />
+  );
+}
diff --git a/...p)/(drawer)/(tabs)/(stack)/feed/index.tsx → .../app/(app)/(drawer)/(tabs)/feed/index.tsx b/...p)/(drawer)/(tabs)/(stack)/feed/index.tsx → .../app/(app)/(drawer)/(tabs)/feed/index.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+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 FeedNav() {
   const { currentTheme } = useTheme();
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,13 +25,18 @@ export default function FeedNav() {
             <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
           ),
 
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 24,
-          },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          ...stackScreenOptionsHeaderSettings,
+          // headerStyle: {
+          //   // backgroundColor: currentTheme.colors.background,
+          //   // Hack to ensure the collapsed small header shows the shadow / border.
+          //   backgroundColor: "rgba(255,255,255,0.01)",
+          // },
+          // headerTransparent: process.env.EXPO_OS === "ios",
+          // 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

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/_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',
+      }}
+    />
+  );
+}
diff --git a/.../expo/app/(app)/(drawer)/(tabs)/index.tsx → ...app/(app)/(drawer)/(tabs)/index/index.tsx b/.../expo/app/(app)/(drawer)/(tabs)/index.tsx → ...app/(app)/(drawer)/(tabs)/index/index.tsx
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_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',
+      }}
+    />
+  );
+}
diff --git a/...)/(drawer)/(tabs)/(stack)/packs/index.tsx → ...app/(app)/(drawer)/(tabs)/packs/index.tsx b/...)/(drawer)/(tabs)/(stack)/packs/index.tsx → ...app/(app)/(drawer)/(tabs)/packs/index.tsx
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
@@ -0,0 +1,16 @@
+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() {
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        headerBlurEffect: 'systemChromeMaterial',
+        title: 'Profile',
+      }}
+    />
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { ProfileScreen } from 'app/modules/user';
-import { Platform, ScrollView } from 'react-native';
-import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Profile() {
   return (
@@ -12,15 +11,6 @@ export default function Profile() {
           <title>Profile</title>
         </Head>
       )}
-      <Stack.Screen
-        options={{
-          // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Profile',
-          // http://reactnavigation.org/docs/headers#adjusting-header-styles
-
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
-        }}
-      />
       <ProfileScreen />
     </>
   );

diff --git a/packages/app/components/chat/ChatNative.tsx b/packages/app/components/chat/ChatNative.tsx
@@ -40,7 +40,7 @@ export default function ChatNative() {
         style={{ width: 370, position: 'absolute', bottom: 90, left: 5 }}
       >
         <RButton
-          backgroundColor="$background"
+          bg="$background"
           color="$color"
           size="$4"
           circular

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
@@ -2,6 +2,7 @@ import useTheme from 'app/hooks/useTheme';
 import React from 'react';
 import {
   Platform,
+  SafeAreaView,
   ScrollView,
   View,
   type StyleProp,
@@ -17,31 +18,33 @@ const Layout = ({
 }) => {
   const { currentTheme } = useTheme();
   return (
-    <View
-      style={[
-        {
-          display: 'flex',
-          backgroundColor: currentTheme.colors.background,
-          flex: 1,
-          maxWidth: 1440,
-          margin: 'auto',
-          justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
-          paddingTop: 20,
-          paddingBottom: Platform.OS !== 'web' ? 44 : undefined,
-          paddingHorizontal: 16,
-          marginBottom: 20,
-          alignItems: 'center',
-          width: '100%',
-        },
-        customStyle,
-      ]}
-    >
-      <View style={{ width: '100%' }}>
-        <ScrollView contentContainerStyle={{ width: '100%' }}>
-          {children}
-        </ScrollView>
+    <SafeAreaView style={{ flex: 1 }}>
+      <View
+        style={[
+          {
+            display: 'flex',
+            backgroundColor: currentTheme.colors.background,
+            flex: 1,
+            maxWidth: 1440,
+            margin: 'auto',
+            justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
+            paddingTop: 20,
+            paddingBottom: Platform.OS !== 'web' ? 44 : undefined,
+            paddingHorizontal: 16,
+            marginBottom: 20,
+            alignItems: 'center',
+            width: '100%',
+          },
+          customStyle,
+        ]}
+      >
+        <View style={{ width: '100%' }}>
+          <ScrollView contentContainerStyle={{ width: '100%' }}>
+            {children}
+          </ScrollView>
+        </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 };