feat: implement navigation priority stacking

Author: isekovanic

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -8,8 +8,9 @@ import { Portal } from 'react-native-teleport';
 import { useStableCallback } from '../../hooks';
 import {
   clearClosingPortalLayout,
+  createClosingPortalLayoutRegistrationId,
   setClosingPortalLayout,
-  useOverlayController,
+  useShouldTeleportToClosingPortal,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -39,15 +40,16 @@ type PortalWhileClosingViewProps = {
  * This wrapper moves that UI into the overlay host layer for the closing phase, so stacking stays correct.
  *
  * To use it, simply wrap any view that should remain on top while the overlay is closing, and pass a `portalHostName`
- * and a `portalName`. Registration within the host layer will happen automatically, as will calculating layout.
+ * and a `portalName`. Once the wrapped view has a valid measured layout, it can participate in the closing host layer.
  *
  * Behavior:
  * - renders children in place during normal operation
- * - registers absolute layout for `portalHostName`
+ * - registers absolute layout for `portalHostName` once a valid measurement exists
  * - while overlay state is `closing`, teleports children to the matching closing host
  * - renders a local placeholder while closing to preserve original layout space
  *
- * Host registration is done once per key; subsequent layout updates are pushed via shared values.
+ * Stack presence only starts after first valid measurement. That prevents unmeasured entries from taking over a host
+ * slot and rendering with incomplete geometry.
  *
  * Note: As the `PortalWhileClosingView` relies heavily on being able to calculate the layout and positioning
  * properties of its children automatically, make sure that you do not wrap absolutely positioned views with
@@ -65,11 +67,18 @@ export const PortalWhileClosingView = ({
   portalHostName,
   portalName,
 }: PortalWhileClosingViewProps) => {
-  const { closing } = useOverlayController();
   const containerRef = useRef<View | null>(null);
+  const registrationIdRef = useRef<string | null>(null);
   const placeholderLayout = useSharedValue({ h: 0, w: 0 });
   const insets = useSafeAreaInsets();
 
+  if (!registrationIdRef.current) {
+    registrationIdRef.current = createClosingPortalLayoutRegistrationId();
+  }
+
+  const registrationId = registrationIdRef.current;
+  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
+
   const syncPortalLayout = useStableCallback(() => {
     containerRef.current?.measureInWindow((x, y, width, height) => {
       const absolute = {
@@ -83,14 +92,20 @@ export const PortalWhileClosingView = ({
 
       placeholderLayout.value = { h: height, w: width };
 
-      setClosingPortalLayout(portalHostName, {
+      setClosingPortalLayout(portalHostName, registrationId, {
         ...absolute,
         h: height,
         w: width,
       });
     });
   });
 
+  useEffect(() => {
+    return () => {
+      clearClosingPortalLayout(portalHostName, registrationId);
+    };
+  }, [portalHostName, registrationId]);
+
   useEffect(() => {
     // Measure once after mount and layout settle.
     requestAnimationFrame(() => {
@@ -100,27 +115,19 @@ export const PortalWhileClosingView = ({
     });
   }, [insets.top, portalHostName, syncPortalLayout]);
 
-  const unregisterPortalHost = useStableCallback(() => clearClosingPortalLayout(portalHostName));
-
-  useEffect(() => {
-    return () => {
-      unregisterPortalHost();
-    };
-  }, [unregisterPortalHost]);
-
   const placeholderStyle = useAnimatedStyle(() => ({
     height: placeholderLayout.value.h,
     width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%',
   }));
 
   return (
     <>
-      <Portal hostName={closing ? portalHostName : undefined} name={portalName}>
+      <Portal hostName={shouldTeleport ? portalHostName : undefined} name={portalName}>
         <View collapsable={false} ref={containerRef} onLayout={syncPortalLayout}>
           {children}
         </View>
       </Portal>
-      {closing ? <Animated.View pointerEvents='none' style={placeholderStyle} /> : null}
+      {shouldTeleport ? <Animated.View pointerEvents='none' style={placeholderStyle} /> : null}
     </>
   );
 };

package/src/contexts/overlayContext/ClosingPortalHostsLayer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 import { PortalHost } from 'react-native-teleport';
@@ -42,16 +42,31 @@ type ClosingPortalHostsLayerProps = {
 };
 
 export const ClosingPortalHostsLayer = ({ closeCoverOpacity }: ClosingPortalHostsLayerProps) => {
-  const closingPortalLayouts = useClosingPortalLayouts();
+  const closingPortalLayoutStacks = useClosingPortalLayouts();
+  const closingPortalHosts = useMemo(() => {
+    const topHosts: Array<{
+      hostName: string;
+      layout: ClosingPortalLayoutEntry['layout'];
+    }> = [];
+
+    Object.entries(closingPortalLayoutStacks).forEach(([hostName, entries]) => {
+      const topEntry = entries[entries.length - 1];
+      if (topEntry) {
+        topHosts.push({ hostName, layout: topEntry.layout });
+      }
+    });
+
+    return topHosts;
+  }, [closingPortalLayoutStacks]);
 
   return (
     <>
-      {Object.entries(closingPortalLayouts).map(([hostName, entry]) => (
+      {closingPortalHosts.map(({ hostName, layout }) => (
         <ClosingPortalHostSlot
           closeCoverOpacity={closeCoverOpacity}
           hostName={hostName}
           key={hostName}
-          layout={entry.layout}
+          layout={layout}
         />
       ))}
     </>

package/src/state-store/message-overlay-store.ts

@@ -14,10 +14,11 @@ type OverlayState = {
 
 export type Rect = { x: number; y: number; w: number; h: number } | undefined;
 export type ClosingPortalLayoutEntry = {
+  id: string;
   layout: SharedValue<Rect>;
 };
 type ClosingPortalLayoutsState = {
-  layouts: Record<string, ClosingPortalLayoutEntry>;
+  layouts: Record<string, ClosingPortalLayoutEntry[]>;
 };
 
 const DefaultState = {
@@ -28,6 +29,8 @@ const DefaultClosingPortalLayoutsState: ClosingPortalLayoutsState = {
   layouts: {},
 };
 
+let closingPortalLayoutRegistrationCounter = 0;
+
 type OverlaySharedValueController = {
   incrementCloseCorrectionY: (deltaY: number) => void;
   resetCloseCorrectionY: () => void;
@@ -96,9 +99,13 @@ const closingPortalLayoutsStore = new StateStore<ClosingPortalLayoutsState>(
   DefaultClosingPortalLayoutsState,
 );
 
-export const setClosingPortalLayout = (hostName: string, layout: Rect) => {
+export const createClosingPortalLayoutRegistrationId = () =>
+  `closing-portal-layout-${closingPortalLayoutRegistrationCounter++}`;
+
+export const setClosingPortalLayout = (hostName: string, id: string, layout: Rect) => {
   const { layouts } = closingPortalLayoutsStore.getLatestValue();
-  const existingEntry = layouts[hostName];
+  const hostEntries = layouts[hostName] ?? [];
+  const existingEntry = hostEntries.find((entry) => entry.id === id);
 
   if (existingEntry) {
     existingEntry.layout.value = layout;
@@ -110,17 +117,28 @@ export const setClosingPortalLayout = (hostName: string, layout: Rect) => {
   closingPortalLayoutsStore.next({
     layouts: {
       ...layouts,
-      [hostName]: {
-        layout: makeMutable<Rect>(layout),
-      },
+      [hostName]: [...hostEntries, { id, layout: makeMutable<Rect>(layout) }],
     },
   });
 };
 
-export const clearClosingPortalLayout = (hostName: string) => {
+export const clearClosingPortalLayout = (hostName: string, id: string) => {
   const { layouts } = closingPortalLayoutsStore.getLatestValue();
+  const hostEntries = layouts[hostName];
+
+  if (!hostEntries?.length) {
+    return;
+  }
+
+  const nextHostEntries = hostEntries.filter((entry) => entry.id !== id);
   const nextLayouts = { ...layouts };
-  delete nextLayouts[hostName];
+
+  if (nextHostEntries.length === 0) {
+    delete nextLayouts[hostName];
+  } else {
+    nextLayouts[hostName] = nextHostEntries;
+  }
+
   closingPortalLayoutsStore.next({ layouts: nextLayouts });
 };
 
@@ -148,14 +166,31 @@ export const useOverlayController = () => {
   return useStateStore(overlayStore, selector);
 };
 
+const overlayClosingSelector = (nextState: OverlayState) => ({
+  closing: nextState.closing,
+});
+
+export const useIsOverlayClosing = () => {
+  return useStateStore(overlayStore, overlayClosingSelector).closing;
+};
+
+export const useShouldTeleportToClosingPortal = (hostName: string, id: string) => {
+  const closing = useIsOverlayClosing();
+  const closingPortalLayouts = useClosingPortalLayouts();
+  const hostEntries = closingPortalLayouts[hostName];
+
+  return !!closing && hostEntries?.[hostEntries.length - 1]?.id === id;
+};
+
 /**
  * NOTE:
  * Do not swap this back to `useStateStore(closingPortalLayoutsStore, selector)`.
  *
  * Why this is special:
  * - `layouts` is a dynamic-key map (hosts are added/removed at runtime)
+ * - each host key maintains a stack of registrations
  * - We only need React updates when the key set changes (add/remove/reset)
- * - Per-layout movement is already on UI thread via `entry.layout.value`
+ * - Per-layout movement is already on UI thread via the top `entry.layout.value`
  *
  * Why `useStateStore` is unsafe here:
  * - Both `stream-chat`'s `subscribeWithSelector` and our `useStateStore` snapshot