fix: KCV onLayout issue (#3531)

## 🎯 Goal

This PR addresses a very weird issue that could be noticed in some apps,
where `onLayout` was not being invoked by the child view wrapper at all,
making it impossible to remeasure translating views while the context
menu is open (for example the keyboard closing).

To combat this, we add one more measurement vector through invoking the
sync function when we begin closing the context menu as well. Since this
runs asynchronously and is controlled through shared values, the
overhead is almost non-existent and we make sure that we measure as late
as possible.

## 🛠 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/ExpoMessaging/app.json

@@ -101,7 +101,6 @@
           }
         }
       ],
-      "./plugins/keyboardInsetMainActivityListener.js",
       "./plugins/opSqliteSwiftPlugin.js",
       "expo-sharing"
     ]

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -13,7 +13,7 @@ import { AppContext } from '../../../context/AppContext';
 import { useHeaderHeight } from '@react-navigation/elements';
 import InputButtons from '../../../components/InputButtons';
 import { MessageLocation } from '../../../components/LocationSharing/MessageLocation';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 export default function ChannelScreen() {
   const { client } = useChatContext();
@@ -74,7 +74,7 @@ export default function ChannelScreen() {
         audioRecordingEnabled={true}
         channel={channel}
         onPressMessage={onPressMessage}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? headerHeight : undefined}
+        keyboardVerticalOffset={headerHeight}
         MessageLocation={MessageLocation}
         thread={thread}
       >

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -12,6 +12,7 @@ import {
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
   useHasActiveId,
+  useIsOverlayClosing,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -116,9 +117,10 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
   const placeholderLayout = useSharedValue({ h: 0, w: 0 });
   const insets = useSafeAreaInsets();
   const hasActiveId = useHasActiveId();
+  const isClosing = useIsOverlayClosing();
 
   const syncPortalLayout = useStableCallback(() => {
-    if (!hasActiveId) {
+    if (!hasActiveId && !isClosing) {
       return;
     }
 
@@ -143,10 +145,10 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
   });
 
   useEffect(() => {
-    if (hasActiveId) {
+    if (hasActiveId || isClosing) {
       syncPortalLayout();
     }
-  }, [insets.bottom, hasActiveId, syncPortalLayout]);
+  }, [insets.bottom, isClosing, hasActiveId, syncPortalLayout]);
 
   return useMemo(
     () => ({ syncPortalLayout, containerRef, placeholderLayout }),