Core concepts

Expo Router

What needs Expo Router lives in its own entry point, @hzblj/kara-ui/router, so the main entry never imports it. Install expo-router to use it.

navigationTheme

Maps the kara theme onto Expo Router’s ThemeProvider, so headers, backgrounds and tab bars take the same colours as everything else. It sits inside KaraProvider, where the platform’s half of the palette is resolved.

tsx

import {useAppTheme} from '@hzblj/kara-ui'
import {navigationTheme} from '@hzblj/kara-ui/router'
import {ThemeProvider} from 'expo-router'

const Navigation = ({children}: {children: ReactNode}) => {
  const theme = useAppTheme()
  const value = useMemo(() => navigationTheme(theme), [theme])

  return <ThemeProvider value={value}>{children}</ThemeProvider>
}

Tabs

Native tabs for a layout route, on Expo Router’s native tabs — see Tabs.

ZoomTransition

A push that grows out of the view it was opened from and shrinks back into it — see ZoomTransition.

Rules

Nothing may come from the standalone @react-navigation/* packages: Expo Router vendors its own fork, and a navigator built against the npm copies throws “Couldn’t register the navigator”.
Every child route of a Tabs layout needs a Tabs.Screen; a component that merely renders one is invisible to the navigator.