💄 Add icons
Changes
1 file changed, +41 -6
MODIFY
app/(tabs)/_layout.tsx
+41 -6
@@ -1,8 +1,8 @@
1
1
import { Tabs } from 'expo-router';
2
2
import React from 'react';
3
+import { Ionicons } from '@expo/vector-icons';
3
4
4
5
import { HapticTab } from '@/components/haptic-tab';
5
-import { IconSymbol } from '@/components/ui/icon-symbol';
6
6
import { Colors } from '@/constants/theme';
7
7
import { useColorScheme } from '@/hooks/use-color-scheme';
8
8
@@ -15,40 +15,75 @@
15
15
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
16
16
headerShown: false,
17
17
tabBarButton: HapticTab,
18
+ tabBarStyle: {
19
+ paddingBottom: 8,
20
+ paddingTop: 8,
21
+ height: 60,
22
+ },
18
23
}}>
19
24
<Tabs.Screen
20
25
name="index"
21
26
options={{
22
27
title: 'Inbox',
23
- tabBarIcon: ({ color }) => <IconSymbol size={28} name="tray.fill" color={color} />,
28
+ tabBarIcon: ({ color, focused }) => (
29
+ <Ionicons
30
+ name={focused ? "mail" : "mail-outline"}
31
+ size={24}
32
+ color={color}
33
+ />
34
+ ),
24
35
}}
25
36
/>
26
37
<Tabs.Screen
27
38
name="today"
28
39
options={{
29
40
title: 'Today',
30
- tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar.badge.clock" color={color} />,
41
+ tabBarIcon: ({ color, focused }) => (
42
+ <Ionicons
43
+ name={focused ? "today" : "today-outline"}
44
+ size={24}
45
+ color={color}
46
+ />
47
+ ),
31
48
}}
32
49
/>
33
50
<Tabs.Screen
34
51
name="calendar"
35
52
options={{
36
53
title: 'Calendar',
37
- tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar" color={color} />,
54
+ tabBarIcon: ({ color, focused }) => (
55
+ <Ionicons
56
+ name={focused ? "calendar" : "calendar-outline"}
57
+ size={24}
58
+ color={color}
59
+ />
60
+ ),
38
61
}}
39
62
/>
40
63
<Tabs.Screen
41
64
name="projects"
42
65
options={{
43
66
title: 'Projects',
44
- tabBarIcon: ({ color }) => <IconSymbol size={28} name="folder.fill" color={color} />,
67
+ tabBarIcon: ({ color, focused }) => (
68
+ <Ionicons
69
+ name={focused ? "folder" : "folder-outline"}
70
+ size={24}
71
+ color={color}
72
+ />
73
+ ),
45
74
}}
46
75
/>
47
76
<Tabs.Screen
48
77
name="settings"
49
78
options={{
50
79
title: 'Settings',
51
- tabBarIcon: ({ color }) => <IconSymbol size={28} name="gear" color={color} />,
80
+ tabBarIcon: ({ color, focused }) => (
81
+ <Ionicons
82
+ name={focused ? "settings" : "settings-outline"}
83
+ size={24}
84
+ color={color}
85
+ />
86
+ ),
52
87
}}
53
88
/>
54
89
</Tabs>