@sigx/lynx-navigation 0.1.0 → 0.1.1

package/src/components/Drawer.tsx

@@ -0,0 +1,121 @@
+/**
+ * `<Drawer>` — minimal off-canvas drawer navigator.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <Drawer
+ *     sidebar={() => <view><text>Menu</text></view>}
+ *   >
+ *     <Stack />
+ *   </Drawer>
+ * </NavigationRoot>
+ * ```
+ *
+ * `useDrawer()` from inside any descendant gives `{ isOpen, open(), close(),
+ * toggle() }`. The sidebar is laid out absolutely on the left and is
+ * visible whenever `isOpen` is true.
+ *
+ * Scope: this slice ships the state primitive + the bare-bones layout.
+ * Gesture-driven open (edge swipe from the left) and MTS slide-in are out
+ * of scope — the app shell can wrap its sidebar JSX in its own transition.
+ *
+ * Design note: the sidebar is passed as a render function via the
+ * `sidebar` slot prop rather than a `<Drawer.Sidebar>` child. Mixing
+ * "register-yourself-as-a-fill" children with the parent's own visible
+ * layout creates a feedback loop in sigx's reactive scope (the parent's
+ * render reads the fill, child's setup writes it, parent re-renders,
+ * child re-mounts, …). A scoped slot avoids that entirely and the API
+ * is identical at the call site.
+ *
+ * `default` slot is the main content (almost always a `<Stack>`).
+ */
+import {
+    component,
+    defineInjectable,
+    defineProvide,
+    signal,
+    type Define,
+    type Signal,
+} from '@sigx/lynx';
+
+/** Reactive controller returned by `useDrawer()`. */
+export interface DrawerNav {
+    /** True when the drawer is currently visible. Reactive. */
+    readonly isOpen: boolean;
+    /** Opens the drawer. */
+    open(): void;
+    /** Closes the drawer. */
+    close(): void;
+    /** Toggles between open and closed. */
+    toggle(): void;
+}
+
+/**
+ * Access the enclosing Drawer navigator. Throws when called outside
+ * `<Drawer>`.
+ */
+export const useDrawer = defineInjectable<DrawerNav>(() => {
+    throw new Error(
+        '[lynx-navigation] useDrawer() called outside of a <Drawer> component.',
+    );
+});
+
+type DrawerProps =
+    & Define.Prop<'initialOpen', boolean>
+    & Define.Slot<'sidebar'>
+    & Define.Slot<'default'>;
+
+export const Drawer = component<DrawerProps>(({ props, slots }) => {
+    // `isOpenSig` uses the `{value}` wrapper pattern — sigx's `signal()` of
+    // a primitive returns a proxy that requires `.value` reads; wrapping in
+    // an object makes the proxy carry a mutable boolean.
+    const isOpenSig: Signal<{ value: boolean }> = signal({
+        value: props.initialOpen === true,
+    });
+
+    const nav: DrawerNav = {
+        get isOpen() {
+            return isOpenSig.value;
+        },
+        open() {
+            isOpenSig.value = true;
+        },
+        close() {
+            isOpenSig.value = false;
+        },
+        toggle() {
+            isOpenSig.value = !isOpenSig.value;
+        },
+    };
+
+    defineProvide(useDrawer, () => nav);
+
+    return () => {
+        const open = isOpenSig.value;
+        return (
+            <view style={{ width: '100%', height: '100%' }}>
+                {/* Main content fills the whole parent. */}
+                <view style={{ width: '100%', height: '100%' }}>
+                    {slots.default?.()}
+                </view>
+
+                {/* Sidebar is overlaid; toggled via `display`. Apps that
+                    want an animated slide-in wrap the sidebar themselves
+                    — the navigator just controls visibility. */}
+                <view
+                    style={{
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                        display: open ? 'flex' : 'none',
+                    }}
+                >
+                    {slots.sidebar?.()}
+                </view>
+            </view>
+        );
+    };
+});

package/src/components/EdgeBackHandle.tsx

@@ -6,7 +6,7 @@ import {
     useMainThreadRef,
     type MainThread,
 } from '@sigx/lynx';
-import { withTiming } from '@sigx/motion';
+import { withTiming } from '@sigx/lynx-motion';
 import { useNavInternals } from '../hooks/use-nav-internal.js';
 import { SCREEN_WIDTH } from '../internal/screen-width.js';
 

