2️⃣ Chapter 2: Nested navigators

apps/expo/app/(tabs).tsx

@@ -0,0 +1,61 @@
+import { Provider } from 'app/provider'
+import { StatusBar } from 'expo-status-bar'
+import { Tabs } from 'expo-router'
+import { useDripsyTheme } from 'dripsy'
+import { Ionicons } from '@expo/vector-icons'
+
+function MyTabs() {
+  const { colors } = useDripsyTheme().theme
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: colors.$background2,
+          borderTopWidth: 0,
+        },
+        tabBarActiveTintColor: '#F65CB6',
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon({ color, size, focused }) {
+            return (
+              <Ionicons
+                name={focused ? 'home' : 'home-outline'}
+                size={size}
+                color={color}
+              />
+            )
+          },
+        }}
+      />
+      <Tabs.Screen
+        name="users"
+        options={{
+          title: 'Users',
+          tabBarIcon({ color, size, focused }) {
+            return (
+              <Ionicons
+                name={focused ? 'people' : 'people-outline'}
+                size={size}
+                color={color}
+              />
+            )
+          },
+        }}
+      />
+    </Tabs>
+  )
+}
+
+export default function Root() {
+  return (
+    <Provider>
+      <MyTabs />
+      <StatusBar style="light" />
+    </Provider>
+  )
+}

apps/expo/app/(root).tsx → apps/expo/app/(tabs)/users.tsx

@@ -1,10 +1,7 @@
 import { NativeStack as Stack } from 'expo-router'
-import { Provider } from 'app/provider'
-
 import { useDripsyTheme } from 'dripsy'
-import { StatusBar } from 'expo-status-bar'
 
-function MyStack() {
+export default function MyStack() {
   const { colors } = useDripsyTheme().theme
   return (
     <Stack
@@ -22,24 +19,15 @@ function MyStack() {
       <Stack.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: 'Users',
         }}
       />
       <Stack.Screen
-        name="users"
+        name="[id]"
         options={{
           title: 'User',
         }}
       />
     </Stack>
   )
 }
-
-export default function Root() {
-  return (
-    <Provider>
-      <MyStack />
-      <StatusBar style="light" />
-    </Provider>
-  )
-}

apps/expo/app/(tabs)/users/index.tsx

@@ -0,0 +1 @@
+export { default } from 'app/features/user/list-screen'

apps/next/pages/users/index.tsx

@@ -0,0 +1 @@
+export { default } from 'app/features/user/list-screen'

packages/app/features/home/screen.tsx

@@ -11,7 +11,7 @@ export function HomeScreen() {
         alignItems: 'center',
       }}
     >
-      <Link href="/users/fernando">
+      <Link href="/users">
         <Text
           sx={{
             py: '$2',

packages/app/features/user/list-screen.tsx

@@ -0,0 +1,68 @@
+import { View, Image, ScrollView, Text } from 'dripsy'
+import { Link } from 'solito/link'
+import { Fragment } from 'react'
+
+const users = [
+  {
+    id: 'Guillermo Rauch',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1576257734810312704/ucxb4lHy_400x400.jpg',
+  },
+  {
+    id: 'Charlie Cheever',
+    avatar:
+      'https://pbs.twimg.com/profile_images/418503340872306688/cwVZFE3e_400x400.jpeg',
+  },
+  {
+    id: 'Fernando Rojo',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1182392379761987591/9XPy4NfP_400x400.jpg',
+  },
+  {
+    id: 'Evan Bacon',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1576625400205250561/wGfn72X__400x400.jpg',
+  },
+]
+
+export default function UsersListScreen() {
+  return (
+    <ScrollView sx={{ flex: 1, bg: '$background' }}>
+      <View sx={{ p: '$3', width: '100%', maxWidth: 800, alignSelf: 'center' }}>
+        {users.map((user) => {
+          return (
+            <Fragment key={user.id}>
+              <Link href={`/users/${user.id}`}>
+                <View
+                  sx={{
+                    mb: '$3',
+                    flexDirection: 'row',
+                  }}
+                >
+                  <Image
+                    source={{ uri: user.avatar, cache: 'force-cache' }}
+                    sx={{
+                      size: 50,
+                      borderRadius: '$rounded',
+                      mr: '$3',
+                    }}
+                    {...{
+                      alt: `${user.id}'s avatar`,
+                      accessibilityLabel: `${user.id}'s avatar`,
+                    }}
+                  />
+
+                  <View sx={{ flex: 1, justifyContent: 'center' }}>
+                    <Text sx={{ fontWeight: '600', fontSize: 14 }}>
+                      {user.id}
+                    </Text>
+                  </View>
+                </View>
+              </Link>
+            </Fragment>
+          )
+        })}
+      </View>
+    </ScrollView>
+  )
+}

packages/app/provider/dripsy.tsx

@@ -5,7 +5,7 @@ const theme = makeTheme({
   colors: {
     $background: '#161618',
     $background2: 'rgb(28, 28, 31)',
-
+    $background3: '#28282C',
     $purple3: '#32275F',
     $text: '#ffffff',
   },