react-native-anchored-menu 0.0.10 → 0.0.12

package/README.md

@@ -11,6 +11,11 @@ A **headless, anchor-based menu / popover system for React Native** designed to
 This library focuses on **correct measurement and positioning**, not UI.  
 You fully control how the menu looks and behaves.
 
+## 🔎 Links
+
+- **GitHub**: `https://github.com/mahmoudelfekygithub/react-native-anchored-menu`  
+- **npm**: `https://www.npmjs.com/package/react-native-anchored-menu`
+
 ---
 
 ## 🎬 Demo
@@ -156,24 +161,24 @@ export function ExampleModalMenu() {
         <AnchoredMenuLayer>
           <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
             <MenuAnchor id="modal-menu">
-              <Pressable
+      <Pressable
                 onPress={() =>
-                  open({
+          open({
                     id: "modal-menu",
                     host: "view",
-                    render: ({ close }) => (
+            render: ({ close }) => (
                       <View style={{ backgroundColor: "#111", padding: 12, borderRadius: 8 }}>
                         <Pressable onPress={close}>
                           <Text style={{ color: "#fff" }}>Action</Text>
-                        </Pressable>
-                      </View>
-                    ),
-                  })
-                }
-              >
+                </Pressable>
+              </View>
+            ),
+          })
+        }
+      >
                 <Text>Open menu</Text>
-              </Pressable>
-            </MenuAnchor>
+      </Pressable>
+    </MenuAnchor>
 
             <Pressable onPress={() => setVisible(false)}>
               <Text>Close modal</Text>

package/docs/.nojekyll

@@ -0,0 +1,2 @@
+
+

package/docs/google58625de8c50ff46e.html