package/src/components/EntryScope.tsx

@@ -0,0 +1,38 @@
+import { component, defineProvide, onUnmounted, type Define } from '@sigx/lynx';
+import { useCurrentEntry, useNavInternals, useScreenRegistry } from '../hooks/use-nav-internal.js';
+import { createScreenRegistry } from '../internal/screen-registry.js';
+import type { StackEntry } from '../types.js';
+
+type EntryScopeProps =
+    & Define.Prop<'entry', StackEntry, true>
+    & Define.Slot<'default'>;
+
+/**
+ * Provider wrapper for a single screen mount.
+ *
+ * `<Stack>` and `<ScreenContainer>` instantiate this around each route
+ * component so calls to `useIsFocused()` / `useFocusEffect()` /
+ * `<Screen>` inside that screen resolve through `useCurrentEntry()` and
+ * `useScreenRegistry()` to the entry it was rendered for. Without this
+ * wrapper there'd be no per-screen way to know "which stack entry am I?"
+ * — the navigator only knows what's currently on top.
+ *
+ * Also allocates a fresh `ScreenRegistry` per entry and publishes it to
+ * the navigator's cross-entry registry map, so persistent chrome (HeaderBar
+ * / TabBar — later slices) can read the focused entry's options + slot
+ * fills without remounting itself.
+ *
+ * Renders the default slot directly; no extra layout element is inserted,
+ * so this is layout-neutral for the screen it wraps.
+ */
+export const EntryScope = component<EntryScopeProps>(({ props, slots }) => {
+    const internals = useNavInternals();
+    const registry = createScreenRegistry(props.entry);
+    internals.screens.register(registry);
+    onUnmounted(() => {
+        internals.screens.unregister(props.entry.key);
+    });
+    defineProvide(useCurrentEntry, () => props.entry);
+    defineProvide(useScreenRegistry, () => registry);
+    return () => slots.default?.();
+});

package/src/components/Header.tsx

