react-native-prod-debugger 1.0.0

package/src/plugins/featureFlags/FeatureFlagsPlugin.tsx

@@ -0,0 +1,338 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  Switch,
+  TextInput,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import type { PluginComponentProps, FeatureFlag, DebuggerPlugin } from '../../core/types';
+import { flagStore } from './flagStore';
+
+const FeatureFlagsPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [flags, setFlags] = useState<FeatureFlag[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [groupFilter, setGroupFilter] = useState<string | null>(null);
+  const [editingFlag, setEditingFlag] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+
+  useEffect(() => {
+    const unsubscribe = flagStore.subscribe(setFlags);
+    return unsubscribe;
+  }, []);
+
+  const groups = useMemo(() => {
+    const groupSet = new Set<string>();
+    for (const flag of flags) {
+      if (flag.group) groupSet.add(flag.group);
+    }
+    return Array.from(groupSet).sort();
+  }, [flags]);
+
+  const filteredFlags = useMemo(() => {
+    let filtered = flags;
+    if (groupFilter) {
+      filtered = filtered.filter((f) => f.group === groupFilter);
+    }
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (f) =>
+          f.key.toLowerCase().includes(q) ||
+          f.label?.toLowerCase().includes(q) ||
+          f.description?.toLowerCase().includes(q),
+      );
+    }
+    return filtered;
+  }, [flags, searchQuery, groupFilter]);
+
+  const handleToggle = useCallback((key: string, currentValue: boolean) => {
+    flagStore.override(key, !currentValue);
+  }, []);
+
+  const handleSaveEdit = useCallback(
+    (flag: FeatureFlag) => {
+      let parsed: FeatureFlag['currentValue'] = editValue;
+      if (flag.type === 'number') {
+        parsed = Number(editValue);
+        if (isNaN(parsed as number)) return;
+      } else if (flag.type === 'json') {
+        try {
+          parsed = JSON.parse(editValue);
+        } catch {
+          return;
+        }
+      }
+      flagStore.override(flag.key, parsed);
+      setEditingFlag(null);
+    },
+    [editValue],
+  );
+
+  const handleResetAll = useCallback(() => {
+    flagStore.resetAll();
+  }, []);
+
+  const isOverridden = useCallback((flag: FeatureFlag) => {
+    return JSON.stringify(flag.currentValue) !== JSON.stringify(flag.defaultValue);
+  }, []);
+
+  if (flags.length === 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyIcon}>🚩</Text>
+        <Text style={[styles.emptyTitle, { color: theme.text }]}>No Feature Flags</Text>
+        <Text style={[styles.emptyDesc, { color: theme.textMuted }]}>
+          Register flags using:{'\n\n'}
+          <Text style={{ fontFamily: 'monospace', color: theme.codeText }}>
+            {'registerFlag({\n  key: "dark_mode",\n  type: "boolean",\n  defaultValue: false\n})'}
+          </Text>
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View
+        style={[
+          styles.headerBar,
+          { backgroundColor: theme.surface, borderBottomColor: theme.border },
+        ]}
+      >
+        <Text style={[styles.headerText, { color: theme.text }]}>{flags.length} flags</Text>
+        <TouchableOpacity onPress={handleResetAll} activeOpacity={0.7}>
+          <Text style={[styles.resetText, { color: theme.warning }]}>Reset All</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Groups */}
+      {groups.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={[styles.groupBar, { backgroundColor: theme.surface }]}
+          contentContainerStyle={styles.groupBarContent}
+        >
+          <TouchableOpacity
+            style={[
+              styles.groupChip,
+              {
+                backgroundColor: !groupFilter ? theme.accent : theme.surfaceAlt,
+                borderColor: theme.border,
+              },
+            ]}
+            onPress={() => setGroupFilter(null)}
+            activeOpacity={0.7}
+          >
+            <Text
+              style={[styles.groupChipText, { color: !groupFilter ? '#FFF' : theme.textSecondary }]}
+            >
+              All
+            </Text>
+          </TouchableOpacity>
+          {groups.map((group) => (
+            <TouchableOpacity
+              key={group}
+              style={[
+                styles.groupChip,
+                {
+                  backgroundColor: groupFilter === group ? theme.accent : theme.surfaceAlt,
+                  borderColor: theme.border,
+                },
+              ]}
+              onPress={() => setGroupFilter(groupFilter === group ? null : group)}
+              activeOpacity={0.7}
+            >
+              <Text
+                style={[
+                  styles.groupChipText,
+                  { color: groupFilter === group ? '#FFF' : theme.textSecondary },
+                ]}
+              >
+                {group}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
+
+      {/* Search */}
+      <View style={[styles.searchContainer, { backgroundColor: theme.surface }]}>
+        <TextInput
+          style={[
+            styles.searchInput,
+            { color: theme.text, backgroundColor: theme.surfaceAlt, borderColor: theme.border },
+          ]}
+          placeholder="Search flags..."
+          placeholderTextColor={theme.textMuted}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          autoCapitalize="none"
+        />
+      </View>
+
+      {/* Flags List */}
+      <FlatList
+        data={filteredFlags}
+        keyExtractor={(item) => item.key}
+        renderItem={({ item }) => (
+          <View
+            style={[
+              styles.flagRow,
+              {
+                backgroundColor: isOverridden(item) ? `${theme.warning}10` : theme.surface,
+                borderBottomColor: theme.border,
+              },
+            ]}
+          >
+            <View style={styles.flagInfo}>
+              <View style={styles.flagNameRow}>
+                <Text style={[styles.flagKey, { color: theme.text }]}>
+                  {item.label || item.key}
+                </Text>
+                {isOverridden(item) && (
+                  <TouchableOpacity onPress={() => flagStore.reset(item.key)} activeOpacity={0.7}>
+                    <Text style={[styles.resetFlag, { color: theme.warning }]}>Reset</Text>
+                  </TouchableOpacity>
+                )}
+              </View>
+              {item.description && (
+                <Text style={[styles.flagDesc, { color: theme.textMuted }]}>
+                  {item.description}
+                </Text>
+              )}
+              <Text style={[styles.flagMeta, { color: theme.textMuted }]}>
+                {item.key} • {item.type}
+                {item.group ? ` • ${item.group}` : ''}
+              </Text>
+            </View>
+            <View style={styles.flagControl}>
+              {item.type === 'boolean' ? (
+                <Switch
+                  value={item.currentValue as boolean}
+                  onValueChange={() => handleToggle(item.key, item.currentValue as boolean)}
+                  trackColor={{ false: theme.border, true: theme.accent }}
+                  thumbColor="#FFFFFF"
+                />
+              ) : editingFlag === item.key ? (
+                <View style={styles.editContainer}>
+                  <TextInput
+                    style={[
+                      styles.editInput,
+                      {
+                        color: theme.text,
+                        borderColor: theme.accent,
+                        backgroundColor: theme.surfaceAlt,
+                      },
+                    ]}
+                    value={editValue}
+                    onChangeText={setEditValue}
+                    autoFocus
+                    autoCapitalize="none"
+                  />
+                  <View style={styles.editButtons}>
+                    <TouchableOpacity onPress={() => handleSaveEdit(item)} activeOpacity={0.7}>
+                      <Text style={[styles.editSave, { color: theme.success }]}>Save</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => setEditingFlag(null)} activeOpacity={0.7}>
+                      <Text style={[styles.editCancel, { color: theme.textMuted }]}>Cancel</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              ) : (
+                <TouchableOpacity
+                  onPress={() => {
+                    setEditingFlag(item.key);
+                    setEditValue(
+                      typeof item.currentValue === 'object'
+                        ? JSON.stringify(item.currentValue, null, 2)
+                        : String(item.currentValue),
+                    );
+                  }}
+                  style={[styles.valueButton, { backgroundColor: theme.surfaceAlt }]}
+                  activeOpacity={0.7}
+                >
+                  <Text style={[styles.valueText, { color: theme.text }]} numberOfLines={1}>
+                    {typeof item.currentValue === 'object'
+                      ? JSON.stringify(item.currentValue)
+                      : String(item.currentValue)}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  emptyIcon: { fontSize: 48, marginBottom: 16 },
+  emptyTitle: { fontSize: 16, fontWeight: '700', marginBottom: 8 },
+  emptyDesc: { fontSize: 13, textAlign: 'center', lineHeight: 20 },
+  headerBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerText: { fontSize: 13, fontWeight: '600' },
+  resetText: { fontSize: 12, fontWeight: '700' },
+  groupBar: { maxHeight: 44 },
+  groupBarContent: { paddingHorizontal: 12, paddingVertical: 8, gap: 6 },
+  groupChip: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, borderWidth: 1 },
+  groupChipText: { fontSize: 11, fontWeight: '600' },
+  searchContainer: { paddingHorizontal: 12, paddingBottom: 8 },
+  searchInput: { height: 36, borderRadius: 8, paddingHorizontal: 12, fontSize: 13, borderWidth: 1 },
+  flagRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  flagInfo: { marginBottom: 8 },
+  flagNameRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  flagKey: { fontSize: 14, fontWeight: '600' },
+  resetFlag: { fontSize: 11, fontWeight: '600' },
+  flagDesc: { fontSize: 12, marginTop: 2 },
+  flagMeta: { fontSize: 10, marginTop: 2, fontFamily: 'monospace' },
+  flagControl: { alignItems: 'flex-end' },
+  editContainer: { width: '100%' },
+  editInput: {
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 13,
+    borderWidth: 1,
+    marginBottom: 8,
+  },
+  editButtons: { flexDirection: 'row', gap: 12, justifyContent: 'flex-end' },
+  editSave: { fontSize: 13, fontWeight: '700' },
+  editCancel: { fontSize: 13 },
+  valueButton: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 8, maxWidth: 200 },
+  valueText: { fontSize: 12, fontFamily: 'monospace' },
+});
+
+export function createFeatureFlagsPlugin(): DebuggerPlugin {
+  return {
+    id: 'feature-flags',
+    name: 'Flags',
+    icon: '🚩',
+    component: FeatureFlagsPanel,
+    order: 40,
+  };
+}

package/src/plugins/featureFlags/flagStore.ts

@@ -0,0 +1,118 @@
+import type { FeatureFlag } from '../../core/types';
+
+type FlagListener = (flags: FeatureFlag[]) => void;
+
+/**
+ * Feature Flag Store — In-memory registry for feature flags.
+ *
+ * Flags can be registered by the consumer app and toggled at runtime
+ * via the debugger overlay. Overrides persist in-memory (optionally in AsyncStorage).
+ */
+class FlagStoreClass {
+  private flags: Map<string, FeatureFlag> = new Map();
+  private listeners: Set<FlagListener> = new Set();
+  private changeCallbacks: Map<string, (value: FeatureFlag['currentValue']) => void> = new Map();
+
+  /** Register a feature flag. */
+  register(
+    flag: Omit<FeatureFlag, 'currentValue'> & { currentValue?: FeatureFlag['currentValue'] },
+  ): void {
+    const existing = this.flags.get(flag.key);
+    this.flags.set(flag.key, {
+      ...flag,
+      currentValue: existing?.currentValue ?? flag.currentValue ?? flag.defaultValue,
+    });
+    this.notify();
+  }
+
+  /** Get a flag value. Returns the overridden value if set, otherwise the default. */
+  get(key: string): FeatureFlag['currentValue'] | undefined {
+    return this.flags.get(key)?.currentValue;
+  }
+
+  /** Get a flag definition. */
+  getFlag(key: string): FeatureFlag | undefined {
+    return this.flags.get(key);
+  }
+
+  /** Get all flags. */
+  getAll(): FeatureFlag[] {
+    return Array.from(this.flags.values());
+  }
+
+  /** Override a flag value. */
+  override(key: string, value: FeatureFlag['currentValue']): void {
+    const flag = this.flags.get(key);
+    if (!flag) return;
+    this.flags.set(key, { ...flag, currentValue: value });
+    // Fire change callback
+    const cb = this.changeCallbacks.get(key);
+    if (cb) cb(value);
+    this.notify();
+  }
+
+  /** Reset a single flag to its default value. */
+  reset(key: string): void {
+    const flag = this.flags.get(key);
+    if (!flag) return;
+    this.flags.set(key, { ...flag, currentValue: flag.defaultValue });
+    const cb = this.changeCallbacks.get(key);
+    if (cb) cb(flag.defaultValue);
+    this.notify();
+  }
+
+  /** Reset all flags to defaults. */
+  resetAll(): void {
+    for (const [key, flag] of this.flags) {
+      this.flags.set(key, { ...flag, currentValue: flag.defaultValue });
+      const cb = this.changeCallbacks.get(key);
+      if (cb) cb(flag.defaultValue);
+    }
+    this.notify();
+  }
+
+  /** Register a callback when a specific flag changes. */
+  onChange(key: string, callback: (value: FeatureFlag['currentValue']) => void): () => void {
+    this.changeCallbacks.set(key, callback);
+    return () => this.changeCallbacks.delete(key);
+  }
+
+  /** Subscribe to all flag changes. */
+  subscribe(listener: FlagListener): () => void {
+    this.listeners.add(listener);
+    listener(this.getAll());
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    const snapshot = this.getAll();
+    for (const listener of this.listeners) {
+      try {
+        listener(snapshot);
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+}
+
+const flagStore = new FlagStoreClass();
+
+/** Register a feature flag. */
+export function registerFlag(
+  flag: Omit<FeatureFlag, 'currentValue'> & { currentValue?: FeatureFlag['currentValue'] },
+): void {
+  flagStore.register(flag);
+}
+
+/** Reset all flag overrides. */
+export function resetFlags(): void {
+  flagStore.resetAll();
+}
+
+/** Get a flag's current value. */
+export function getFlag(key: string): FeatureFlag['currentValue'] | undefined {
+  return flagStore.get(key);
+}
+
+export { flagStore };

package/src/plugins/navigationInspector/NavigationInspectorPlugin.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
+import type { PluginComponentProps, DebuggerPlugin } from '../../core/types';
+import { navigationStore } from './navigationStore';
+import { safeStringify, copyToClipboard, formatTimestamp } from '../../core/utils';
+
+const NavigationInspectorPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [state, setState] = useState<Record<string, unknown> | null>(null);
+  const [currentRoute, setCurrentRoute] = useState<{
+    name: string;
+    params?: Record<string, unknown>;
+  } | null>(null);
+  const [history, setHistory] = useState<
+    { name: string; params?: Record<string, unknown>; timestamp: number }[]
+  >([]);
+  const [, forceUpdate] = useState(0);
+
+  const refresh = useCallback(() => {
+    setState(navigationStore.getState() as Record<string, unknown> | null);
+    setCurrentRoute(navigationStore.getCurrentRoute());
+    setHistory(navigationStore.getHistory());
+    forceUpdate((n) => n + 1);
+  }, []);
+
+  useEffect(() => {
+    const unsub = navigationStore.subscribe(refresh);
+    refresh();
+    const interval = setInterval(refresh, 2000);
+    return () => {
+      unsub();
+      clearInterval(interval);
+    };
+  }, [refresh]);
+
+  const hasRef = !!navigationStore.getRef();
+
+  if (!hasRef) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyIcon}>🧭</Text>
+        <Text style={[styles.emptyTitle, { color: theme.text }]}>No Navigation Ref</Text>
+        <Text style={[styles.emptyDesc, { color: theme.textMuted }]}>
+          Pass your navigation ref:{'\n\n'}
+          <Text style={{ fontFamily: 'monospace', color: theme.codeText }}>
+            {'setNavigationRef(navigationRef)'}
+          </Text>
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Current Route */}
+      {currentRoute && (
+        <View style={[styles.section, { backgroundColor: theme.surface }]}>
+          <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>CURRENT ROUTE</Text>
+          <View style={[styles.routeCard, { backgroundColor: theme.accent }]}>
+            <Text style={styles.routeName}>{currentRoute.name}</Text>
+          </View>
+          {currentRoute.params && Object.keys(currentRoute.params).length > 0 && (
+            <TouchableOpacity
+              style={[styles.paramsBlock, { backgroundColor: theme.codeBackground }]}
+              onLongPress={() => copyToClipboard(safeStringify(currentRoute.params))}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.paramsTitle, { color: theme.textSecondary }]}>Params</Text>
+              <Text style={[styles.paramsText, { color: theme.codeText }]} selectable>
+                {safeStringify(currentRoute.params)}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {/* Navigation State */}
+      {state && (
+        <View style={[styles.section, { backgroundColor: theme.surface }]}>
+          <View style={styles.sectionHeader}>
+            <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>STATE TREE</Text>
+            <TouchableOpacity
+              onPress={() => copyToClipboard(safeStringify(state))}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.copyBtn, { color: theme.accent }]}>Copy</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={[styles.codeBlock, { backgroundColor: theme.codeBackground }]}>
+            <Text style={[styles.codeText, { color: theme.codeText }]} selectable>
+              {String(safeStringify(state))}
+            </Text>
+          </View>
+        </View>
+      )}
+
+      {/* History */}
+      {history.length > 0 && (
+        <View style={[styles.section, { backgroundColor: theme.surface }]}>
+          <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>ROUTE HISTORY</Text>
+          {history.map((entry, i) => (
+            <View key={i} style={[styles.historyRow, { borderBottomColor: theme.border }]}>
+              <View style={styles.historyInfo}>
+                <Text style={[styles.historyRoute, { color: theme.text }]}>{entry.name}</Text>
+                <Text style={[styles.historyTime, { color: theme.textMuted }]}>
+                  {formatTimestamp(entry.timestamp)}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      )}
+
+      <View style={{ height: 40 }} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  emptyIcon: { fontSize: 48, marginBottom: 16 },
+  emptyTitle: { fontSize: 16, fontWeight: '700', marginBottom: 8 },
+  emptyDesc: { fontSize: 13, textAlign: 'center', lineHeight: 20 },
+  section: { margin: 12, borderRadius: 12, padding: 12 },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 8,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  copyBtn: { fontSize: 12, fontWeight: '600' },
+  routeCard: { padding: 12, borderRadius: 8, alignItems: 'center' },
+  routeName: { fontSize: 18, fontWeight: '800', color: '#FFF' },
+  paramsBlock: { padding: 12, borderRadius: 8, marginTop: 8 },
+  paramsTitle: { fontSize: 10, fontWeight: '700', marginBottom: 4, textTransform: 'uppercase' },
+  paramsText: { fontSize: 11, fontFamily: 'monospace', lineHeight: 16 },
+  codeBlock: { padding: 12, borderRadius: 8 },
+  codeText: { fontSize: 11, fontFamily: 'monospace', lineHeight: 16 },
+  historyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  historyInfo: { flex: 1, flexDirection: 'row', justifyContent: 'space-between' },
+  historyRoute: { fontSize: 13, fontWeight: '600' },
+  historyTime: { fontSize: 10 },
+});
+
+export function createNavigationInspectorPlugin(): DebuggerPlugin {
+  return {
+    id: 'navigation-inspector',
+    name: 'Nav',
+    icon: '🧭',
+    component: NavigationInspectorPanel,
+    order: 90,
+  };
+}

package/src/plugins/navigationInspector/navigationStore.ts

@@ -0,0 +1,70 @@
+type Listener = () => void;
+
+class NavigationStoreClass {
+  private ref: { current: unknown } | null = null;
+  private history: { name: string; params?: Record<string, unknown>; timestamp: number }[] = [];
+  private listeners: Set<Listener> = new Set();
+  private maxHistory = 50;
+
+  setRef(ref: { current: unknown }): void {
+    this.ref = ref;
+    this.notify();
+  }
+
+  getRef(): unknown {
+    return this.ref?.current;
+  }
+
+  addHistoryEntry(name: string, params?: Record<string, unknown>): void {
+    this.history = [{ name, params, timestamp: Date.now() }, ...this.history].slice(
+      0,
+      this.maxHistory,
+    );
+    this.notify();
+  }
+
+  getHistory() {
+    return [...this.history];
+  }
+
+  getState(): unknown {
+    try {
+      const nav = this.ref?.current as { getRootState?: () => unknown } | undefined;
+      return nav?.getRootState?.() ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  getCurrentRoute(): { name: string; params?: Record<string, unknown> } | null {
+    try {
+      const nav = this.ref?.current as
+        | { getCurrentRoute?: () => { name: string; params?: Record<string, unknown> } }
+        | undefined;
+      return nav?.getCurrentRoute?.() ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    for (const l of this.listeners) {
+      try {
+        l();
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+}
+
+export const navigationStore = new NavigationStoreClass();
+
+export function setNavigationRef(ref: { current: unknown }): void {
+  navigationStore.setRef(ref);
+}