Skip to content

Commit

Permalink
2️⃣ Chapter 2: Nested navigators
Browse files Browse the repository at this point in the history
  • Loading branch information
nandorojo committed Oct 7, 2022
1 parent 4fbd9f7 commit 32559ab
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 17 deletions.
61 changes: 61 additions & 0 deletions apps/expo/app/(tabs).tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
File renamed without changes.
18 changes: 3 additions & 15 deletions apps/expo/app/(root).tsx → apps/expo/app/(tabs)/users.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
)
}
File renamed without changes.
1 change: 1 addition & 0 deletions apps/expo/app/(tabs)/users/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'app/features/user/list-screen'
1 change: 1 addition & 0 deletions apps/next/pages/users/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'app/features/user/list-screen'
2 changes: 1 addition & 1 deletion packages/app/features/home/screen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function HomeScreen() {
alignItems: 'center',
}}
>
<Link href="/users/fernando">
<Link href="/users">
<Text
sx={{
py: '$2',
Expand Down
68 changes: 68 additions & 0 deletions packages/app/features/user/list-screen.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
2 changes: 1 addition & 1 deletion packages/app/provider/dripsy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const theme = makeTheme({
colors: {
$background: '#161618',
$background2: 'rgb(28, 28, 31)',

$background3: '#28282C',
$purple3: '#32275F',
$text: '#ffffff',
},
Expand Down

0 comments on commit 32559ab

Please sign in to comment.