@@ -0,0 +1,124 @@
+/**
+ * `<Header>` — default navigator header chrome.
+ *
+ * Reads from the currently-focused entry's `ScreenRegistry`:
+ *
+ *   - If `slots.header` is set, render that (full override).
+ *   - Else render the default layout: headerLeft (back button when
+ *     `nav.canGoBack`), title (from `options.title`, or the route name as
+ *     a fallback), headerRight.
+ *
+ * Persistent: the Header component itself is mounted once near the root and
+ * stays mounted across navigations — it reactively switches its content
+ * when `nav.current` changes, rather than being remounted per screen. That
+ * matters because mounting cost adds to perceived transition latency.
+ *
+ * Header chrome is opt-in. Consumers place `<Header />` inside
+ * `<NavigationRoot>` above `<Stack />`. We don't auto-inject because:
+ *   - app shells vary (some want the header inside a `<SafeArea>`, some
+ *     want a custom toolbar, some want no header at all in tabs).
+ *   - making it opt-in keeps `<Stack>`'s contract narrow.
+ */
+import { component, computed } from '@sigx/lynx';
+import { useNav } from '../hooks/use-nav.js';
+import { useNavInternals } from '../hooks/use-nav-internal.js';
+import type { ScreenOptions, ScreenSlotFills, StackEntry } from '../types.js';
+
+/**
+ * Resolve a title (string or getter) to a plain string.
+ *
+ * Getter is the more general case; the `<Screen title={() => state.value}>`
+ * call site is how reactive titles work. A plain string is wrapped in a
+ * trivial closure so consumers always handle one shape.
+ */
+function resolveTitle(t: ScreenOptions['title'], routeName: string): string {
+    if (typeof t === 'function') return t();
+    if (typeof t === 'string') return t;
+    return routeName;
+}
+
+/**
+ * Default back-button rendering. Plain `<text>` with a tap handler — apps
+ * that want an icon or a custom design override via
+ * `<Screen.HeaderLeft>`. Kept minimal because there's no shared icon
+ * primitive at the navigation layer.
+ */
+const DefaultBackButton = component<{ onPress: () => void } & {}>(({ props }) => {
+    return () => (
+        <view bindtap={() => props.onPress()}>
+            <text>‹ Back</text>
+        </view>
+    );
+});
+
+const DefaultTitle = component<{ text: string } & {}>(({ props }) => {
+    return () => (
+        <view>
+            <text>{props.text}</text>
+        </view>
+    );
+});
+
+/**
+ * Persistent header chrome. Mount once above `<Stack>`; reactively follows
+ * the focused entry. No props in v1 — styling is a host-app concern,
+ * arrived at through the slot fills.
+ */
+export const Header = component(() => {
+    const nav = useNav();
+    const internals = useNavInternals();
+
+    // Snapshot computeds — each one reads only what it needs so the header
+    // doesn't re-run wholesale on every signal touch. The slot-fill thunks
+    // captured by `<Screen.Header>` etc. are themselves reactive (they
+    // execute on every render of the consumer's tree), so re-running the
+    // outer template is enough to pick up downstream updates.
+    const currentEntry = computed<StackEntry>(() => nav.current);
+
+    const headerSlot = computed<ScreenSlotFills['header'] | undefined>(() => {
+        const reg = internals.screens.get(currentEntry.value.key);
+        return reg?.slots.header;
+    });
+    const headerLeftSlot = computed<ScreenSlotFills['headerLeft'] | undefined>(() => {
+        const reg = internals.screens.get(currentEntry.value.key);
+        return reg?.slots.headerLeft;
+    });
+    const headerRightSlot = computed<ScreenSlotFills['headerRight'] | undefined>(() => {
+        const reg = internals.screens.get(currentEntry.value.key);
+        return reg?.slots.headerRight;
+    });
+    const headerShown = computed<boolean>(() => {
+        const reg = internals.screens.get(currentEntry.value.key);
+        // Default true — most screens want a header. Opting out is one prop
+        // on `<Screen>`.
+        return reg?.options.headerShown !== false;
+    });
+    const titleText = computed<string>(() => {
+        const reg = internals.screens.get(currentEntry.value.key);
+        return resolveTitle(reg?.options.title, currentEntry.value.route);
+    });
+
+    return () => {
+        if (!headerShown.value) return null;
+        // Full-override path: `<Screen.Header>` supplied its own content,
+        // we render that and skip the default layout entirely.
+        const override = headerSlot.value;
+        if (override) return override();
+
+        return (
+            <view>
+                <view>
+                    {headerLeftSlot.value
+                        ? headerLeftSlot.value()
+                        : nav.canGoBack
+                            ? <DefaultBackButton onPress={() => nav.pop()} />
+                            : null}
+                </view>
+                <DefaultTitle text={titleText.value} />
+                <view>
+                    {headerRightSlot.value ? headerRightSlot.value() : null}
+                </view>
+            </view>
+        );
+    };
+});

package/src/components/NavigationRoot.tsx

@@ -4,6 +4,7 @@ import { useNav } from '../hooks/use-nav.js';
 import { useNavInternals, useNavRoutes } from '../hooks/use-nav-internal.js';
 import type { RouteId } from '../register.js';
 import type { Presentation, RouteMap, StackEntry } from '../types.js';
+import { _setRouteRegistry } from '../url/registry.js';
 
 type NavigationRootProps =
     & Define.Prop<'routes', RouteMap, true>
@@ -12,7 +13,7 @@ type NavigationRootProps =
     & Define.Prop<'initialSearch', Record<string, unknown>>
     /**
      * Enable slide-from-right transitions on push/pop. Defaults to true.
-     * Tests against `@sigx/testing-lynx` (which doesn't have an MT runtime)
+     * Tests against `@sigx/lynx-testing` (which doesn't have an MT runtime)
      * should pass `animated={false}` so navigations commit synchronously.
      */
     & Define.Prop<'animated', boolean>
@@ -48,6 +49,12 @@ export const NavigationRoot = component<NavigationRootProps>(({ props, slots })
             `[lynx-navigation] <NavigationRoot> initialRoute='${initialName}' is not in the routes registry.`,
         );
     }
+    // Publish the active route registry to the URL bridge so module-level
+    // `hrefFor` / `parseHref` callers (deep-link handlers, anything outside
+    // the component tree) resolve against this navigator's routes. Last
+    // mount wins — multi-root apps that need isolation should call the
+    // URL helpers with explicit context (TBD post-1.0).
+    _setRouteRegistry(routes);
     const initialPresentation: Presentation = routes[initialName].presentation ?? 'card';
     const initial: StackEntry = {
         key: 'root',
@@ -79,6 +86,7 @@ export const NavigationRoot = component<NavigationRootProps>(({ props, slots })
         commitBackGesture: navState._gesture.commitBackGesture,
         cancelBackGesture: navState._gesture.cancelBackGesture,
         edgeSwipeEnabled,
+        screens: navState._screens,
     }));
 
     return () => slots.default?.();

