react-native-auto-positioned-popup 1.2.16 → 1.2.18

package/src/KeyboardManager.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Keyboard, EmitterSubscription, Platform } from 'react-native';
+import { Keyboard, EmitterSubscription, Platform, KeyboardEvent } from 'react-native';
+
+// DEBUG FLAG: Set to false to disable all console logs for better performance
+const KEYBOARD_DEBUG = false;
+const debugLog = (...args: any[]) => {
+  if (KEYBOARD_DEBUG) {
+    console.log(...args);
+  }
+};
 
 // Debounce function
 const debounce = (func: Function, delay: number) => {
@@ -10,8 +18,16 @@ const debounce = (func: Function, delay: number) => {
   };
 };
 
-export const useKeyboardStatus = () => {
+// V19: Return type for keyboard status hook - includes height for accurate positioning
+interface KeyboardStatus {
+  isShown: boolean;
+  height: number;
+}
+
+export const useKeyboardStatus = (): KeyboardStatus => {
   const [isKeyboardFullyShown, setIsKeyboardFullyShown] = useState(false);
+  // V19: Track keyboard height for popup positioning
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
 
   // Add state cache to avoid repeatedly setting the same state
   const currentKeyboardStatusRef = useRef<boolean>(false);
@@ -25,13 +41,13 @@ export const useKeyboardStatus = () => {
 
     // ✅ FIX: Check state before debounce
     if (currentKeyboardStatusRef.current === value) {
-      console.log('KeyboardManager: Skip - Keyboard state unchanged (before debounce)', { value, timeSinceLastUpdate });
+      debugLog('KeyboardManager: Skip - Keyboard state unchanged (before debounce)', { value, timeSinceLastUpdate });
       return;
     }
 
     // ✅ FIX: Skip if the same value is already pending
     if (pendingValueRef.current === value) {
-      console.log('KeyboardManager: Skip - Same value already in processing queue', { value });
+      debugLog('KeyboardManager: Skip - Same value already in processing queue', { value });
       return;
     }
 
@@ -47,12 +63,12 @@ export const useKeyboardStatus = () => {
     debounce((value: boolean, currentTime: number, timeSinceLastUpdate: number) => {
       // ✅ FIX: Check state again (in case state was updated during debounce)
       if (currentKeyboardStatusRef.current === value) {
-        console.log('KeyboardManager: Skip - Keyboard state unchanged (after debounce)', { value, timeSinceLastUpdate });
+        debugLog('KeyboardManager: Skip - Keyboard state unchanged (after debounce)', { value, timeSinceLastUpdate });
         pendingValueRef.current = null;
         return;
       }
 
-      console.log('KeyboardManager: Setting keyboard status to', value, {
+      debugLog('KeyboardManager: Setting keyboard status to', value, {
         previousValue: currentKeyboardStatusRef.current,
         timeSinceLastUpdate
       });
@@ -75,10 +91,15 @@ export const useKeyboardStatus = () => {
     // Remove Will event listeners to avoid duplicate triggers and state race conditions
     keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
-      () => {
+      (e: KeyboardEvent) => {
+        // V19: Capture keyboard height from event for accurate popup positioning
+        const height = e.endCoordinates?.height || 0;
+        debugLog('KeyboardManager: keyboardDidShow event', { height });
+        setKeyboardHeight(height);
+
         // ✅ FIX: Add protection at event listener level - skip if keyboard is already open
         if (currentKeyboardStatusRef.current === true) {
-          console.log('KeyboardManager: Skip keyboardDidShow event - Keyboard is already open');
+          debugLog('KeyboardManager: Skip keyboardDidShow event - Keyboard is already open');
           return;
         }
         debouncedSetKeyboardShown(true);
@@ -87,9 +108,12 @@ export const useKeyboardStatus = () => {
     keyboardDidHideListener = Keyboard.addListener(
       'keyboardDidHide',
       () => {
+        // V19: Reset keyboard height when keyboard hides
+        setKeyboardHeight(0);
+
         // ✅ FIX: Add protection at event listener level - skip if keyboard is already closed
         if (currentKeyboardStatusRef.current === false) {
-          console.log('KeyboardManager: Skip keyboardDidHide event - Keyboard is already closed');
+          debugLog('KeyboardManager: Skip keyboardDidHide event - Keyboard is already closed');
           return;
         }
         debouncedSetKeyboardShown(false);
@@ -102,5 +126,6 @@ export const useKeyboardStatus = () => {
     };
   }, []);
 
-  return isKeyboardFullyShown;
+  // V19: Return both keyboard visibility status and height
+  return { isShown: isKeyboardFullyShown, height: keyboardHeight };
 };

package/src/RootViewContext.tsx

@@ -1,5 +1,13 @@
 import React, {ReactNode, createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {Pressable, View, ViewStyle, Keyboard} from 'react-native';
+import {Pressable, View, ViewStyle, Keyboard, StyleSheet} from 'react-native';
+
+// DEBUG FLAG: Set to false to disable all console logs for better performance
+const ROOTVIEW_DEBUG = false;
+const debugLog = (...args: any[]) => {
+  if (ROOTVIEW_DEBUG) {
+    console.log(...args);
+  }
+};
 
 interface DynamicViewBase {
   id: string;
@@ -35,13 +43,13 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
   const [searchQuery, setSearchQuery] = useState<string>('');
   const viewRefs = useRef<Record<string, View>>({});
   useEffect(() => {
-    console.log('react-native-auto-positioned-popup RootViewProvider rootViews changed:', rootViews);
+    debugLog('react-native-auto-positioned-popup RootViewProvider rootViews changed:', rootViews);
   }, [rootViews]);
   const addRootView = (view: DynamicViewBase): void => {
     // const id = `dynamic-view-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     const newView: DynamicViewBase = {...view};
-    console.log('react-native-auto-positioned-popup RootViewProvider addRootView rootViews=', rootViews);
-    console.log('react-native-auto-positioned-popup RootViewProvider addRootView newView=', newView);
+    debugLog('react-native-auto-positioned-popup RootViewProvider addRootView rootViews=', rootViews);
+    debugLog('react-native-auto-positioned-popup RootViewProvider addRootView newView=', newView);
     setRootViews((prev) => [...prev, newView]);
   };
 
@@ -60,7 +68,7 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
    * @param _rootViews
    */
   const removeRootView = (id?: string, force?: boolean, _rootViews?: DynamicViewBase[]): void => {
-    console.log('react-native-auto-positioned-popup RootViewProvider removeRootView=', {id, force, rootViews, _rootViews});
+    debugLog('react-native-auto-positioned-popup RootViewProvider removeRootView=', {id, force, rootViews, _rootViews});
     // Ensure keyboard is dismissed when force removing all root views
     if (force) {
       // Dismiss keyboard first
@@ -70,14 +78,14 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
       // 100ms gives touch event system enough time to process pending events before views are removed
       setTimeout(() => {
         setRootViews((prev) => []);
-        console.log('react-native-auto-positioned-popup RootViewProvider removeRootView setRootViews(prev => []) force=true');
+        debugLog('react-native-auto-positioned-popup RootViewProvider removeRootView setRootViews(prev => []) force=true');
       }, 100);
       return;
     }
     if (rootViews.length > 0 && id) {
       setRootViews((prev) => prev.filter((view) => view.id !== id));
       // else {
-      //   console.log('RootViewProvider removeRootView setRootViews(prev => [])')
+      //   debugLog('RootViewProvider removeRootView setRootViews(prev => [])')
       //   setRootViews(prev => [])
       // }
     } else if (_rootViews && _rootViews.length > 0 && id) {
@@ -86,10 +94,13 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
   };
 
   const setRootViewNativeStyle = (id: string, style: ViewStyle): void => {
+    debugLog('RootViewContext setRootViewNativeStyle called=', {id, style});
     const target = viewRefs.current[id];
+    debugLog('RootViewContext setRootViewNativeStyle target exists=', !!target);
     if (target) {
       // @ts-ignore - React Native setNativeProps
       target.setNativeProps({style});
+      debugLog('RootViewContext setRootViewNativeStyle applied style=', style);
     }
   };
 
@@ -108,22 +119,33 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
 
   return (
     <RootViewContext.Provider value={contextValue}>
-      <>
+      {/* CRITICAL FIX: Use View with flex:1 instead of Fragment */}
+      {/* Fragment doesn't create actual View, causing absolute positioning to use wrong ancestor */}
+      {/* View with flex:1 ensures popup container positions relative to this full-screen View */}
+      <View style={rootViewStyles.container}>
         {children}
-        {rootViews.map(
-          ({id, style, component, useModal, onModalClose, centerDisplay}: DynamicViewBase): React.JSX.Element => {
-            console.log('react-native-auto-positioned-popup RootViewProvider rootViews.map=', {id, style, component, useModal, centerDisplay});
-            return !useModal ? (
-              <View
-                key={id}
-                ref={(r) => {
-                  if (r) viewRefs.current[id] = r;
-                }}
-                style={[style, {position: 'absolute'}]}
-              >
-                {component}
-              </View>
-            ) : (
+        {/* CRITICAL: Full-screen container ensures absolute positioning is relative to screen */}
+        {/* Without this, popup position may be offset by parent containers */}
+        {rootViews.length > 0 && (
+          <View
+            pointerEvents="box-none"
+            style={rootViewStyles.popupContainer}
+          >
+            {rootViews.map(
+              ({id, style, component, useModal, onModalClose, centerDisplay}: DynamicViewBase): React.JSX.Element => {
+                // POSITION DEBUG: Log the actual top value being applied (simple format for cleaner logs)
+                console.log(`📍 RENDER_STYLE id=${id} top=${style?.top} left=${style?.left} w=${style?.width} h=${style?.height} op=${style?.opacity}`);
+                return !useModal ? (
+                  <View
+                    key={id}
+                    ref={(r) => {
+                      if (r) viewRefs.current[id] = r;
+                    }}
+                    style={[style, {position: 'absolute'}]}
+                  >
+                    {component}
+                  </View>
+                ) : (
               <Pressable
                 key={id}
                 style={[
@@ -141,7 +163,7 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
                   centerDisplay && {justifyContent: 'center', alignItems: 'center'},
                 ]}
                 onPress={() => {
-                  console.log('react-native-auto-positioned-popup RootViewProvider Pressable onPress rootViews=', rootViews);
+                  debugLog('react-native-auto-positioned-popup RootViewProvider Pressable onPress rootViews=', rootViews);
                   removeRootView(id, true);
                   onModalClose && onModalClose();
                 }}
@@ -169,11 +191,28 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) =>
             // >
             // </Modal>)
           }
+            )}
+          </View>
         )}
-      </>
+      </View>
     </RootViewContext.Provider>
   );
 };
+
+// Styles for RootView container - extracted for better performance
+const rootViewStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  popupContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 99999,
+  },
+});
 /*
   const { addRootView, updateRootView, removeRootView ,searchQuery } = useRootView();
  */