@symbiote-native/navigation-bar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# @symbiote-native/navigation-bar
+
+Make the Android navigation bar match your screen: light or dark buttons, hidden for an immersive
+view. One API for every [SymbioteNative](../../README.md) adapter (React, Vue, Svelte, Solid and
+Angular).
+
+It wraps [`expo-navigation-bar`](https://github.com/expo/expo/tree/main/packages/expo-navigation-bar).
+**Android only**: upstream ships no iOS implementation, so every function throws
+`UnavailabilityError` off Android, matching this repo's normalization for platform-gated packages.
+Built the same way as [`@symbiote-native/intent-launcher`](../intent-launcher): an
+`expo-modules-core`-based wrapper (see the `symbiote-expo-native-module` project skill for the full
+mechanism).
+
+## Install
+
+**New app:**
+
+```bash
+npx @symbiote-native/cli new my-app --navigation-bar
+```
+
+**Existing SymbioteNative app:**
+
+```bash
+npx @symbiote-native/cli add --navigation-bar
+```
+
+Either way: installs `@symbiote-native/navigation-bar` and wires the native autolinking
+automatically, see [`@symbiote-native/cli`](../cli).
+
+<details>
+<summary>Manual install (no CLI, wiring native autolinking by hand)</summary>
+
+```bash
+npm install @symbiote-native/navigation-bar
+```
+
+`expo-navigation-bar` and `expo-modules-core` come along as regular, pinned dependencies, never
+install either yourself, and never add the `expo` meta-package to this project (it bundles its
+own Metro/Babel pipeline that conflicts with this project's own).
+
+### Required one-time step: native autolinking wiring
+
+Unlike a plain RN native module, `expo-navigation-bar`'s native code is discovered by
+`expo-modules-autolinking`, wired into the native host app **once**, covering this package and
+every other `expo-modules-core` package with zero further changes. Full mechanics live in the
+`symbiote-expo-native-module` skill.
+
+### No manifest permissions, config plugin not carried over
+
+- **No runtime permission, no manifest edit.** `expo-navigation-bar`'s own `AndroidManifest.xml`
+  declares nothing.
+- **The config plugin was checked and produces no diff with default props.** Upstream's
+  `withNavigationBar` only touches `styles.xml` (`android:windowLightNavigationBar`,
+  `android:enforceNavigationBarContrast`) when the app passes explicit plugin props
+  (`hidden`/`style`/`enforceContrast`); with none given it returns the config unchanged, and this
+  repo has no `app.json` for a plugin to read props from anyway. Setting an initial style/hidden
+  value before first paint (rather than calling `setStyle`/`setHidden` after mount) needs those
+  `styles.xml` edits applied by hand - not something `native-link.json` covers, since it has no
+  style-resource field, only manifest attributes and iOS Info.plist array keys.
+
+</details>
+
+## Shape
+
+```
+src/core/                 setStyle + setHidden + addVisibilityListener + setVisibilityAsync +
+                          getVisibilityAsync + the entries-stack merge core. The native module
+                          resolution is Android-only (native-module/index.android.ts); the base
+                          native-module/index.ts is an empty stub, same as upstream's own
+                          non-Android ExpoNavigationBar.ts
+src/react/                NavigationBar + useVisibility (hooks)
+src/vue/                  NavigationBar + useVisibility (composable)
+src/solid/                NavigationBar + createVisibility (primitive)
+src/svelte/               NavigationBar.svelte + use-visibility.svelte.ts (rune)
+src/angular/              NavigationBar + NavigationBarVisibilityService (DI)
+```
+
+Upstream's declarative `<NavigationBar>` component and `useVisibility` hook are ported to
+**every** adapter, not just React: the merge-stack logic lives once in `src/core/entries-stack.ts`
+(`pushStackEntry`/`popStackEntry`/`replaceStackEntry`), and each adapter supplies only its own
+lifecycle glue over that shared core, per this project's `components_split_logic_view_lifecycle`
+convention.
+
+## Use it
+
+```ts
+import { setHidden, setStyle } from '@symbiote-native/navigation-bar';
+
+setStyle('dark');
+setHidden(true);
+```
+
+```ts
+import { addVisibilityListener, getVisibilityAsync } from '@symbiote-native/navigation-bar';
+
+const visibility = await getVisibilityAsync();
+const subscription = addVisibilityListener(({ visibility }) => {
+  console.log(visibility);
+});
+```
+
+Declaratively, per adapter:
+
+```tsx
+// React / Vue / Solid: <NavigationBar style="dark" hidden={false} />
+// Svelte: <NavigationBar style="dark" hidden={false} />
+// Angular: <navigation-bar [style]="'dark'" [hidden]="false" />
+```
+
+The deepest mounted `<NavigationBar>` wins on shared fields (upstream's own priority rule);
+unmounting the last one falls back to `defaultNavigationBarProps`.
+
+## API
+
+| Export | Signature | Notes |
+| --- | --- | --- |
+| `setStyle` | `(style: INavigationBarStyle) => void` | `'auto'`/`'inverted'` resolve against `Appearance.getColorScheme()`; skips a redundant native call when the resolved style is unchanged |
+| `setHidden` | `(hidden: boolean) => void` | Skips a redundant native call when the value is unchanged |
+| `addVisibilityListener` | `(listener: (event: INavigationBarVisibilityEvent) => void) => EventSubscription` | |
+| `setVisibilityAsync` | `(visibility: INavigationBarVisibility) => Promise<void>` | Calls the native `setHidden` directly, bypassing `setHidden`'s own dedupe |
+| `getVisibilityAsync` | `() => Promise<INavigationBarVisibility>` | |
+
+## Notes
+
+- **Every function throws `UnavailabilityError` off Android**, replacing upstream's own
+  `console.warn`-and-no-op fallback - the same normalization this repo's other platform-gated
+  packages already apply.
+- **`setVisibilityAsync` forwards straight to the native module**, not through this package's own
+  `setHidden`, matching upstream's exact observable behavior (and the ported test asserting it).
+
+## Common questions
+
+- **`setBackgroundColorAsync` has no effect.** Reported on Expo Go; test in a development build.
+- **"The current activity is no longer available".** A setter ran with no activity attached; retry
+  once the app is foregrounded.
+- **`PlatformColor` fails.** Pass a plain color string.
+- **Black bar with `inset-swipe`.** Reported on phones that hide the bottom bar by default.
+
+Sources: [expo/expo#36814](https://github.com/expo/expo/issues/36814),
+[expo/expo#33950](https://github.com/expo/expo/issues/33950),
+[expo/expo#18515](https://github.com/expo/expo/issues/18515).
+
+## Test it
+
+```bash
+pnpm vitest run packages/navigation-bar
+```
+
+The core tests fake the native module in place of `requireNativeModule`'s runtime resolution -
+`ExpoNavigationBar` only exists on a real Android device, so a headless run would otherwise throw
+at import. Upstream's own three tests (`resolves the visibility from the native module`,
+`calls setHidden from setVisibilityAsync`, `adds and removes a visibility listener`) are all
+ported, translated onto this package's own fake-native-module harness; `setStyle`/`setHidden`'s
+resolve-and-dedupe behavior is net-new coverage upstream never exercised directly. Each adapter's
+`NavigationBar`/visibility port has its own lifecycle test (push/replace/pop the stack entry,
+resolve/track/clean up visibility), 53 tests total across the package.

package/build/angular/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../core';
+export { NavigationBar } from './navigation-bar';
+export { NavigationBarVisibilityService } from './navigation-bar-visibility.service';

package/build/angular/index.js

@@ -0,0 +1,3 @@
+export * from '../core/index.js';
+export { NavigationBar } from './navigation-bar.js';
+export { NavigationBarVisibilityService } from './navigation-bar-visibility.service.js';

package/build/angular/navigation-bar-visibility.service.d.ts

@@ -0,0 +1,5 @@
+import type { INavigationBarVisibility } from '../core';
+export declare class NavigationBarVisibilityService {
+    readonly visibility: import("@angular/core").WritableSignal<INavigationBarVisibility | null>;
+    constructor();
+}

package/build/angular/navigation-bar-visibility.service.js

@@ -0,0 +1,73 @@
+// Angular twin of `../react`/`../vue`/`../solid`/`../svelte`'s visibility hook, DI shape
+// matching `ColorSchemeService` (`components_split_logic_view_lifecycle`)
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { addVisibilityListener, getVisibilityAsync } from '../core/index.js';
+let NavigationBarVisibilityService = (() => {
+    let _classDecorators = [Injectable({ providedIn: 'root' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var NavigationBarVisibilityService = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            NavigationBarVisibilityService = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        visibility = signal(null);
+        constructor() {
+            const destroyRef = inject(DestroyRef);
+            let isMounted = true;
+            getVisibilityAsync().then(value => {
+                if (isMounted)
+                    this.visibility.set(value);
+            });
+            const subscription = addVisibilityListener(({ visibility: next }) => {
+                if (isMounted)
+                    this.visibility.set(next);
+            });
+            destroyRef.onDestroy(() => {
+                subscription.remove();
+                isMounted = false;
+            });
+        }
+    };
+    return NavigationBarVisibilityService = _classThis;
+})();
+export { NavigationBarVisibilityService };

package/build/angular/navigation-bar.d.ts

@@ -0,0 +1,13 @@
+import { type OnChanges, type OnDestroy, type OnInit } from '@angular/core';
+import { type INavigationBarStyle } from '../core';
+export declare class NavigationBar implements OnInit, OnChanges, OnDestroy {
+    style?: INavigationBarStyle;
+    hidden?: boolean;
+    private readonly colorScheme;
+    private stackEntry;
+    private isInitialized;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+}

package/build/angular/navigation-bar.js

@@ -0,0 +1,107 @@
+// Angular twin of `../react`/`../vue`/`../solid`/`../svelte`'s `NavigationBar`, same shared
+// stack core - only the lifecycle wiring differs per adapter
+// (`components_split_logic_view_lifecycle`)
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { Component, effect, inject, Input, } from '@angular/core';
+import { ColorSchemeService } from '@symbiote-native/angular';
+import { popStackEntry, pushStackEntry, replaceStackEntry, } from '../core/index.js';
+let NavigationBar = (() => {
+    let _classDecorators = [Component({
+            selector: 'navigation-bar',
+            standalone: true,
+            template: '',
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _style_decorators;
+    let _style_initializers = [];
+    let _style_extraInitializers = [];
+    let _hidden_decorators;
+    let _hidden_initializers = [];
+    let _hidden_extraInitializers = [];
+    var NavigationBar = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _style_decorators = [Input()];
+            _hidden_decorators = [Input()];
+            __esDecorate(null, null, _style_decorators, { kind: "field", name: "style", static: false, private: false, access: { has: obj => "style" in obj, get: obj => obj.style, set: (obj, value) => { obj.style = value; } }, metadata: _metadata }, _style_initializers, _style_extraInitializers);
+            __esDecorate(null, null, _hidden_decorators, { kind: "field", name: "hidden", static: false, private: false, access: { has: obj => "hidden" in obj, get: obj => obj.hidden, set: (obj, value) => { obj.hidden = value; } }, metadata: _metadata }, _hidden_initializers, _hidden_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            NavigationBar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        style = __runInitializers(this, _style_initializers, void 0);
+        hidden = (__runInitializers(this, _style_extraInitializers), __runInitializers(this, _hidden_initializers, void 0));
+        colorScheme = (__runInitializers(this, _hidden_extraInitializers), inject(ColorSchemeService).colorScheme);
+        stackEntry = null;
+        isInitialized = false;
+        constructor() {
+            effect(() => {
+                this.colorScheme();
+                if (this.stackEntry) {
+                    this.stackEntry = replaceStackEntry(this.stackEntry, {
+                        style: this.style,
+                        hidden: this.hidden,
+                    });
+                }
+            });
+        }
+        ngOnInit() {
+            this.stackEntry = pushStackEntry({
+                style: this.style,
+                hidden: this.hidden,
+            });
+            this.isInitialized = true;
+        }
+        ngOnChanges() {
+            if (!this.isInitialized || !this.stackEntry)
+                return;
+            this.stackEntry = replaceStackEntry(this.stackEntry, {
+                style: this.style,
+                hidden: this.hidden,
+            });
+        }
+        ngOnDestroy() {
+            if (this.stackEntry)
+                popStackEntry(this.stackEntry);
+        }
+    };
+    return NavigationBar = _classThis;
+})();
+export { NavigationBar };

package/build/core/entries-stack.d.ts

@@ -0,0 +1,8 @@
+import type { INavigationBarProps } from './types';
+export type INavigationBarStackEntry = INavigationBarProps;
+/** Registers a mounted `<NavigationBar>` entry */
+export declare function pushStackEntry(props: INavigationBarProps): INavigationBarStackEntry;
+/** Unregisters an entry, falling back to the previous entries or the last imperative call */
+export declare function popStackEntry(entry: INavigationBarStackEntry): void;
+/** Swaps an entry's props in place, for a mounted component's own prop changes */
+export declare function replaceStackEntry(entry: INavigationBarStackEntry, props: INavigationBarProps): INavigationBarStackEntry;

package/build/core/entries-stack.js

@@ -0,0 +1,54 @@
+// Framework-agnostic merge-stack over multiple mounted `<NavigationBar>` declarative components,
+// ported from expo-navigation-bar's NavigationBar.android.ts - the last pushed (or deepest in the
+// view hierarchy) entry wins on shared fields, matching upstream's own priority rule
+import { defaultNavigationBarProps, setHidden, setStyle, } from './navigation-bar.js';
+const entriesStack = [];
+let updateImmediate = null;
+function mergeEntriesStack(stack) {
+    return stack.reduce((prev, cur) => ({
+        style: cur.style ?? prev.style,
+        hidden: cur.hidden ?? prev.hidden,
+    }), {});
+}
+function createStackEntry(props) {
+    return { style: props.style, hidden: props.hidden };
+}
+function updateEntriesStack() {
+    if (updateImmediate != null)
+        clearImmediate(updateImmediate);
+    updateImmediate = setImmediate(() => {
+        if (entriesStack.length === 0) {
+            setStyle(defaultNavigationBarProps.style);
+            setHidden(defaultNavigationBarProps.hidden);
+            return;
+        }
+        const { style, hidden } = mergeEntriesStack(entriesStack);
+        if (style != null)
+            setStyle(style);
+        if (hidden != null)
+            setHidden(hidden);
+    });
+}
+/** Registers a mounted `<NavigationBar>` entry */
+export function pushStackEntry(props) {
+    const entry = createStackEntry(props);
+    entriesStack.push(entry);
+    updateEntriesStack();
+    return entry;
+}
+/** Unregisters an entry, falling back to the previous entries or the last imperative call */
+export function popStackEntry(entry) {
+    const index = entriesStack.indexOf(entry);
+    if (index !== -1)
+        entriesStack.splice(index, 1);
+    updateEntriesStack();
+}
+/** Swaps an entry's props in place, for a mounted component's own prop changes */
+export function replaceStackEntry(entry, props) {
+    const newEntry = createStackEntry(props);
+    const index = entriesStack.indexOf(entry);
+    if (index !== -1)
+        entriesStack[index] = newEntry;
+    updateEntriesStack();
+    return newEntry;
+}

package/build/core/index.d.ts

@@ -0,0 +1,3 @@
+export { addVisibilityListener, getVisibilityAsync, setHidden, setStyle, setVisibilityAsync, } from './navigation-bar';
+export { popStackEntry, pushStackEntry, replaceStackEntry, type INavigationBarStackEntry, } from './entries-stack';
+export type { INavigationBarProps, INavigationBarStyle, INavigationBarVisibility, INavigationBarVisibilityEvent, } from './types';

package/build/core/index.js

@@ -0,0 +1,2 @@
+export { addVisibilityListener, getVisibilityAsync, setHidden, setStyle, setVisibilityAsync, } from './navigation-bar.js';
+export { popStackEntry, pushStackEntry, replaceStackEntry, } from './entries-stack.js';

package/build/core/native-module/index.android.d.ts

@@ -0,0 +1,2 @@
+import type { INativeNavigationBarModule } from './shared';
+export declare const expoNavigationBar: INativeNavigationBarModule;

package/build/core/native-module/index.android.js

@@ -0,0 +1,2 @@
+import { requireNativeModule } from 'expo-modules-core';
+export const expoNavigationBar = requireNativeModule('ExpoNavigationBar');

package/build/core/native-module/index.d.ts

@@ -0,0 +1,2 @@
+import type { INativeNavigationBarModule } from './shared';
+export declare const expoNavigationBar: Partial<INativeNavigationBarModule>;

package/build/core/native-module/index.js

@@ -0,0 +1,3 @@
+// Android-only native module - upstream's own non-android entry types an empty stub, so every
+// function guards a missing method with UnavailabilityError rather than calling this
+export const expoNavigationBar = {};

package/build/core/native-module/shared.d.ts

@@ -0,0 +1,8 @@
+import type { EventSubscription } from 'expo-modules-core';
+import type { INavigationBarVisibility, INavigationBarVisibilityEvent } from '../types';
+export type INativeNavigationBarModule = {
+    addListener(event: 'ExpoNavigationBar.didChange', listener: (event: INavigationBarVisibilityEvent) => void): EventSubscription;
+    setStyle(style: 'light' | 'dark'): Promise<void>;
+    setHidden(hidden: boolean): Promise<void>;
+    getVisibilityAsync(): Promise<INavigationBarVisibility>;
+};

package/build/core/native-module/shared.js

@@ -0,0 +1 @@
+export {};

package/build/core/navigation-bar.d.ts

@@ -0,0 +1,16 @@
+import { type EventSubscription } from 'expo-modules-core';
+import type { INavigationBarStyle, INavigationBarVisibility, INavigationBarVisibilityEvent } from './types';
+export declare const defaultNavigationBarProps: {
+    style: INavigationBarStyle;
+    hidden: boolean;
+};
+/** Sets the navigation bar buttons' style */
+export declare function setStyle(style: INavigationBarStyle): void;
+/** Shows or hides the navigation bar */
+export declare function setHidden(hidden: boolean): void;
+/** Observes changes to the system navigation bar's visibility */
+export declare function addVisibilityListener(listener: (event: INavigationBarVisibilityEvent) => void): EventSubscription;
+/** Sets the navigation bar's visibility */
+export declare function setVisibilityAsync(visibility: INavigationBarVisibility): Promise<void>;
+/** Gets the navigation bar's current visibility */
+export declare function getVisibilityAsync(): Promise<INavigationBarVisibility>;

package/build/core/navigation-bar.js

@@ -0,0 +1,69 @@
+import { UnavailabilityError } from 'expo-modules-core';
+import { Appearance } from '@symbiote-native/engine';
+import { expoNavigationBar } from './native-module';
+function isLightColorScheme() {
+    return (Appearance.getColorScheme() ?? 'light') === 'light';
+}
+function resolveStyle(style) {
+    switch (style) {
+        case 'auto':
+            return isLightColorScheme() ? 'dark' : 'light';
+        case 'inverted':
+            return isLightColorScheme() ? 'light' : 'dark';
+        default:
+            return style;
+    }
+}
+let currentStyle;
+let currentHidden;
+// The baseline the declarative `<NavigationBar>` stack falls back to once every mounted
+// entry unmounts, kept in sync with every imperative `setStyle`/`setHidden` call too -
+// mirrors upstream's own `defaultProps`, read by ./entries-stack.ts
+export const defaultNavigationBarProps = {
+    style: 'light',
+    hidden: false,
+};
+/** Sets the navigation bar buttons' style */
+export function setStyle(style) {
+    if (!expoNavigationBar.setStyle) {
+        throw new UnavailabilityError('NavigationBar', 'setStyle');
+    }
+    defaultNavigationBarProps.style = style;
+    const resolved = resolveStyle(style);
+    if (resolved === currentStyle)
+        return;
+    currentStyle = resolved;
+    expoNavigationBar.setStyle(resolved);
+}
+/** Shows or hides the navigation bar */
+export function setHidden(hidden) {
+    if (!expoNavigationBar.setHidden) {
+        throw new UnavailabilityError('NavigationBar', 'setHidden');
+    }
+    defaultNavigationBarProps.hidden = hidden;
+    if (hidden === currentHidden)
+        return;
+    currentHidden = hidden;
+    expoNavigationBar.setHidden(hidden);
+}
+/** Observes changes to the system navigation bar's visibility */
+export function addVisibilityListener(listener) {
+    if (!expoNavigationBar.addListener) {
+        throw new UnavailabilityError('NavigationBar', 'addVisibilityListener');
+    }
+    return expoNavigationBar.addListener('ExpoNavigationBar.didChange', listener);
+}
+/** Sets the navigation bar's visibility */
+export async function setVisibilityAsync(visibility) {
+    if (!expoNavigationBar.setHidden) {
+        throw new UnavailabilityError('NavigationBar', 'setVisibilityAsync');
+    }
+    await expoNavigationBar.setHidden(visibility === 'hidden');
+}
+/** Gets the navigation bar's current visibility */
+export async function getVisibilityAsync() {
+    if (!expoNavigationBar.getVisibilityAsync) {
+        throw new UnavailabilityError('NavigationBar', 'getVisibilityAsync');
+    }
+    return expoNavigationBar.getVisibilityAsync();
+}

package/build/core/types.d.ts

@@ -0,0 +1,14 @@
+export type INavigationBarVisibility = 'visible' | 'hidden';
+export type INavigationBarVisibilityEvent = {
+    /** Current navigation bar visibility */
+    visibility: INavigationBarVisibility;
+    /** Native Android system UI visibility state, from `setOnSystemUiVisibilityChangeListener` */
+    rawVisibility: number;
+};
+/** `auto`/`inverted` resolve against the current color scheme, `light`/`dark` are fixed */
+export type INavigationBarStyle = 'auto' | 'inverted' | 'light' | 'dark';
+export type INavigationBarProps = {
+    /** @default 'auto' */
+    style?: INavigationBarStyle;
+    hidden?: boolean;
+};

package/build/core/types.js

@@ -0,0 +1,2 @@
+// Ported from expo-navigation-bar's NavigationBar.types.ts (sdk-57)
+export {};

package/build/react/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../core';
+export { NavigationBar } from './navigation-bar';
+export { useVisibility } from './use-visibility';

package/build/react/index.js

@@ -0,0 +1,3 @@
+export * from '../core/index.js';
+export { NavigationBar } from './navigation-bar.js';
+export { useVisibility } from './use-visibility.js';

package/build/react/navigation-bar.d.ts

@@ -0,0 +1,3 @@
+import { type INavigationBarProps } from '../core';
+/** Declaratively configures the navigation bar - several mounted instances merge, last wins */
+export declare function NavigationBar({ style, hidden }: INavigationBarProps): null;

package/build/react/navigation-bar.js

@@ -0,0 +1,23 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useColorScheme } from '@symbiote-native/react';
+import { popStackEntry, pushStackEntry, replaceStackEntry, } from '../core/index.js';
+/** Declaratively configures the navigation bar - several mounted instances merge, last wins */
+export function NavigationBar({ style, hidden }) {
+    const colorScheme = useColorScheme();
+    const stableProps = useMemo(() => ({ style, hidden }), [style, hidden]);
+    const stackEntryRef = useRef(null);
+    useEffect(() => {
+        stackEntryRef.current = pushStackEntry(stableProps);
+        return () => {
+            if (stackEntryRef.current)
+                popStackEntry(stackEntryRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (stackEntryRef.current) {
+            stackEntryRef.current = replaceStackEntry(stackEntryRef.current, stableProps);
+        }
+    }, [colorScheme, stableProps]);
+    return null;
+}

package/build/react/use-visibility.d.ts

@@ -0,0 +1,3 @@
+import type { INavigationBarVisibility } from '../core';
+/** Statefully tracks the system navigation bar's visibility, `null` during async initialization */
+export declare function useVisibility(): INavigationBarVisibility | null;