2️⃣ Chapter 2.1: Home tab stack

nandorojo · Oct 7, 2022 · 8970290 · 8970290
1 parent e7ccf17
commit 8970290
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/apps/expo/app/(tabs).tsx b/apps/expo/app/(tabs).tsx
@@ -18,7 +18,7 @@ function MyTabs() {
       }}
     >
       <Tabs.Screen
-        name="index"
+        name="(home)"
         options={{
           title: 'Home',
           tabBarIcon({ color, size, focused }) {

diff --git a/apps/expo/app/(tabs)/(home).tsx b/apps/expo/app/(tabs)/(home).tsx
@@ -0,0 +1,27 @@
+import { NativeStack as Stack } from 'expo-router'
+import { useDripsyTheme } from 'dripsy'
+
+export default function MyStack({ children }) {
+  const { colors } = useDripsyTheme().theme
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: colors.$background2,
+        },
+        headerTitleStyle: {
+          color: colors.$text,
+        },
+        headerTintColor: '#D864D8',
+        headerShadowVisible: false,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Home',
+        }}
+      />
+    </Stack>
+  )
+}
diff --git a/apps/expo/app/(tabs)/index.tsx → apps/expo/app/(tabs)/(home)/index.tsx b/apps/expo/app/(tabs)/index.tsx → apps/expo/app/(tabs)/(home)/index.tsx
diff --git a/apps/expo/app/(tabs)/users.tsx b/apps/expo/app/(tabs)/users.tsx
@@ -1,7 +1,7 @@
 import { NativeStack as Stack } from 'expo-router'
 import { useDripsyTheme } from 'dripsy'
 
-export default function MyStack() {
+export default function MyStack({ children }) {
   const { colors } = useDripsyTheme().theme
   return (
     <Stack

diff --git a/packages/app/features/user/detail-screen.tsx b/packages/app/features/user/detail-screen.tsx
@@ -16,13 +16,8 @@ export function UserDetailScreen() {
         bg: '$background',
       }}
     >
-      <Link href="/">
-        <Text sx={{ textAlign: 'center' }}>
-          {`User ID:`}{' '}
-          <Text sx={{ bg: '$purple3', px: '$1', borderRadius: '$1' }}>
-            {id}
-          </Text>
-        </Text>
+      <Link href="/users">
+        <Text sx={{ bg: '$purple3', px: '$2', py: '$2' }}>{id}</Text>
       </Link>
     </View>
   )