Header#

The headless default navigator header chrome. Drop it inside a Stack to get a back button, the screen title and any per-screen header content — reactively switched as you navigate, with zero styling of its own.

Import#

import { Header } from '@sigx/lynx-navigation';

Header takes no props. It reads the focused screen's chrome from the same reactive source you'd use to build a custom bar — useScreenChrome() — so it is mounted once and switches content as the focused entry changes.

If the focused entry registered a full-replacement <Screen.Header> slot, Header renders that. Otherwise it renders three regions:

• headerLeft — a back button when nav.canGoBack is true, or a screen-supplied <Screen.HeaderLeft>.
• title — the screen's options.title, falling back to the route name.
• headerRight — a screen-supplied <Screen.HeaderRight>.

Basic Usage#

Header is chrome rendered in a stack's nav scope, so it goes in the default slot of a Stack, as a sibling of the navigated screens:

import { defineRoutes, NavigationRoot, Stack, Header } from '@sigx/lynx-navigation';
import { Home } from './screens/Home';
import { Profile } from './screens/Profile';

export const routes = defineRoutes({
    home: { component: Home },
    profile: { component: Profile },
});

declare module '@sigx/lynx-navigation' {
    interface Register {
        routes: typeof routes;
    }
}

export const App = () => (
    <NavigationRoot routes={routes} initialRoute="home">
        <Stack>
            <Header />
        </Stack>
    </NavigationRoot>
);

Per-tab headers#

Because Header reads the navigator scope it is mounted in, give each tab its own Stack and <Header /> so every tab keeps an independent title and back stack:

import { Tabs, TabBar, Stack, Header } from '@sigx/lynx-navigation';

export const Main = () => (
    <Tabs initialTab="trips">
        <Tabs.Screen name="trips" label="Trips">
            <Stack initialRoute="tripsHome">
                <Header />
            </Stack>
        </Tabs.Screen>
        <Tabs.Screen name="account" label="Account">
            <Stack initialRoute="accountHome">
                <Header />
            </Stack>
        </Tabs.Screen>
        <TabBar />
    </Tabs>
);

Customizing the title and actions#

Header has no props — you steer it from each screen with <Screen> and its compound slot fills. Set the title with <Screen>'s title (or useScreenOptions), and fill the left/right regions with <Screen.HeaderLeft> / <Screen.HeaderRight>:

import { Screen, useParams, useScreenOptions } from '@sigx/lynx-navigation';

export const EditPost = () => {
    const { id } = useParams('editPost');

    // Tracked: re-merges whenever a read signal changes.
    useScreenOptions(() => ({ title: `Post ${id}` }));

    return (
        <Screen headerShown>
            <Screen.HeaderRight>
                <text bindtap={save}>Save</text>
            </Screen.HeaderRight>
            <view>{/* body */}</view>
        </Screen>
    );
};

To replace the whole bar for one screen, register a <Screen.Header> slot — Header renders it verbatim in place of the default left/title/right layout. Set headerShown={false} on a screen to hide the bar entirely for that entry.

Theming#

Header is intentionally unstyled. For a themed bar that reads the same useScreenChrome() data, use NavHeader from @sigx/lynx-daisyui. To build your own, read useScreenChrome() directly (title, headerShown, canGoBack, pop(), plus the header / headerLeft / headerRight slot fills) instead of mounting Header.

Props#

Header accepts no props — all of its content is derived reactively from the focused screen's chrome.

Slots#

Header exposes no slots of its own. Header content is contributed per-screen through Screen's compound sub-components:

See also#

• API reference — every export, signature and type.
• Usage — per-screen options and custom headers.