react-native-anchored-menu 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-anchored-menu",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Headless anchored context menu / popover for React Native (iOS/Android) with stable measurement (default view host).",
   "repository": {
     "type": "git",

package/src/components/MenuAnchor.tsx

@@ -31,7 +31,12 @@ function extractMarginsFromChild(children: React.ReactNode): AnchorMargins {
 
 export function MenuAnchor({ id, children }: MenuAnchorProps) {
   const actions = useContext(AnchoredMenuActionsContext);
-  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions) {
+    throw new Error(
+      "[react-native-anchored-menu] MenuAnchor must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   const ref = useRef<View>(null) as AnchorRefObject;
 

package/src/core/provider.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { Platform } from "react-native";
+import { AppState, Platform } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -25,6 +25,7 @@ import type {
  * Provider config
  * - defaultHost: which host to use when `open()` doesn't specify one (default: "view")
  * - autoHost: automatically mounts the host implementation (default: true)
+ * - autoCloseOnBackground: automatically close menus when app goes to background (default: true)
  */
 export function AnchoredMenuProvider({
   children,
@@ -32,6 +33,7 @@ export function AnchoredMenuProvider({
   host,
   defaultHost = (host ?? "view") as HostType,
   autoHost = true,
+  autoCloseOnBackground = true,
 }: AnchoredMenuProviderProps) {
   const anchorsRef = useRef(new Map<string, any>()); // id -> ref
   const pendingOpenRafRef = useRef<number | null>(null);
@@ -110,9 +112,33 @@ export function AnchoredMenuProvider({
   // Register this provider globally so parents can route `open({ id })` to the correct layer.
   useEffect(() => {
     const entry = { anchors: anchorsRef.current, setRequest };
-    return registerProvider(entry);
+    const unregister = registerProvider(entry);
+    return () => {
+      // Close menu if open when provider unmounts
+      if (storeRef.current?.getSnapshot().isOpen) {
+        setRequest(null);
+      }
+      unregister();
+    };
   }, [setRequest]);
 
+  // Auto-close menu when app goes to background to avoid weird states
+  useEffect(() => {
+    if (!autoCloseOnBackground) return;
+
+    const subscription = AppState.addEventListener("change", (nextAppState: string) => {
+      if (nextAppState === "background" || nextAppState === "inactive") {
+        if (storeRef.current?.getSnapshot().isOpen) {
+          setRequest(null);
+        }
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [setRequest, autoCloseOnBackground]);
+
   const open = useCallback((payload: OpenMenuOptions) => {
     // Defer by default to avoid "open tap" being interpreted as an outside press
     // when a host mounts a Pressable backdrop during the active gesture.
@@ -138,8 +164,18 @@ export function AnchoredMenuProvider({
           );
         }
         const target = findProviderForAnchorId(anchorId);
-        if (target && target.setRequest)
+        if (target && target.setRequest) {
           return target.setRequest(payload as MenuRequest);
+        }
+        // Anchor not found in any provider
+        if (__DEV__) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[react-native-anchored-menu] Anchor with id="${anchorId}" not found in any provider. ` +
+              "Make sure the MenuAnchor is mounted and the id matches."
+          );
+        }
+        return; // Don't open menu if anchor doesn't exist
       }
 
       setRequest(payload as MenuRequest);
@@ -191,4 +227,3 @@ export function AnchoredMenuProvider({
     </AnchoredMenuActionsContext.Provider>
   );
 }
-

package/src/hooks/useAnchoredMenu.ts

@@ -3,19 +3,27 @@ import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
 } from "../core/context";
+import { useAnchoredMenuState } from "./useAnchoredMenuState";
 
 export function useAnchoredMenu() {
   const actions = useContext(AnchoredMenuActionsContext);
   const state = useContext(AnchoredMenuStateContext);
-  if (!actions || !state) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !state) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenu must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
+
+  // Use useAnchoredMenuState to properly subscribe to isOpen changes
+  const isOpen = useAnchoredMenuState((s) => s.isOpen);
 
   return useMemo(
     () => ({
       open: actions.open,
       close: actions.close,
-      isOpen: state.getSnapshot().isOpen,
+      isOpen,
     }),
-    [actions.open, actions.close, state]
+    [actions.open, actions.close, isOpen]
   );
 }
-

package/src/hooks/useAnchoredMenuActions.ts

@@ -11,7 +11,12 @@ export function useAnchoredMenuActions(): {
   close: () => void;
 } {
   const actions = useContext(AnchoredMenuActionsContext);
-  if (!actions) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenuActions must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   return useMemo(
     () => ({

package/src/hooks/useAnchoredMenuState.ts

@@ -37,7 +37,12 @@ export function useAnchoredMenuState<T = MenuState>(
   selector: (state: MenuState) => T = ((s: MenuState) => s) as (state: MenuState) => T
 ): T {
   const store = useContext(AnchoredMenuStateContext);
-  if (!store) throw new Error("AnchoredMenuProvider is missing");
+  if (!store) {
+    throw new Error(
+      "[react-native-anchored-menu] useAnchoredMenuState must be used within an AnchoredMenuProvider. " +
+        "Make sure to wrap your component tree with <AnchoredMenuProvider> or <AnchoredMenuLayer>."
+    );
+  }
 
   const getSelectedSnapshot = () => selector(store.getSnapshot());
   return useSyncExternalStore(

package/src/hosts/ModalHost.tsx

@@ -11,6 +11,7 @@ import {
   measureInWindowStable,
 } from "../utils/measure";
 import { computeMenuPosition } from "../utils/position";
+import { isValidMeasurement, isValidMenuSize } from "../utils/validation";
 import { isFabricEnabled } from "../utils/runtime";
 import type {
   AnchorMeasurement,
@@ -27,7 +28,12 @@ interface MeasureCache {
 export function ModalHost() {
   const actions = useContext(AnchoredMenuActionsContext);
   const store = useContext(AnchoredMenuStateContext);
-  if (!actions || !store) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !store) {
+    throw new Error(
+      "[react-native-anchored-menu] ModalHost must be used within an AnchoredMenuProvider. " +
+        "This is usually handled automatically by AnchoredMenuProvider when autoHost=true."
+    );
+  }
 
   const activeHost = useAnchoredMenuState((s) => s.activeHost);
   if (activeHost !== "modal") return null;
@@ -91,7 +97,28 @@ export function ModalHost() {
       ]);
 
       if (cancelled) return;
+      
+      // Validate measurements before using them
+      if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid measurement for anchor "${req.id}". ` +
+              "Menu will not be positioned correctly. This can happen during layout transitions."
+          );
+        }
+        return;
+      }
+
       const nextAnchorWin = applyAnchorMargins(a, refObj);
+      if (!isValidMeasurement(nextAnchorWin)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid anchor measurement after applying margins for "${req.id}".`
+          );
+        }
+        return;
+      }
+
       setAnchorWin(nextAnchorWin);
       setHostWin(h);
       measureCacheRef.current.set(req.id, {
@@ -134,7 +161,26 @@ export function ModalHost() {
           measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard show for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard show for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -168,7 +214,26 @@ export function ModalHost() {
           measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard hide for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard hide for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -200,6 +265,17 @@ export function ModalHost() {
 
   const position = useMemo(() => {
     if (!req || !anchorInHost) return null;
+    
+    // Validate anchor measurement before computing position
+    if (!isValidMeasurement(anchorInHost)) {
+      if (__DEV__) {
+        console.warn(
+          `[react-native-anchored-menu] Cannot compute position for anchor "${req.id}": invalid measurement.`
+        );
+      }
+      return null;
+    }
+
     const viewport: Viewport | undefined =
       hostSize.width && hostSize.height
         ? {
@@ -209,7 +285,7 @@ export function ModalHost() {
         : undefined;
     return computeMenuPosition({
       anchor: anchorInHost,
-      menuSize,
+      menuSize: isValidMenuSize(menuSize) ? menuSize : null,
       viewport,
       placement: req.placement ?? "auto",
       offset: req.offset ?? 8,
@@ -219,7 +295,7 @@ export function ModalHost() {
     });
   }, [req, anchorInHost, menuSize, hostSize, keyboardHeight]);
 
-  const needsInitialMeasure = menuSize.width === 0 || menuSize.height === 0;
+  const needsInitialMeasure = !isValidMenuSize(menuSize);
 
   const statusBarTranslucent =
     req?.statusBarTranslucent ?? (Platform.OS === "android" ? false : true);

package/src/hosts/ViewHost.tsx

@@ -11,6 +11,7 @@ import {
   measureInWindowStable,
 } from "../utils/measure";
 import { computeMenuPosition } from "../utils/position";
+import { isValidMeasurement, isValidMenuSize } from "../utils/validation";
 import type {
   AnchorMeasurement,
   MenuSize,
@@ -35,7 +36,12 @@ interface MeasureCache {
 export function ViewHost() {
   const actions = useContext(AnchoredMenuActionsContext);
   const store = useContext(AnchoredMenuStateContext);
-  if (!actions || !store) throw new Error("AnchoredMenuProvider is missing");
+  if (!actions || !store) {
+    throw new Error(
+      "[react-native-anchored-menu] ViewHost must be used within an AnchoredMenuProvider. " +
+        "This is usually handled automatically by AnchoredMenuProvider when autoHost=true."
+    );
+  }
 
   const activeHost = useAnchoredMenuState((s) => s.activeHost);
   if (activeHost !== "view") return null;
@@ -96,7 +102,28 @@ export function ViewHost() {
       ]);
 
       if (cancelled) return;
+      
+      // Validate measurements before using them
+      if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid measurement for anchor "${req.id}". ` +
+              "Menu will not be positioned correctly. This can happen during layout transitions."
+          );
+        }
+        return;
+      }
+
       const nextAnchorWin = applyAnchorMargins(a, refObj);
+      if (!isValidMeasurement(nextAnchorWin)) {
+        if (__DEV__) {
+          console.warn(
+            `[react-native-anchored-menu] Invalid anchor measurement after applying margins for "${req.id}".`
+          );
+        }
+        return;
+      }
+
       setAnchorWin(nextAnchorWin);
       setHostWin(h);
       measureCacheRef.current.set(req.id, {
@@ -139,7 +166,26 @@ export function ViewHost() {
           measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard show for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard show for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -173,7 +219,26 @@ export function ViewHost() {
           measure(hostRef as any, strategy === "stable" ? { tries } : undefined),
         ]);
 
+        // Validate measurements before using them
+        if (!isValidMeasurement(a) || !isValidMeasurement(h)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid measurement during keyboard hide for anchor "${req.id}".`
+            );
+          }
+          return;
+        }
+
         const nextAnchorWin = applyAnchorMargins(a, refObj);
+        if (!isValidMeasurement(nextAnchorWin)) {
+          if (__DEV__) {
+            console.warn(
+              `[react-native-anchored-menu] Invalid anchor measurement after applying margins during keyboard hide for "${req.id}".`
+            );
+          }
+          return;
+        }
+
         setAnchorWin(nextAnchorWin);
         setHostWin(h);
         measureCacheRef.current.set(req.id, {
@@ -204,6 +269,17 @@ export function ViewHost() {
 
   const position = useMemo(() => {
     if (!req || !anchorInHost) return null;
+    
+    // Validate anchor measurement before computing position
+    if (!isValidMeasurement(anchorInHost)) {
+      if (__DEV__) {
+        console.warn(
+          `[react-native-anchored-menu] Cannot compute position for anchor "${req.id}": invalid measurement.`
+        );
+      }
+      return null;
+    }
+
     const viewport: Viewport | undefined =
       hostSize.width && hostSize.height
         ? {
@@ -214,7 +290,7 @@ export function ViewHost() {
 
     return computeMenuPosition({
       anchor: anchorInHost,
-      menuSize,
+      menuSize: isValidMenuSize(menuSize) ? menuSize : null,
       viewport,
       placement: req.placement ?? "auto",
       offset: req.offset ?? 8,
@@ -224,7 +300,7 @@ export function ViewHost() {
     });
   }, [req, anchorInHost, menuSize, hostSize, keyboardHeight]);
 
-  const needsInitialMeasure = menuSize.width === 0 || menuSize.height === 0;
+  const needsInitialMeasure = !isValidMenuSize(menuSize);
   if (!visible) return null;
 
   return (

package/src/types.ts

@@ -152,6 +152,8 @@ export interface AnchoredMenuProviderProps {
   children: ReactNode;
   defaultHost?: HostType;
   autoHost?: boolean;
+  /** Whether to automatically close menus when app goes to background/inactive (default: true) */
+  autoCloseOnBackground?: boolean;
   /** @deprecated Use defaultHost instead */
   host?: HostType;
 }

package/src/utils/validation.ts

@@ -0,0 +1,55 @@
+import type { AnchorMeasurement, MenuSize } from "../types";
+
+/**
+ * Validates that a measurement has valid dimensions.
+ * Returns true if the measurement is valid (non-null and has positive dimensions).
+ */
+export function isValidMeasurement(
+  measurement: AnchorMeasurement | null | undefined
+): measurement is AnchorMeasurement {
+  if (!measurement) return false;
+  return (
+    typeof measurement.width === "number" &&
+    typeof measurement.height === "number" &&
+    typeof measurement.pageX === "number" &&
+    typeof measurement.pageY === "number" &&
+    measurement.width > 0 &&
+    measurement.height > 0 &&
+    !isNaN(measurement.width) &&
+    !isNaN(measurement.height) &&
+    !isNaN(measurement.pageX) &&
+    !isNaN(measurement.pageY)
+  );
+}
+
+/**
+ * Validates that a menu size has valid dimensions.
+ * Returns true if the size is valid (non-null and has positive dimensions).
+ */
+export function isValidMenuSize(size: MenuSize | null | undefined): size is MenuSize {
+  if (!size) return false;
+  return (
+    typeof size.width === "number" &&
+    typeof size.height === "number" &&
+    size.width > 0 &&
+    size.height > 0 &&
+    !isNaN(size.width) &&
+    !isNaN(size.height)
+  );
+}
+
+/**
+ * Checks if a measurement looks invalid (e.g., all zeros, which can happen
+ * on Android during layout transitions).
+ */
+export function isInvalidMeasurement(
+  measurement: AnchorMeasurement | null | undefined
+): boolean {
+  if (!measurement) return true;
+  return (
+    measurement.pageX === 0 &&
+    measurement.pageY === 0 &&
+    measurement.width === 0 &&
+    measurement.height === 0
+  );
+}

package/src/components/AnchoredMenuLayer.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { AnchoredMenuProvider } from "../core/provider";
-
-/**
- * AnchoredMenuLayer
- *
- * A convenience wrapper that ensures the "view" host has a stable layout box to fill.
- * Use it at app root and inside RN <Modal> (wrap the full-screen modal container).
- */
-export function AnchoredMenuLayer({
-  children,
-  style,
-  defaultHost = "view",
-  ...providerProps
-}) {
-  return (
-    <View style={[{ flex: 1, position: "relative" }, style]}>
-      <AnchoredMenuProvider defaultHost={defaultHost} {...providerProps}>
-        {children}
-      </AnchoredMenuProvider>
-    </View>
-  );
-}
-
-

package/src/components/MenuAnchor.js

@@ -1,55 +0,0 @@
-import React, { useContext, useEffect, useRef } from "react";
-import { StyleSheet, View } from "react-native";
-import { AnchoredMenuActionsContext } from "../core/context";
-
-function extractMarginsFromChild(children) {
-  try {
-    const child = React.Children.only(children);
-    const flat = StyleSheet.flatten(child?.props?.style) || {};
-    const mv =
-      typeof flat.marginVertical === "number" ? flat.marginVertical : undefined;
-    const mh =
-      typeof flat.marginHorizontal === "number"
-        ? flat.marginHorizontal
-        : undefined;
-    const m = typeof flat.margin === "number" ? flat.margin : 0;
-
-    const top = (typeof flat.marginTop === "number" ? flat.marginTop : mv) ?? m;
-    const bottom =
-      (typeof flat.marginBottom === "number" ? flat.marginBottom : mv) ?? m;
-    const left =
-      (typeof flat.marginLeft === "number" ? flat.marginLeft : mh) ?? m;
-    const right =
-      (typeof flat.marginRight === "number" ? flat.marginRight : mh) ?? m;
-
-    return { top, bottom, left, right };
-  } catch {
-    return { top: 0, bottom: 0, left: 0, right: 0 };
-  }
-}
-
-export function MenuAnchor({ id, children }) {
-  const actions = useContext(AnchoredMenuActionsContext);
-  if (!actions) throw new Error("AnchoredMenuProvider is missing");
-
-  const ref = useRef(null);
-
-  useEffect(() => {
-    // Store child margins on the ref object so measurement can exclude margins.
-    // This avoids offset differences when the anchored child uses e.g. marginBottom.
-    ref.__anchoredMenuMargins = extractMarginsFromChild(children);
-
-    actions.registerAnchor(id, ref);
-
-    return () => {
-      actions.unregisterAnchor(id);
-    };
-  }, [actions, id, children]);
-
-  // collapsable={false} is important for Android measurement reliability
-  return (
-    <View ref={ref} collapsable={false}>
-      {children}
-    </View>
-  );
-}

package/src/core/context.js

@@ -1,10 +0,0 @@
-import React, { createContext } from "react";
-
-/**
- * Split contexts to avoid re-rendering all anchors when `request` changes.
- *
- * - Actions context: stable references (open/close/register/unregister/anchors map)
- * - State context: request + derived values that change during open/close
- */
-export const AnchoredMenuActionsContext = createContext(null);
-export const AnchoredMenuStateContext = createContext(null);