fix: offscreen PortalWhileClosingViews

Author: isekovanic

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
@@ -11,6 +11,7 @@ import {
   createClosingPortalLayoutRegistrationId,
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
+  useOverlayController,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -31,6 +32,49 @@ type PortalWhileClosingViewProps = {
   portalName: string;
 };
 
+const useSyncingApi = (portalHostName: string, registrationId: string) => {
+  const containerRef = useRef<View | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+  const { id } = useOverlayController();
+
+  const syncPortalLayout = useStableCallback(() => {
+    if (!id) {
+      return;
+    }
+
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      const absolute = {
+        x,
+        y: y + (Platform.OS === 'android' ? insets.top : 0),
+      };
+
+      if (!width || !height) {
+        return;
+      }
+
+      placeholderLayout.value = { h: height, w: width };
+
+      setClosingPortalLayout(portalHostName, registrationId, {
+        ...absolute,
+        h: height,
+        w: width,
+      });
+    });
+  });
+
+  useEffect(() => {
+    if (id) {
+      syncPortalLayout();
+    }
+  }, [insets.bottom, id, syncPortalLayout]);
+
+  return useMemo(
+    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
+    [placeholderLayout, syncPortalLayout],
+  );
+};
+
 /**
  * Keeps wrapped UI above the message overlay during close animation by teleporting it to a closing portal host.
  *
@@ -67,54 +111,26 @@ export const PortalWhileClosingView = ({
   portalHostName,
   portalName,
 }: PortalWhileClosingViewProps) => {
-  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 = {
-        x,
-        y: y + (Platform.OS === 'android' ? insets.top : 0),
-      };
-
-      if (!width || !height) {
-        return;
-      }
 
-      placeholderLayout.value = { h: height, w: width };
-
-      setClosingPortalLayout(portalHostName, registrationId, {
-        ...absolute,
-        h: height,
-        w: width,
-      });
-    });
-  });
+  const { syncPortalLayout, containerRef, placeholderLayout } = useSyncingApi(
+    portalHostName,
+    registrationId,
+  );
+  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
 
   useEffect(() => {
     return () => {
       clearClosingPortalLayout(portalHostName, registrationId);
     };
   }, [portalHostName, registrationId]);
 
-  useEffect(() => {
-    // Measure once after mount and layout settle.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        syncPortalLayout();
-      });
-    });
-  }, [insets.top, portalHostName, syncPortalLayout]);
-
   const placeholderStyle = useAnimatedStyle(() => ({
     height: placeholderLayout.value.h,
     width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%',