package/src/components/Screen.tsx

@@ -0,0 +1,116 @@
+/**
+ * `<Screen>` — declarative per-screen options + slot fills.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const ProfileScreen = component(() => () => (
+ *   <Screen title="Profile" headerShown gestureEnabled>
+ *     <Screen.HeaderRight>
+ *       <text bindtap={onEdit}>Edit</text>
+ *     </Screen.HeaderRight>
+ *     <Screen.TabBarItem>
+ *       {({ active }) => (
+ *         <text style={{ color: active ? '#007aff' : '#888' }}>Me</text>
+ *       )}
+ *     </Screen.TabBarItem>
+ *     <view>body…</view>
+ *   </Screen>
+ * ));
+ * ```
+ *
+ * `<Screen>` itself renders its `default` slot inline — so the body lives
+ * where you'd expect with no extra layout wrapper. The sub-components
+ * (`Screen.Header`, `Screen.HeaderLeft`, `Screen.HeaderRight`,
+ * `Screen.TabBarItem`) render `null` and write into the entry's
+ * `ScreenRegistry`. The navigator's persistent chrome reads from there.
+ *
+ * Sub-component placement inside `<Screen>` is conventional — sigx scopes
+ * are by component tree, so they work anywhere under the same EntryScope.
+ * Placing them as direct children of `<Screen>` keeps the call site
+ * declarative and grep-friendly.
+ */
+import { component, onUnmounted, type Define } from '@sigx/lynx';
+import { useScreenRegistry } from '../hooks/use-nav-internal.js';
+import { mergeOptions, setSlot } from '../internal/screen-registry.js';
+
+type ScreenProps =
+    & Define.Prop<'title', string | (() => string)>
+    & Define.Prop<'headerShown', boolean>
+    & Define.Prop<'gestureEnabled', boolean>
+    & Define.Slot<'default'>;
+
+const ScreenRoot = component<ScreenProps>(({ props, slots }) => {
+    const registry = useScreenRegistry();
+    // Apply options whenever the component sets up. Options are reactive
+    // through the registry's `options` signal — chrome consumers re-render
+    // on the next merge. We don't bother diffing here: the patch is small
+    // and writes only happen during setup + explicit prop changes upstream.
+    mergeOptions(registry, {
+        title: props.title,
+        headerShown: props.headerShown,
+        gestureEnabled: props.gestureEnabled,
+    });
+    return () => slots.default?.();
+});
+
+type SimpleSlotProps = Define.Slot<'default'>;
+
+/**
+ * Build a sub-component that registers its `default` slot under `name` on
+ * the current screen's registry. Unmount removes the fill so navigating
+ * away from a screen with a `<Screen.HeaderRight>` clears that action.
+ */
+function makeSlotFiller(name: 'header' | 'headerLeft' | 'headerRight') {
+    return component<SimpleSlotProps>(({ slots }) => {
+        const registry = useScreenRegistry();
+        setSlot(registry, name, () => slots.default?.());
+        onUnmounted(() => setSlot(registry, name, undefined));
+        return () => null;
+    });
+}
+
+const Header = makeSlotFiller('header');
+const HeaderLeft = makeSlotFiller('headerLeft');
+const HeaderRight = makeSlotFiller('headerRight');
+
+/**
+ * `<Screen.TabBarItem>` — scoped slot. The default slot is a function that
+ * receives `{ active }`; whatever it returns is the tab-bar item content.
+ *
+ * Sigx's `Define.Slot<'default', { active: boolean }>` would express this
+ * directly on the component, but since `<Screen.TabBarItem>`'s parent
+ * (the user's tree, not the navigator) doesn't actually pass `active`, we
+ * accept a plain default slot whose body is itself a function. The
+ * navigator's TabBar invokes that function with the active flag.
+ */
+type TabBarItemProps = Define.Slot<'default'>;
+
+const TabBarItem = component<TabBarItemProps>(({ slots }) => {
+    const registry = useScreenRegistry();
+    setSlot(registry, 'tabBarItem', (ctx) => {
+        const out = slots.default?.();
+        // Children may be a render function `({active}) => JSX` or plain
+        // JSX (in which case `active` is ignored). Normalise to a value.
+        if (typeof out === 'function') return (out as (c: typeof ctx) => unknown)(ctx);
+        if (Array.isArray(out)) {
+            const first = out[0];
+            if (typeof first === 'function') return (first as (c: typeof ctx) => unknown)(ctx);
+        }
+        return out;
+    });
+    onUnmounted(() => setSlot(registry, 'tabBarItem', undefined));
+    return () => null;
+});
+
+/**
+ * Compound export. `Screen` is callable as a JSX element and exposes the
+ * sub-components as properties (`Screen.Header`, etc.) for the declarative
+ * call site shown in the file header.
+ */
+export const Screen = Object.assign(ScreenRoot, {
+    Header,
+    HeaderLeft,
+    HeaderRight,
+    TabBarItem,
+});

