fix: ctx menu positioning on resizable viewport (#3411)

## 🎯 Goal

This PR addresses an issue with the portaling of our message view
towards the `MessageHostOverlay`, where if there are layout changes to
the viewport (i.e keyboard/attachment picker closing) the closing
animation would animate to a stale position of the message (and then
snap back into place as the portal closes).

We keep a revision of any corrections we need to do post opening the
overlay in order to address this.

## 🛠 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

examples/SampleApp/yarn.lock

@@ -8354,10 +8354,10 @@ stream-chat-react-native-core@8.1.0:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.30.1:
-  version "9.30.1"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.30.1.tgz#86d152e4d0894854370512d17530854541f7990b"
-  integrity sha512-8f58tCo3QfgzaNhWHpRQzEfglSPPn4lGRn74FFTr/pn53dMJwtcKDSohV6NTHBrkYWTXYObRnHgh2IhGFUKckw==
+stream-chat@^9.33.0:
+  version "9.34.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.34.0.tgz#e92c3262e1b6fbe92b1b1148286ee152849250dc"
+  integrity sha512-b65Z+ufAtygAwT2dCQ8ImgMx01b9zgS1EZ8OK5lRHhSJKYKSsSa1pS3USbbFq6QpuwGZwXM3lovGXLYoWiG84g==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

package/src/components/MessageList/MessageList.tsx

@@ -65,6 +65,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
+import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
@@ -1171,7 +1172,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (additionalFlatListProps?.onLayout) {
       additionalFlatListProps.onLayout(event);
     }
-    viewportHeightRef.current = event.nativeEvent.layout.height;
+    const nextViewportHeight = event.nativeEvent.layout.height;
+    if (viewportHeightRef.current !== nextViewportHeight) {
+      const previousViewportHeight = viewportHeightRef.current ?? nextViewportHeight;
+      const closeCorrectionDeltaY = nextViewportHeight - previousViewportHeight;
+      bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+    }
+    viewportHeightRef.current = nextViewportHeight;
   });
 
   if (!ListComponent) {

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -31,6 +31,7 @@ export const MessageOverlayHostLayer = () => {
   const messageH = useSharedValue<Rect>(undefined);
   const topH = useSharedValue<Rect>(undefined);
   const bottomH = useSharedValue<Rect>(undefined);
+  const closeCorrectionY = useSharedValue(0);
 
   const topInset = insets.top;
   // Due to edge-to-edge in combination with various libraries, Android sometimes reports
@@ -50,10 +51,17 @@ export const MessageOverlayHostLayer = () => {
   useEffect(
     () =>
       registerOverlaySharedValueController({
+        incrementCloseCorrectionY: (deltaY) => {
+          closeCorrectionY.value += deltaY;
+        },
+        resetCloseCorrectionY: () => {
+          closeCorrectionY.value = 0;
+        },
         reset: () => {
           messageH.value = undefined;
           topH.value = undefined;
           bottomH.value = undefined;
+          closeCorrectionY.value = 0;
         },
         setBottomH: (rect) => {
           bottomH.value = rect;
@@ -65,7 +73,7 @@ export const MessageOverlayHostLayer = () => {
           topH.value = rect;
         },
       }),
-    [bottomH, messageH, topH],
+    [bottomH, closeCorrectionY, messageH, topH],
   );
 
   useEffect(() => {
@@ -163,7 +171,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const topItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
     return {
       transform: [
         { scale: backdrop.value },
@@ -184,7 +192,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const bottomItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
     return {
       transform: [
         { scale: backdrop.value },
@@ -205,7 +213,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const hostTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
 
     return {
       transform: [

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

@@ -17,6 +17,8 @@ const DefaultState = {
 };
 
 type OverlaySharedValueController = {
+  incrementCloseCorrectionY: (deltaY: number) => void;
+  resetCloseCorrectionY: () => void;
   reset: () => void;
   setBottomH: (rect: Rect) => void;
   setMessageH: (rect: Rect) => void;
@@ -46,10 +48,19 @@ export const setOverlayBottomH = (bottomH: Rect) => {
   sharedValueController?.setBottomH(bottomH);
 };
 
-export const openOverlay = (id: string) => overlayStore.partialNext({ closing: false, id });
+export const bumpOverlayLayoutRevision = (closeCorrectionDeltaY = 0) => {
+  sharedValueController?.incrementCloseCorrectionY(closeCorrectionDeltaY);
+};
+
+export const openOverlay = (id: string) => {
+  sharedValueController?.resetCloseCorrectionY();
+  overlayStore.partialNext({ closing: false, id });
+};
 
 export const closeOverlay = () => {
-  requestAnimationFrame(() => overlayStore.partialNext({ closing: true }));
+  requestAnimationFrame(() => {
+    overlayStore.partialNext({ closing: true });
+  });
 };
 
 let actionQueue: Array<() => void | Promise<void>> = [];
@@ -64,8 +75,8 @@ export const scheduleActionOnClose = (action: () => void | Promise<void>) => {
 };
 
 export const finalizeCloseOverlay = () => {
-  sharedValueController?.reset();
   overlayStore.partialNext(DefaultState);
+  sharedValueController?.reset();
 };
 
 export const overlayStore = new StateStore<OverlayState>(DefaultState);