Back to components
Nav component

Bottom Tabs

Custom tab bar with active state, icon swap, numeric + dot badges, and safe-area inset.

Install

What it does

  • Works standalone or as a custom tabBar for expo-router <Tabs>
  • Optional iconActive variant per tab
  • Numeric badge (capped at 99+) or boolean dot badge
  • Android ripple feedback

When to use

Use it

Bottom of any tab-based app (e-commerce, social, dashboard).

Skip it

Top-tab swipers (those need a pager view).

Files & routes added

  • components/nav/bottom-tabs.tsx

Related components