@symbiote-native/navigation-bar 0.1.0

package/build-ngc/core/types.js

@@ -0,0 +1,3 @@
+// Ported from expo-navigation-bar's NavigationBar.types.ts (sdk-57)
+export {};
+//# sourceMappingURL=types.js.map

package/build-ngc/core/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,oEAAoE"}

package/native-link.json

@@ -0,0 +1,12 @@
+{
+  "android": {
+    "gradleProjectName": "expo-navigation-bar",
+    "modules": [
+      {
+        "importPath": "expo.modules.navigationbar.NavigationBarModule",
+        "className": "NavigationBarModule",
+        "nativeName": "ExpoNavigationBar"
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,150 @@
+{
+  "name": "@symbiote-native/navigation-bar",
+  "version": "0.1.0",
+  "description": "expo-navigation-bar wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Sets the Android navigation bar's style and visibility. Android only.",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-navigation-bar",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "android",
+    "navigation-bar"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/navigation-bar"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/navigation-bar#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": {
+      "types": "./build/svelte/index.d.ts",
+      "default": "./build/svelte/index.js"
+    },
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-navigation-bar": "57.0.2",
+    "expo-modules-core": "57.0.20"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^3.1.3",
+    "@symbiote-native/engine": "^1.4.0",
+    "@symbiote-native/react": "^3.1.0",
+    "@symbiote-native/solid": "^3.0.5",
+    "@symbiote-native/vue": "^3.1.0",
+    "@symbiote-native/svelte": "^3.0.5"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.1.3",
+    "@symbiote-native/engine": "1.4.0",
+    "@symbiote-native/react": "3.1.0",
+    "@symbiote-native/solid": "3.0.5",
+    "@symbiote-native/vue": "3.1.0",
+    "@symbiote-native/svelte": "3.0.5",
+    "@symbiote-native/test-utils": "0.4.5"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}

package/src/angular/index.ts

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

package/src/angular/navigation-bar-visibility.service.ts

@@ -0,0 +1,29 @@
+// Angular twin of `../react`/`../vue`/`../solid`/`../svelte`'s visibility hook, DI shape
+// matching `ColorSchemeService` (`components_split_logic_view_lifecycle`)
+
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { addVisibilityListener, getVisibilityAsync } from '../core';
+import type { INavigationBarVisibility } from '../core';
+
+@Injectable({ providedIn: 'root' })
+export class NavigationBarVisibilityService {
+  readonly visibility = signal<INavigationBarVisibility | null>(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;
+    });
+  }
+}

package/src/angular/navigation-bar.ts

@@ -0,0 +1,67 @@
+// 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`)
+
+import {
+  Component,
+  effect,
+  inject,
+  Input,
+  type OnChanges,
+  type OnDestroy,
+  type OnInit,
+} from '@angular/core';
+import { ColorSchemeService } from '@symbiote-native/angular';
+import {
+  popStackEntry,
+  pushStackEntry,
+  replaceStackEntry,
+  type INavigationBarStackEntry,
+  type INavigationBarStyle,
+} from '../core';
+
+@Component({
+  selector: 'navigation-bar',
+  standalone: true,
+  template: '',
+})
+export class NavigationBar implements OnInit, OnChanges, OnDestroy {
+  @Input() style?: INavigationBarStyle;
+  @Input() hidden?: boolean;
+
+  private readonly colorScheme = inject(ColorSchemeService).colorScheme;
+  private stackEntry: INavigationBarStackEntry | null = null;
+  private isInitialized = false;
+
+  constructor() {
+    effect(() => {
+      this.colorScheme();
+      if (this.stackEntry) {
+        this.stackEntry = replaceStackEntry(this.stackEntry, {
+          style: this.style,
+          hidden: this.hidden,
+        });
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.stackEntry = pushStackEntry({
+      style: this.style,
+      hidden: this.hidden,
+    });
+    this.isInitialized = true;
+  }
+
+  ngOnChanges(): void {
+    if (!this.isInitialized || !this.stackEntry) return;
+    this.stackEntry = replaceStackEntry(this.stackEntry, {
+      style: this.style,
+      hidden: this.hidden,
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.stackEntry) popStackEntry(this.stackEntry);
+  }
+}

package/src/core/entries-stack.ts

@@ -0,0 +1,76 @@
+// 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';
+import type { INavigationBarProps } from './types';
+
+export type INavigationBarStackEntry = INavigationBarProps;
+
+const entriesStack: INavigationBarStackEntry[] = [];
+let updateImmediate: ReturnType<typeof setImmediate> | null = null;
+
+function mergeEntriesStack(
+  stack: readonly INavigationBarStackEntry[],
+): INavigationBarProps {
+  return stack.reduce<INavigationBarProps>(
+    (prev, cur) => ({
+      style: cur.style ?? prev.style,
+      hidden: cur.hidden ?? prev.hidden,
+    }),
+    {},
+  );
+}
+
+function createStackEntry(
+  props: INavigationBarProps,
+): INavigationBarStackEntry {
+  return { style: props.style, hidden: props.hidden };
+}
+
+function updateEntriesStack(): void {
+  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: INavigationBarProps,
+): INavigationBarStackEntry {
+  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: INavigationBarStackEntry): void {
+  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: INavigationBarStackEntry,
+  props: INavigationBarProps,
+): INavigationBarStackEntry {
+  const newEntry = createStackEntry(props);
+  const index = entriesStack.indexOf(entry);
+  if (index !== -1) entriesStack[index] = newEntry;
+  updateEntriesStack();
+  return newEntry;
+}

package/src/core/index.ts

@@ -0,0 +1,19 @@
+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/src/core/native-module/index.android.ts

@@ -0,0 +1,5 @@
+import { requireNativeModule } from 'expo-modules-core';
+import type { INativeNavigationBarModule } from './shared';
+
+export const expoNavigationBar =
+  requireNativeModule<INativeNavigationBarModule>('ExpoNavigationBar');

package/src/core/native-module/index.ts

@@ -0,0 +1,5 @@
+import type { INativeNavigationBarModule } from './shared';
+
+// 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: Partial<INativeNavigationBarModule> = {};

package/src/core/native-module/shared.ts

@@ -0,0 +1,15 @@
+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/src/core/navigation-bar.ts

@@ -0,0 +1,90 @@
+import { UnavailabilityError, type EventSubscription } from 'expo-modules-core';
+import { Appearance } from '@symbiote-native/engine';
+import { expoNavigationBar } from './native-module';
+import type {
+  INavigationBarStyle,
+  INavigationBarVisibility,
+  INavigationBarVisibilityEvent,
+} from './types';
+
+type IResolvedNavigationBarStyle = 'light' | 'dark';
+
+function isLightColorScheme(): boolean {
+  return (Appearance.getColorScheme() ?? 'light') === 'light';
+}
+
+function resolveStyle(style: INavigationBarStyle): IResolvedNavigationBarStyle {
+  switch (style) {
+    case 'auto':
+      return isLightColorScheme() ? 'dark' : 'light';
+    case 'inverted':
+      return isLightColorScheme() ? 'light' : 'dark';
+    default:
+      return style;
+  }
+}
+
+let currentStyle: IResolvedNavigationBarStyle | undefined;
+let currentHidden: boolean | undefined;
+
+// 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: INavigationBarStyle;
+  hidden: boolean;
+} = {
+  style: 'light',
+  hidden: false,
+};
+
+/** Sets the navigation bar buttons' style */
+export function setStyle(style: INavigationBarStyle): void {
+  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: boolean): void {
+  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: (event: INavigationBarVisibilityEvent) => void,
+): EventSubscription {
+  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: INavigationBarVisibility,
+): Promise<void> {
+  if (!expoNavigationBar.setHidden) {
+    throw new UnavailabilityError('NavigationBar', 'setVisibilityAsync');
+  }
+  await expoNavigationBar.setHidden(visibility === 'hidden');
+}
+
+/** Gets the navigation bar's current visibility */
+export async function getVisibilityAsync(): Promise<INavigationBarVisibility> {
+  if (!expoNavigationBar.getVisibilityAsync) {
+    throw new UnavailabilityError('NavigationBar', 'getVisibilityAsync');
+  }
+  return expoNavigationBar.getVisibilityAsync();
+}

package/src/core/types.ts

@@ -0,0 +1,19 @@
+// Ported from expo-navigation-bar's NavigationBar.types.ts (sdk-57)
+
+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/src/react/index.ts

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

package/src/react/navigation-bar.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useColorScheme } from '@symbiote-native/react';
+import {
+  popStackEntry,
+  pushStackEntry,
+  replaceStackEntry,
+  type INavigationBarProps,
+  type INavigationBarStackEntry,
+} from '../core';
+
+/** Declaratively configures the navigation bar - several mounted instances merge, last wins */
+export function NavigationBar({ style, hidden }: INavigationBarProps): null {
+  const colorScheme = useColorScheme();
+  const stableProps = useMemo<INavigationBarProps>(
+    () => ({ style, hidden }),
+    [style, hidden],
+  );
+  const stackEntryRef = useRef<INavigationBarStackEntry | null>(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/src/react/use-visibility.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { addVisibilityListener, getVisibilityAsync } from '../core';
+import type { INavigationBarVisibility } from '../core';
+
+/** Statefully tracks the system navigation bar's visibility, `null` during async initialization */
+export function useVisibility(): INavigationBarVisibility | null {
+  const [visibility, setVisibility] = useState<INavigationBarVisibility | null>(
+    null,
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+
+    getVisibilityAsync().then(value => {
+      if (isMounted) setVisibility(value);
+    });
+
+    const subscription = addVisibilityListener(({ visibility: next }) => {
+      if (isMounted) setVisibility(next);
+    });
+
+    return () => {
+      subscription.remove();
+      isMounted = false;
+    };
+  }, []);
+
+  return visibility;
+}

package/src/solid/create-visibility.ts

@@ -0,0 +1,32 @@
+// Solid twin of `../react`/`../vue`'s visibility hook, returning an accessor instead of a
+// snapshot/ref (`components_split_logic_view_lifecycle`)
+
+import { createSignal, onCleanup, onMount, type Accessor } from 'solid-js';
+import type { EventSubscription } from 'expo-modules-core';
+import { addVisibilityListener, getVisibilityAsync } from '../core';
+import type { INavigationBarVisibility } from '../core';
+
+/** Statefully tracks the system navigation bar's visibility, `null` during async initialization */
+export function createVisibility(): Accessor<INavigationBarVisibility | null> {
+  const [visibility, setVisibility] =
+    createSignal<INavigationBarVisibility | null>(null);
+  let subscription: EventSubscription | undefined;
+  let isMounted = false;
+
+  onMount(() => {
+    isMounted = true;
+    getVisibilityAsync().then(value => {
+      if (isMounted) setVisibility(value);
+    });
+    subscription = addVisibilityListener(({ visibility: next }) => {
+      if (isMounted) setVisibility(next);
+    });
+  });
+
+  onCleanup(() => {
+    subscription?.remove();
+    isMounted = false;
+  });
+
+  return visibility;
+}

package/src/solid/index.ts

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

package/src/solid/navigation-bar.ts

@@ -0,0 +1,35 @@
+// Solid twin of `../react`/`../vue`'s `NavigationBar`, same shared stack core - only the
+// lifecycle wiring differs per adapter (`components_split_logic_view_lifecycle`)
+
+import { createEffect, onCleanup, onMount } from 'solid-js';
+import { createColorScheme } from '@symbiote-native/solid';
+import {
+  popStackEntry,
+  pushStackEntry,
+  replaceStackEntry,
+  type INavigationBarProps,
+  type INavigationBarStackEntry,
+} from '../core';
+
+export function NavigationBar(props: INavigationBarProps): null {
+  const colorScheme = createColorScheme();
+  let stackEntry: INavigationBarStackEntry | null = null;
+
+  onMount(() => {
+    stackEntry = pushStackEntry({ style: props.style, hidden: props.hidden });
+  });
+
+  onCleanup(() => {
+    if (stackEntry) popStackEntry(stackEntry);
+  });
+
+  createEffect(() => {
+    const style = props.style;
+    const hidden = props.hidden;
+    colorScheme();
+    if (stackEntry)
+      stackEntry = replaceStackEntry(stackEntry, { style, hidden });
+  });
+
+  return null;
+}