@symbiote-native/navigation-bar 0.1.0

package/src/svelte/NavigationBar.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { useColorScheme } from '@symbiote-native/svelte';
+  import {
+    popStackEntry,
+    pushStackEntry,
+    replaceStackEntry,
+    type INavigationBarProps,
+    type INavigationBarStackEntry,
+  } from '../core';
+
+  let { style, hidden }: INavigationBarProps = $props();
+  const colorScheme = useColorScheme();
+  let stackEntry: INavigationBarStackEntry | null = null;
+
+  $effect(() => {
+    const entry = pushStackEntry(untrack(() => ({ style, hidden })));
+    stackEntry = entry;
+    return () => popStackEntry(entry);
+  });
+
+  $effect(() => {
+    void style;
+    void hidden;
+    void colorScheme.current;
+    if (stackEntry) stackEntry = replaceStackEntry(stackEntry, { style, hidden });
+  });
+</script>

package/src/svelte/index.ts

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

package/src/svelte/svelte-ambient.d.ts

@@ -0,0 +1,3 @@
+// Pulls svelte's ambient globals ($state/$effect/...) into this package's tsc program,
+// same fix as `packages/navigation/src/svelte/svelte-ambient.d.ts`
+/// <reference types="svelte" />

package/src/svelte/svelte-compile.test-helper.ts

@@ -0,0 +1,7 @@
+// Re-exports the existing harness instead of a third copy (packages/sqlite and
+// packages/navigation already carry one, not part of either package's public exports)
+export {
+  createSvelteHarness,
+  loadComponent,
+  type ISvelteHarness,
+} from '../../../sqlite/src/svelte/svelte-compile.test-helper';

package/src/svelte/use-visibility.svelte.ts

@@ -0,0 +1,37 @@
+// Svelte twin of `../react`/`../vue`'s visibility hook, boxed getter shape matching
+// `use-color-scheme.svelte.ts` (`components_split_logic_view_lifecycle`)
+
+import type { EventSubscription } from 'expo-modules-core';
+import { addVisibilityListener, getVisibilityAsync } from '../core';
+import type { INavigationBarVisibility } from '../core';
+
+export function useVisibility(): {
+  readonly current: INavigationBarVisibility | null;
+} {
+  let visibility = $state<INavigationBarVisibility | null>(null);
+
+  $effect(() => {
+    let isMounted = true;
+
+    getVisibilityAsync().then(value => {
+      if (isMounted) visibility = value;
+    });
+
+    const subscription: EventSubscription = addVisibilityListener(
+      ({ visibility: next }) => {
+        if (isMounted) visibility = next;
+      },
+    );
+
+    return () => {
+      subscription.remove();
+      isMounted = false;
+    };
+  });
+
+  return {
+    get current(): INavigationBarVisibility | null {
+      return visibility;
+    },
+  };
+}

package/src/vue/index.ts

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

package/src/vue/navigation-bar.ts

@@ -0,0 +1,42 @@
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  watch,
+  type VNode,
+} from '@vue/runtime-core';
+import { useColorScheme } from '@symbiote-native/vue';
+import {
+  popStackEntry,
+  pushStackEntry,
+  replaceStackEntry,
+  type INavigationBarProps,
+  type INavigationBarStackEntry,
+} from '../core';
+
+export const NavigationBar = defineComponent<INavigationBarProps>(
+  props => {
+    const colorScheme = useColorScheme();
+    let stackEntry: INavigationBarStackEntry | null = null;
+
+    onMounted(() => {
+      stackEntry = pushStackEntry({ style: props.style, hidden: props.hidden });
+    });
+
+    onUnmounted(() => {
+      if (stackEntry) popStackEntry(stackEntry);
+    });
+
+    watch([colorScheme, () => props.style, () => props.hidden], () => {
+      if (stackEntry) {
+        stackEntry = replaceStackEntry(stackEntry, {
+          style: props.style,
+          hidden: props.hidden,
+        });
+      }
+    });
+
+    return (): VNode | null => null;
+  },
+  { name: 'NavigationBar', props: ['style', 'hidden'] },
+);

package/src/vue/use-visibility.ts

@@ -0,0 +1,28 @@
+import { onMounted, onUnmounted, ref, type Ref } from '@vue/runtime-core';
+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 useVisibility(): Ref<INavigationBarVisibility | null> {
+  const visibility = ref<INavigationBarVisibility | null>(null);
+  let subscription: EventSubscription | undefined;
+  let isMounted = false;
+
+  onMounted(() => {
+    isMounted = true;
+    getVisibilityAsync().then(value => {
+      if (isMounted) visibility.value = value;
+    });
+    subscription = addVisibilityListener(({ visibility: next }) => {
+      if (isMounted) visibility.value = next;
+    });
+  });
+
+  onUnmounted(() => {
+    subscription?.remove();
+    isMounted = false;
+  });
+
+  return visibility;
+}