This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

An Expo Router submodule that provides headless tab components to create custom tab layouts.

expo-router/ui is a submodule of expo-router library and exports components and hooks to build custom tab layouts, rather than using the default React Navigation navigators provided by expo-router.

See the Expo Router reference for more information about the file-based routing library for native and web app.

Installation

To use expo-router/ui in your project, you need to install expo-router in your project. Follow the instructions from the Expo Router's installation guide:

Configuration in app config

If you are using the default template to create a new project, expo-router's config plugin is already configured in your app config.

Example app.json with config plugin

{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Usage

For information about using expo-router/ui in Custom tab layouts guide:

API

import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';

Components

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

function MyTabSlot() {
  const slot = useTabSlot();

  return slot;
}

Hooks

function MyTabSlot() {
  const slot = useTabSlot();

  return slot;
}

export function MyTabs({ children }) {
 const { NavigationContent } = useTabsWithChildren({ children })

 return <NavigationContent />
}

export function MyTabs({ children }) {
  const { NavigationContent } = useTabsWithChildren({ triggers: [] })

  return <NavigationContent />
}

Types