<Tabs />

This component should only be rendered inside a _layout.tsx file, where it will serve as the location that children will render for routes below the layout.

Tabs is simply a React Navigation Bottom Tabs view and accepts the same props as React Navigation.

For now, you do need to set the href option on each Tabs.Screen to match the route file name. The plan is to automate this in the future.

import { Tabs } from 'one'

export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          href: '/explore',
        }}
      />
    </Tabs>
  )
}

Adding a new tab route has a bug currently that can cause it to not show up until you re-run your app with --clean.

On web

new

On web, <Tabs> renders headless: only the focused tab’s screen, no tab bar. Your site’s own navigation is your tab bar.

To build one, place a component as a child of <Tabs> - it replaces the headless default on web and is ignored on native. Use useTabs to get the tab list and the focused tab:

import { Link, Tabs, useTabs } from 'one'

function WebTabBar() {
  const { screens, focused } = useTabs()

  return (
    <>
      <nav>
        {screens.map((tab) => (
          <Link
            key={tab.name}
            href={tab.href}
            className={tab.isFocused ? 'active' : undefined}
          >
            {tab.options.title}
          </Link>
        ))}
      </nav>
      {focused.element}
    </>
  )
}

export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="explore" options={{ title: 'Explore', href: '/explore' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile', href: '/profile' }} />
      <WebTabBar />
    </Tabs>
  )
}

See the headless web navigators guide for more, including how native and web can share the same layout file.

PreviousStack

Drawer

Edit this page on GitHub.