Top tabs

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/top-tabs.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/top-tabs.

Usage

import { View } from "react-native";
import { TopTabs } from "@/components/goodui-native/top-tabs/top-tabs";

export function OrdersScreen() {
  return (
    <View style={{ flex: 1 }}>
      <TopTabs
        accessibilityLabel="Orders"
        style={{ flex: 1 }}
        tabs={[
          { key: "upcoming", title: "Upcoming", badge: 2, content: <UpcomingOrders /> },
          { key: "past", title: "Past", content: <PastOrders /> },
          { key: "cancelled", title: "Cancelled", content: <CancelledOrders /> },
        ]}
      />
    </View>
  );
}

When to use

Examples

<TopTabs
  variant="pill"
  size="sm"
  accessibilityLabel="Categories"
  style={{ flex: 1 }}
  tabs={categories.map((c) => ({ key: c.id, title: c.name, content: <Feed category={c.id} /> }))}
/>

const [tab, setTab] = useState("all");

<TopTabs value={tab} onValueChange={setTab} style={{ flex: 1 }} tabs={tabs} />
<Button onPress={() => setTab("mentions")}>Show mentions</Button>

API reference

Motion and haptics

• •Pages follow the finger 1:1 with resistance past the first and last page, and settle on the smooth spring carrying the release velocity, at most one page per swipe.
• •The indicator is computed from the fractional page: its leading edge eases out and its trailing edge eases in between the two tabs' measured positions, so it stretches mid-swipe and lands exactly on the label (underline) or the tab (pill).
• •Labels recolor by distance to their page, from secondary to the selected color.
• •A scrolling strip scrolls each frame to keep the indicator centred.
• •Tapping a tab glides the pager on the smooth spring, which carries the indicator with it.
• •Reduced motion: tapping a tab swaps the page and fades it up instead of sliding; a swipe still follows the finger and settles with a short timing.

• •Haptic: select when a tap or a swipe settles on a different tab (configurable with haptic)

• •The pager, indicator, label colors and strip scrolling all run on the UI thread from one shared value; React state changes once per settled page.
• •With lazy (default) a page mounts the first time it or a neighbour is current, and stays mounted afterwards to keep its scroll position.

Accessibility

• •The strip is a tablist named by accessibilityLabel; each tab has the tab role with selected in accessibilityState and aria-selected on the web.
• •Only the current page is exposed to screen readers. On the web the other pages are tabpanels made inert, so their controls also leave the tab order.
• •Tab badges are read with the tab on the web and hidden as decoration on native (put the count in the title if it matters there).
• •Tabs are at least 44 pt tall and as wide as their label plus padding.

Notes for AI

Related