Tab bar

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/tab-bar.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/tab-bar.

Usage

import { Tabs } from "expo-router";
import { NavigationTabBar } from "@/components/goodui-native/tab-bar/tab-bar";

export default function TabsLayout() {
  return (
    <Tabs tabBar={(props) => <NavigationTabBar {...props} variant="floating" />} screenOptions={{ headerShown: false }}>
      <Tabs.Screen name="index" options={{ title: "Home", tabBarIcon: ({ color, size }) => <HomeIcon color={color} size={size} /> }} />
      <Tabs.Screen name="inbox" options={{ title: "Inbox", tabBarBadge: 3, tabBarIcon: ({ color, size }) => <InboxIcon color={color} size={size} /> }} />
      <Tabs.Screen name="profile" options={{ title: "Profile", tabBarIcon: ({ color, size }) => <UserIcon color={color} size={size} /> }} />
    </Tabs>
  );
}

When to use

Examples

import { TabBar } from "@/components/goodui-native/tab-bar/tab-bar";

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

<TabBar
  accessibilityLabel="Main"
  value={tab}
  onValueChange={setTab}
  onReselect={() => listRef.current?.scrollToOffset({ offset: 0 })}
  items={[
    { value: "chats", label: "Chats", icon: (p) => <ChatIcon {...p} />, badge: unread },
    { value: "calls", label: "Calls", icon: (p) => <PhoneIcon {...p} />, badge: true },
    { value: "profile", label: "Profile", icon: (p) => <UserIcon {...p} /> },
  ]}
/>

const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler((e) => {
  scrollY.value = e.contentOffset.y;
});

<View style={{ flex: 1 }}>
  <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16} contentContainerStyle={{ paddingBottom: 120 }}>
    {content}
  </Animated.ScrollView>
  <TabBar variant="floating" absolute scrollY={scrollY} items={items} defaultValue="today" />
</View>

API reference

Motion and haptics

• •Selection: the pill's leading edge travels on the snappy spring and the trailing edge on the smooth spring, so it stretches toward the new tab and settles.
• •Drag: the pill follows the finger 1:1 along the bar, clamped to the ends; release projects the velocity and snaps to the nearest tab.
• •Icon and label colors cross-fade in proportion to how much of the pill covers each tab, so they follow a dragged pill.
• •The newly selected icon dips to 0.8 and springs back on the bouncy spring; a badge count that goes up pops to 1.35 and settles.
• •Hide on scroll: after 24 pt of downward scrolling the bar slides below the edge on the smooth spring; 24 pt upward or reaching the top brings it back.
• •Reduced motion: the pill jumps instead of stretching, no icon bounce or badge pop, and hiding becomes a fade.

• •Haptic: select when the tab changes on tap
• •Haptic: select on every tab boundary while dragging the pill (the release itself is quiet)

• •Pill, colors, bounce and hiding run on the UI thread; React renders only when the value or the items change.
• •Each icon renders twice (on and off colors) for the cross-fade, so keep icon components light.

Accessibility

• •The row has accessibilityRole tablist; each tab is a tab with accessibilityState selected (aria-selected on the web).
• •Tab labels include the badge: 'Chats, 3 new', or 'Calls, new' for a dot. Override with accessibilityLabel per item.
• •Every tab cell is at least 44 pt tall and fills an equal share of the width.
• •On the web tabs are focusable; Enter and Space select.
• •On the web a tab is named by its visible label plus visually hidden badge text, and the drawn badge is aria-hidden.

Notes for AI

Related