withLayoutContext

Create your own layouts.

Today there are a few built-in navigators: Slot, Stack, Tabs, NativeTabs, and Drawer. But you may want to create your own.

To make any React Navigation navigator work inside a One layout, use withLayoutContext. For example, this is how NativeTabs is built:

import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
import { withLayoutContext } from 'one'

const NativeTabsNavigator = createNativeBottomTabNavigator().Navigator

export const NativeTabs = withLayoutContext(
  NativeTabsNavigator
)

Now you can use NativeTabs in any _layout.tsx file. This same pattern works with any React Navigation compatible navigator.