@@ -0,0 +1,2 @@
+google-site-verification: google58625de8c50ff46e.html
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-anchored-menu",
-  "version": "0.0.10",
-  "description": "Headless anchored menu/popover for React Native with stable measurement (view host by default).",
+  "version": "0.0.12",
+  "description": "Headless anchored context menu / popover for React Native (iOS/Android) with stable measurement (default view host).",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mahmoudelfekygithub/react-native-anchored-menu.git"
@@ -15,15 +15,25 @@
   "files": [
     "src",
     "assets",
+    "docs",
     "README.md",
     "LICENSE"
   ],
   "keywords": [
     "react-native",
+    "react native",
     "context-menu",
+    "contextmenu",
     "popover",
+    "popover-menu",
+    "anchored",
+    "anchored-menu",
     "menu",
-    "anchor"
+    "dropdown",
+    "tooltip",
+    "overlay",
+    "anchor",
+    "positioning"
   ],
   "license": "MIT",
   "peerDependencies": {

package/src/hosts/ModalHost.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Modal, Platform, Pressable, View } from "react-native";
+import { Keyboard, Modal, Platform, Pressable, View } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -31,7 +31,9 @@ export function ModalHost() {
   const [anchorWin, setAnchorWin] = useState(null);
   const [hostWin, setHostWin] = useState(null);
   const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const measureCacheRef = useRef(new Map()); // id -> { t, anchorWin, hostWin }
+  const remeasureTimeoutRef = useRef(null);
 
   useEffect(() => {
     if (!req) {
@@ -93,6 +95,85 @@ export function ModalHost() {
     };
   }, [req?.id, req, actions.anchors]);
 
+  // Re-measure when keyboard shows/hides
+  useEffect(() => {
+    if (!req) return;
+
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+      // Debounce re-measurement to avoid multiple rapid calls
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+      remeasureTimeoutRef.current = setTimeout(async () => {
+        if (!req || !hostRef.current) return;
+        const refObj = actions.anchors.get(req.id);
+        if (!refObj) return;
+
+        const strategy = req?.measurement ?? "stable";
+        const tries =
+          typeof req?.measurementTries === "number" ? req.measurementTries : 8;
+        const measure =
+          strategy === "fast" ? measureInWindowFast : measureInWindowStable;
+
+        const [a, h] = await Promise.all([
+          measure(refObj, strategy === "stable" ? { tries } : undefined),
+          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        ]);
+
+        const nextAnchorWin = applyAnchorMargins(a, refObj);
+        setAnchorWin(nextAnchorWin);
+        setHostWin(h);
+        measureCacheRef.current.set(req.id, {
+          t: Date.now(),
+          anchorWin: nextAnchorWin,
+          hostWin: h,
+        });
+      }, 100);
+    });
+
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+      // Re-measure when keyboard hides
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+      remeasureTimeoutRef.current = setTimeout(async () => {
+        if (!req || !hostRef.current) return;
+        const refObj = actions.anchors.get(req.id);
+        if (!refObj) return;
+
+        const strategy = req?.measurement ?? "stable";
+        const tries =
+          typeof req?.measurementTries === "number" ? req.measurementTries : 8;
+        const measure =
+          strategy === "fast" ? measureInWindowFast : measureInWindowStable;
+
+        const [a, h] = await Promise.all([
+          measure(refObj, strategy === "stable" ? { tries } : undefined),
+          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        ]);
+
+        const nextAnchorWin = applyAnchorMargins(a, refObj);
+        setAnchorWin(nextAnchorWin);
+        setHostWin(h);
+        measureCacheRef.current.set(req.id, {
+          t: Date.now(),
+          anchorWin: nextAnchorWin,
+          hostWin: h,
+        });
+      }, 100);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+    };
+  }, [req?.id, req, actions.anchors]);
+
   // window coords -> host coords (avoids status bar / inset mismatches)
   const anchorInHost = useMemo(() => {
     if (!anchorWin || !hostWin) return null;
@@ -107,7 +188,10 @@ export function ModalHost() {
     if (!req || !anchorInHost) return null;
     const viewport =
       hostSize.width && hostSize.height
-        ? { width: hostSize.width, height: hostSize.height }
+        ? {
+            width: hostSize.width,
+            height: hostSize.height - keyboardHeight, // Adjust viewport for keyboard
+          }
         : undefined;
     return computeMenuPosition({
       anchor: anchorInHost,
@@ -146,37 +230,37 @@ export function ModalHost() {
             setHostSize({ width, height });
           }
         }}
-      >
-        {/* Tap outside to dismiss */}
+    >
+      {/* Tap outside to dismiss */}
         <Pressable style={{ flex: 1 }} onPress={actions.close}>
           {visible && !!anchorInHost && !!position ? (
-            <View
-              style={{
-                position: "absolute",
+        <View
+          style={{
+            position: "absolute",
                 // Keep in-place so layout runs on iOS; hide visually until measured to avoid flicker.
-                top: position.top,
-                left: position.left,
+            top: position.top,
+            left: position.left,
                 opacity: needsInitialMeasure ? 0 : 1,
-              }}
+          }}
               pointerEvents={needsInitialMeasure ? "none" : "auto"}
-              onStartShouldSetResponder={() => true}
-              onLayout={(e) => {
-                const { width, height } = e.nativeEvent.layout;
-                if (width !== menuSize.width || height !== menuSize.height) {
-                  setMenuSize({ width, height });
-                }
-              }}
-            >
-              {typeof req.render === "function"
+          onStartShouldSetResponder={() => true}
+          onLayout={(e) => {
+            const { width, height } = e.nativeEvent.layout;
+            if (width !== menuSize.width || height !== menuSize.height) {
+              setMenuSize({ width, height });
+            }
+          }}
+        >
+          {typeof req.render === "function"
                 ? req.render({
                     close: actions.close,
                     anchor: anchorWin,
                     anchorInHost,
                   })
-                : req.content}
-            </View>
+            : req.content}
+        </View>
           ) : null}
-        </Pressable>
+      </Pressable>
       </View>
     </Modal>
   );

package/src/hosts/ViewHost.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, View } from "react-native";
+import { Keyboard, Pressable, View } from "react-native";
 import {
   AnchoredMenuActionsContext,
   AnchoredMenuStateContext,
@@ -38,7 +38,9 @@ export function ViewHost() {
   const [anchorWin, setAnchorWin] = useState(null);
   const [hostWin, setHostWin] = useState(null);
   const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const measureCacheRef = useRef(new Map()); // id -> { t, anchorWin, hostWin }
+  const remeasureTimeoutRef = useRef(null);
 
   useEffect(() => {
     if (!req) {
@@ -98,6 +100,85 @@ export function ViewHost() {
     };
   }, [req?.id, req, actions.anchors]);
 
+  // Re-measure when keyboard shows/hides
+  useEffect(() => {
+    if (!req) return;
+
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+      // Debounce re-measurement to avoid multiple rapid calls
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+      remeasureTimeoutRef.current = setTimeout(async () => {
+        if (!req || !hostRef.current) return;
+        const refObj = actions.anchors.get(req.id);
+        if (!refObj) return;
+
+        const strategy = req?.measurement ?? "stable";
+        const tries =
+          typeof req?.measurementTries === "number" ? req.measurementTries : 8;
+        const measure =
+          strategy === "fast" ? measureInWindowFast : measureInWindowStable;
+
+        const [a, h] = await Promise.all([
+          measure(refObj, strategy === "stable" ? { tries } : undefined),
+          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        ]);
+
+        const nextAnchorWin = applyAnchorMargins(a, refObj);
+        setAnchorWin(nextAnchorWin);
+        setHostWin(h);
+        measureCacheRef.current.set(req.id, {
+          t: Date.now(),
+          anchorWin: nextAnchorWin,
+          hostWin: h,
+        });
+      }, 100);
+    });
+
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+      // Re-measure when keyboard hides
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+      remeasureTimeoutRef.current = setTimeout(async () => {
+        if (!req || !hostRef.current) return;
+        const refObj = actions.anchors.get(req.id);
+        if (!refObj) return;
+
+        const strategy = req?.measurement ?? "stable";
+        const tries =
+          typeof req?.measurementTries === "number" ? req.measurementTries : 8;
+        const measure =
+          strategy === "fast" ? measureInWindowFast : measureInWindowStable;
+
+        const [a, h] = await Promise.all([
+          measure(refObj, strategy === "stable" ? { tries } : undefined),
+          measure(hostRef, strategy === "stable" ? { tries } : undefined),
+        ]);
+
+        const nextAnchorWin = applyAnchorMargins(a, refObj);
+        setAnchorWin(nextAnchorWin);
+        setHostWin(h);
+        measureCacheRef.current.set(req.id, {
+          t: Date.now(),
+          anchorWin: nextAnchorWin,
+          hostWin: h,
+        });
+      }, 100);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      if (remeasureTimeoutRef.current) {
+        clearTimeout(remeasureTimeoutRef.current);
+      }
+    };
+  }, [req?.id, req, actions.anchors]);
+
   const anchorInHost = useMemo(() => {
     if (!anchorWin || !hostWin) return null;
     return {
@@ -111,7 +192,10 @@ export function ViewHost() {
     if (!req || !anchorInHost) return null;
     const viewport =
       hostSize.width && hostSize.height
-        ? { width: hostSize.width, height: hostSize.height }
+        ? {
+            width: hostSize.width,
+            height: hostSize.height - keyboardHeight, // Adjust viewport for keyboard
+          }
         : undefined;
 
     return computeMenuPosition({

package/src/utils/position.js

@@ -25,9 +25,17 @@ export function computeMenuPosition({
   if (align === "center" && mW) left = anchor.pageX + anchor.width / 2 - mW / 2;
   if (align === "end" && mW) left = anchor.pageX + anchor.width - mW;
 
-  // Optional RTL hook (kept as no-op unless you customize)
+  // RTL-aware alignment: flip start/end when RTL is enabled
   if (rtlAware && I18nManager.isRTL) {
-    // no-op by default
+    // In RTL, "start" means right side, "end" means left side
+    if (align === "start" && mW) {
+      // Align to right edge of anchor
+      left = anchor.pageX + anchor.width - mW;
+    } else if (align === "end" && mW) {
+      // Align to left edge of anchor
+      left = anchor.pageX;
+    }
+    // "center" stays the same in RTL
   }
 
   if (mW) left = clamp(left, margin, SW - mW - margin);