Fast-lookup syntax for Route Groups (tabs), Tabs navigators, @expo/vector-icons, and dynamic badges.
Use this reference sheet whenever configuring tab navigators, setting active colors, styling floating tab bars, and switching vector icons.
| File Structure | Resolved URL | Navigation Behavior |
|---|---|---|
app/(tabs)/_layout.tsx |
N/A | Renders bottom tab navigation bar for all sibling files. |
app/(tabs)/index.tsx |
/ |
Root screen. Parentheses (tabs) are excluded from URL path. |
app/(tabs)/analytics.tsx |
/analytics |
Tab 2 screen. Accessible via bottom tab or router.push('/analytics'). |
app/(tabs)/goals.tsx |
/goals |
Tab 3 screen. Accessible via bottom tab or router.push('/goals'). |
app/add-meal.tsx |
/add-meal |
Root Stack screen — slides as a modal OVER the entire tab bar. |
| Option Prop | Type | Example Value | Effect |
|---|---|---|---|
tabBarIcon |
Function |
({ color, focused }) => |
Renders custom icon and switches glyph based on active state. |
tabBarActiveTintColor |
string |
"#10b981" |
Color of active tab icon and label text. |
tabBarInactiveTintColor |
string |
"#64748b" |
Color of inactive/unfocused tab icons. |
tabBarStyle |
StyleProp |
{ backgroundColor: "#0f172a", height: 60 } |
Applies background color, height, and border to tab bar container. |
tabBarBadge |
string | number |
3 or "NEW" |
Displays notification bubble over top-right corner of tab icon. |
tabBarBadgeStyle |
StyleProp |
{ backgroundColor: "#10b981", color: "#000" } |
Customizes badge bubble background and text color. |
headerShown |
boolean |
false |
Hides top header for screens that build custom in-screen banners. |
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
export default function TabsLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: "#10b981", // 👈 Emerald active highlight
tabBarInactiveTintColor: "#64748b", // 👈 Muted slate
tabBarStyle: {
backgroundColor: "#0f172a", // 👈 Dark Slate-900 surface
borderTopColor: "#1e293b", // 👈 Subtle Slate-800 border
height: 62,
paddingBottom: 8,
paddingTop: 6,
},
headerStyle: { backgroundColor: "#020617" },
headerTintColor: "#f8fafc",
}}
>
<Tabs.Screen
name="index"
options={{
title: "Today",
tabBarIcon: ({ color, focused }) => (
<Ionicons name={focused ? "calendar" : "calendar-outline"} size={22} color={color} />
),
tabBarBadge: 3,
}}
/>
<Tabs.Screen
name="analytics"
options={{
title: "Analytics",
tabBarIcon: ({ color, focused }) => (
<Ionicons name={focused ? "stats-chart" : "stats-chart-outline"} size={22} color={color} />
),
}}
/>
<Tabs.Screen
name="goals"
options={{
title: "Goals",
tabBarIcon: ({ color, focused }) => (
<Ionicons name={focused ? "flag" : "flag-outline"} size={22} color={color} />
),
}}
/>
</Tabs>
);
}