package/src/components/ScreenContainer.tsx

@@ -7,9 +7,11 @@ import {
     type MainThread,
     type SharedValue,
 } from '@sigx/lynx';
+import { Suspense, isLazyComponent } from '@sigx/lynx';
 import type { MapperParams } from '@sigx/lynx';
 import { SCREEN_WIDTH } from '../internal/screen-width.js';
 import type { RouteMap, StackEntry, TransitionKind, TransitionRole } from '../types.js';
+import { EntryScope } from './EntryScope.js';
 
 /**
  * Slide-from-right transition geometry. `SCREEN_WIDTH` is read from
@@ -82,6 +84,15 @@ export const ScreenContainer = component<ScreenContainerProps>(({ props }) => {
         >;
         if (typeof Comp !== 'function') return null;
         const entryParams = props.entry.params as Record<string, unknown>;
+        // Wrap lazy screens that declare a fallback in Suspense — see Stack.tsx
+        // for rationale.
+        const body = isLazyComponent(Comp) && route.fallback
+            ? (
+                <Suspense fallback={route.fallback as never}>
+                    <Comp {...entryParams} />
+                </Suspense>
+            )
+            : <Comp {...entryParams} />;
         return (
             <view
                 main-thread:ref={ref}
@@ -94,7 +105,9 @@ export const ScreenContainer = component<ScreenContainerProps>(({ props }) => {
                     backgroundColor: '#0f172a',
                 }}
             >
-                <Comp key={props.entry.key} {...entryParams} />
+                <EntryScope key={props.entry.key} entry={props.entry}>
+                    {body}
+                </EntryScope>
             </view>
         );
     };

package/src/components/Stack.tsx

@@ -1,8 +1,10 @@
 import { component, type ComponentFactory, type SharedValue } from '@sigx/lynx';
+import { Suspense, isLazyComponent } from '@sigx/lynx';
 import { useNav } from '../hooks/use-nav.js';
 import { useNavInternals, useNavRoutes } from '../hooks/use-nav-internal.js';
 import { ScreenContainer } from './ScreenContainer.js';
 import { EdgeBackHandle } from './EdgeBackHandle.js';
+import { EntryScope } from './EntryScope.js';
 
 /**
  * Stack navigator — renders the topmost stack entry's component at rest, or
@@ -41,6 +43,17 @@ export const Stack = component(() => {
             >;
             if (typeof Comp !== 'function') return null;
             const params = top.params as Record<string, unknown>;
+            // Wrap lazy routes that declare a `fallback` in <Suspense> so the
+            // chunk-load shows the user-provided spinner instead of throwing
+            // up to the nearest outer boundary (which may be wrong layer or
+            // missing entirely).
+            const body = isLazyComponent(Comp) && route.fallback
+                ? (
+                    <Suspense fallback={route.fallback as never}>
+                        <Comp {...params} />
+                    </Suspense>
+                )
+                : <Comp {...params} />;
             // When canGoBack and edge-swipe is enabled, overlay the gesture
             // handle so the user can pan from the left edge to start a back
             // transition. `position: absolute` doesn't disturb the screen's
@@ -55,12 +68,18 @@ export const Stack = component(() => {
                             height: '100%',
                         }}
                     >
-                        <Comp key={top.key} {...params} />
+                        <EntryScope key={top.key} entry={top}>
+                            {body}
+                        </EntryScope>
                         <EdgeBackHandle key="edge-back" />
                     </view>
                 );
             }
-            return <Comp key={top.key} {...params} />;
+            return (
+                <EntryScope key={top.key} entry={top}>
+                    {body}
+                </EntryScope>
+            );
         }
 
         // Cast progress: TransitionState carries it as `unknown` to avoid

package/src/components/TabBar.tsx

@@ -0,0 +1,103 @@
+/**
+ * `<TabBar>` — default chrome for `<Tabs>`.
+ *
+ * Renders a row of tab buttons reading from the enclosing `useTabs()`
+ * navigator. Active tab is highlighted via the `active` prop on each
+ * default button (consumers can re-style via `renderTab`).
+ *
+ * Customization knobs:
+ *   - `renderTab`: a function `(info, ctx) => JSX` that fully replaces the
+ *     default button rendering for each tab. `ctx.active` tells the
+ *     consumer whether this tab is currently focused; `ctx.onPress`
+ *     activates the tab.
+ *
+ * Accessibility:
+ *   - Each default button gets `accessibility-label` from
+ *     `info.accessibilityLabel ?? info.label ?? info.name`.
+ *   - Each default button gets `accessibility-element="true"` so screen
+ *     readers see the whole pill, not just the inner `<text>`.
+ *   - Each default button gets `accessibility-trait="button"` and a
+ *     `selected` flag on the active one so VoiceOver/TalkBack announces
+ *     focus state on tab switch.
+ *
+ * Placement: mount inside `<Tabs>` alongside the `<Tabs.Screen>`s. Order
+ * matters visually (place above or below the screen bodies depending on
+ * the layout), and `<Tabs.Screen>` bodies all stack with `display:flex` so
+ * the TabBar should be at a deterministic position in the JSX.
+ */
+import {
+    component,
+    type Define,
+    type JSXElement,
+} from '@sigx/lynx';
+import { useTabs, type TabInfo } from './Tabs.js';
+
+/** Rendering context passed to a `renderTab` consumer. */
+export interface TabRenderContext {
+    /** True when this tab is currently active. Reactive — re-runs render on change. */
+    readonly active: boolean;
+    /** Activates this tab. Use as a `bindtap` handler on the rendered node. */
+    onPress(): void;
+}
+
+type TabBarProps =
+    & Define.Prop<'renderTab', (info: TabInfo, ctx: TabRenderContext) => JSXElement>;
+
+/**
+ * Default per-tab button. Plain `<view>` with a `<text>` inside, an
+ * `accessibility-*` cluster for screen readers, and a tap handler. No
+ * styling beyond a minimal active-state marker — consumers that want
+ * branded chrome pass `renderTab`.
+ */
+const DefaultTabButton = component<
+    & Define.Prop<'info', TabInfo, true>
+    & Define.Prop<'active', boolean, true>
+    & Define.Prop<'onPress', () => void, true>
+>(({ props }) => {
+    return () => {
+        const label = props.info.label ?? props.info.name;
+        const a11y = props.info.accessibilityLabel ?? label;
+        return (
+            <view
+                bindtap={() => props.onPress()}
+                accessibility-element={true}
+                accessibility-label={a11y}
+                accessibility-trait="button"
+                style={{ opacity: props.active ? 1 : 0.6 }}
+            >
+                {props.info.icon ?? null}
+                <text>{label}</text>
+            </view>
+        );
+    };
+});
+
+export const TabBar = component<TabBarProps>(({ props }) => {
+    const nav = useTabs();
+    return () => {
+        // Reading `nav.tabs` and `nav.active` here ties this render to both
+        // the registration list and the active signal — switching active or
+        // adding/removing a `<Tabs.Screen>` updates the bar reactively.
+        const tabs = nav.tabs;
+        const active = nav.active;
+        const renderer = props.renderTab;
+        return (
+            <view accessibility-element={false}>
+                {tabs.map((info) => {
+                    const isActive = info.name === active;
+                    const onPress = () => nav.setActive(info.name);
+                    if (renderer) {
+                        return renderer(info, { active: isActive, onPress });
+                    }
+                    return (
+                        <DefaultTabButton
+                            info={info}
+                            active={isActive}
+                            onPress={onPress}
+                        />
+                    );
+                })}
+            </view>
+        );
+    };
+});