This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
An Expo Router submodule that provides headless UI navigators to create custom layouts.
expo-router/ui is a submodule of expo-router library and exports components and hooks to build custom 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.
-Â npx expo install expo-routerIf you are using the default template to create a new project, expo-router config plugin is automatically configured in the app config automatically.
{
"expo": {
"plugins": ["expo-router"]
}
}
Find more information about using expo-router/ui in Expo Router UI guide.
import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';
defaultTabsSlotRenderType: React.Element<Descriptor<ExpoTabsNavigatorScreenOptions, Omit<undefined & PrivateValueStore<[ParamListBase, unknown, unknown]>, 'getParent'> & undefined & EventConsumer<TabNavigationEventMap & EventMapCore<TabNavigationState<any>>> & PrivateValueStore<[ParamListBase, string, TabNavigationEventMap]> & TabActionHelpers<ParamListBase>, RouteProp<ParamListBase, string>>>
TabListType: React.Element<TabListProps>
Wrapper component for TabTriggers. TabTriggers within the TabList define the tabs.
Example
<Tabs>
<TabSlot />
<TabList>
<TabTrigger name="home" href="/" />
</TabList>
</Tabs>
asChildbooleanForward props to child component and removes the extra <View>. Useful for custom wrappers.
TabsType: React.Element<TabsProps>
Root component for the headless tabs.
See:
useTabsWithChildrenfor a hook version of this component.
Example
<Tabs>
<TabSlot />
<TabList>
<TabTrigger name="home" href="/" />
</TabList>
</Tabs>
asChildbooleanForward props to child component and removes the extra <View>. Useful for custom wrappers.
TabSlotType: React.Element<UseTabSlotOptions>
Renders the current tab.
See:
useTabSlotfor a hook version of this component.
Example
<Tabs>
<TabSlot />
<TabList>
<TabTrigger name="home" href="/" />
</TabList>
</Tabs>
TabTriggerType: React.Element<TabTriggerProps>
Creates a trigger to navigate to a tab. When used as child of TabList, its
functionality slightly changes since the href prop is required,
and the trigger also defines what routes are present in the Tabs.
When used outside of TabList, this component no longer requires an href.
Example
<Tabs>
<TabSlot />
<TabList>
<TabTrigger name="home" href="/" />
</TabList>
</Tabs>
asChildbooleanForward props to child component. Useful for custom wrappers.
namestringName of tab. When used within a TabList this sets the name of the tab.
Otherwise, this references the name.
resetSwitchToOptions['reset'] | 'onLongPress'Resets the route when switching to a tab.
useTabSlotType: React.Element<UseTabSlotOptions>
Returns a ReactElement of the current tab.
See:
useTabSlot.
Example
function MyTabSlot() {
const slot = useTabSlot();
return slot;
}
useTabSlot(options)| Parameter | Type |
|---|---|
| options (optional) | UseTabSlotOptions |
Returns a ReactElement of the current tab.
See:
useTabSlot.
Example
function MyTabSlot() {
const slot = useTabSlot();
return slot;
}
useTabsWithChildren(options)| Parameter | Type |
|---|---|
| options | UseTabsWithChildrenOptions |
Hook version of Tabs. The returned NavigationContent component
should be rendered.
See:
Tabsfor the component version of this hook.
Example
export function MyTabs({ children }) {
const { NavigationContent } = useTabsWithChildren({ children })
return <NavigationContent />
}
useTabsWithTriggers(options)| Parameter | Type |
|---|---|
| options | UseTabsWithTriggersOptions |
Alternative hook version of Tabs that uses explicit triggers
instead of children.
See:
Tabsfor the component version of this hook.
Example
export function MyTabs({ children }) {
const { NavigationContent } = useTabsWithChildren({ triggers: [] })
return <NavigationContent />
}
useTabTrigger(options)| Parameter | Type |
|---|---|
| options | TabTriggerProps |
Utility hook creating custom TabTrigger.
ExpoTabsNavigationPropType: NavigationProp<ParamList, RouteName, NavigatorID, TabNavigationState<ParamListBase>, ExpoTabsScreenOptions, TabNavigationEventMap>
ExpoTabsNavigatorOptionsLiteral Type: multiple types
Acceptable values are: DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, ExpoTabsScreenOptions, TabNavigationEventMap, ExpoTabsNavigationProp<ParamListBase>> | Omit<TabRouterOptions, 'initialRouteName'> | ExpoTabsNavigatorScreenOptions
ExpoTabsNavigatorScreenOptions| Name | Type | Description |
|---|---|---|
| detachInactiveScreens (optional) | boolean | - |
| freezeOnBlur (optional) | boolean | - |
| lazy (optional) | boolean | - |
| unmountOnBlur (optional) | boolean | - |
SwitchToOptionsOptions for switchTab function.
| Name | Type | Description |
|---|---|---|
| reset (optional) | ExpoTabsResetValue | Navigate and reset the history. |
TabsContextValueType: ReturnType<useNavigationBuilder>
The React Navigation custom navigator.
See:
useNavigationBuilderhook from React Navigation for more information.
TabsSlotRenderOptionsOptions provided to the UseTabSlotOptions.
| Name | Type | Description |
|---|---|---|
| detachInactiveScreens | boolean | Should the screen be unloaded when inactive. |
| index | number | Index of screen. |
| isFocused | boolean | Whether the screen is focused. |
| loaded | boolean | Whether the screen has been loaded. |
TriggerType: extended by:
| Name | Type | Description |
|---|---|---|
| isFocused | boolean | - |
| resolvedHref | string | - |
| route | undefined[number] | - |
UseTabSlotOptionsType: ComponentProps<ScreenContainer> extended by:
| Name | Type | Description |
|---|---|---|
| detachInactiveScreens (optional) | boolean | Remove inactive screens. |
| renderFn (optional) | defaultTabsSlotRender | Override how the |
UseTabsOptionsOptions to provide to the Tab Router.
Type: Omit<DefaultNavigatorOptions<ParamListBase, any, TabNavigationState<any>, ExpoTabsScreenOptions, TabNavigationEventMap, any>, 'children'> extended by:
| Name | Type | Description |
|---|---|---|
| backBehavior (optional) | TabRouterOptions['backBehavior'] | - |
UseTabsWithChildrenOptionsType: UseTabsOptions extended by:
| Name | Type | Description |
|---|---|---|
| children | ReactNode | - |
UseTabsWithTriggersOptionsType: UseTabsOptions extended by:
| Name | Type | Description |
|---|---|---|
| triggers | ScreenTrigger[] | - |
UseTabTriggerResult| Name | Type | Description |
|---|---|---|
| getTrigger | (name: string) => Trigger | undefined | - |
| switchTab | (name: string, options: SwitchToOptions) => void | - |
| trigger (optional) | Trigger | - |
| triggerProps | TriggerProps | - |