Expo Router UI

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

Configuration in app config

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

Example app.json with config plugin

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

Usage

Find more information about using expo-router/ui in Expo Router UI 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;
}

Constants

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