Tab Bar Navigation
The persistent bottom bar that defines a mobile app's top-level information architecture.
Navigation & Command · 7 checks · 11 resources
Before you ship
7- 01Tab count — limited to the most important destinations; three to five items is the typical range
- 02Icon and label — each tab paired with both an icon and a text label unless the icon is unambiguous
- 03Active and default states — the active tab visually distinct by colour, border or icon weight
- 04Badge counts — for tabs with unread counts like messages and notifications, updating in real time
- 05Fixed presence — the tab bar remains visible across its sections, and may be hidden a level deeper
- 06Tap target size — each tab at least 44×44pt to be reliably tappable with a thumb in any grip
- 07Haptic feedback — a subtle tap haptic on tab selection confirming the action
Resources that help you build this
11- Lucide Animated · 467 MIT Lucide icons that animate on hover, with a markdown page for every icon and a skill file written for an agent
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture
- beUI · 106-item Motion + Tailwind registry for React, shadcn-compatible
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- Liquid Gooey · React gooey-merge and liquid-trail effects that keep text, icons and shadows crisp
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- morphicons · Six kilobytes of maths that morph any stroke icon into any other, across Lucide, Heroicons and Tabler
- React Native Components · 64 copy-paste React Native screen components, $59.99 once for lifetime access
- ScreensDesign · Screen-recorded iOS app flows from ~1,500 apps, with revenue and ranking data attached
- Tenkit · Expo scaffolder for white-label and multi-tenant mobile apps