fix: translated into viewport PortalWhileClosingView (#3512)

## 🎯 Goal

THis PR addresses a very peculiar issue we have with our
`PortalWhileClosingView`. Namely, any time the `PortalWhileClosingView`
is rendered some place else than the actual viewport (a common example
would be the JS `stack` version of `react-navigation`, where the entire
screen is first rendered offscreen and then translated into view) our
previous setup would take layout measurements wrong (as it would do it
on mount initially, while the view is completely offset).

This would of course resolve itself if `onLayout` is ever invoked again
on the `children` property of `PortalWhileClosingView`, however this is
in no way guaranteed (as even the initial `onLayout` happens offscreen).
Instead, we change the logic to only measure when:

- The overlay actually opens
- `onLayout` is invoked while the overlay is open

We don't particularly care about any other scenario anyway. This is
additionally a slight performance boost as well, as for example children
with very heavy layout animations (for example animating `scale`
directly on some `interpolation`, or basically anything which calls
`onLayout` very often). We do pay the cost on initial teleport, but it's
negligible and does not at all stress any of the threads out.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

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,
+  useHasActiveId,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -67,54 +68,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%',
@@ -137,3 +110,46 @@ export const PortalWhileClosingView = ({
     </>
   );
 };
+
+const useSyncingApi = (portalHostName: string, registrationId: string) => {
+  const containerRef = useRef<View | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+  const hasActiveId = useHasActiveId();
+
+  const syncPortalLayout = useStableCallback(() => {
+    if (!hasActiveId) {
+      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 (hasActiveId) {
+      syncPortalLayout();
+    }
+  }, [insets.bottom, hasActiveId, syncPortalLayout]);
+
+  return useMemo(
+    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
+    [placeholderLayout, syncPortalLayout],
+  );
+};

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

@@ -342,3 +342,11 @@ export const useIsOverlayActive = (id: string) => {
 
   return useStateStore(overlayStore, messageOverlaySelector);
 };
+
+export const activeIdSelector = (nextState: OverlayState) => ({ id: nextState.id });
+
+export const useHasActiveId = () => {
+  const { id } = useStateStore(overlayStore, activeIdSelector);
+
+  return !!id;
+};