feat: PoC for teleportation aware views

isekovanic · isekovanic · commit 77ef97e48c99 · 2026-03-04T02:09:04.000+01:00
diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -15,6 +15,7 @@ import {
   useTranslationContext,
   MessageActionsParams,
   ChannelAvatar,
+  PortalWhileClosingView,
 } from 'stream-chat-react-native';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -236,7 +237,12 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         thread={selectedThread}
         maximumMessageLimit={messageListPruning}
       >
-        <ChannelHeader channel={channel} />
+        <PortalWhileClosingView
+          portalHostName='overlay-header'
+          portalName='channel-header'
+        >
+          <ChannelHeader channel={channel} />
+        </PortalWhileClosingView>
         {messageListImplementation === 'flashlist' ? (
           <MessageFlashList
             onThreadSelect={onThreadSelect}
diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
@@ -56,7 +56,6 @@ import {
 import { useAttachmentPickerState } from '../../hooks/useAttachmentPickerState';
 import { useKeyboardVisibility } from '../../hooks/useKeyboardVisibility';
 import { useStateStore } from '../../hooks/useStateStore';
-import { setOverlayComposerH } from '../../state-store';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
@@ -362,7 +361,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     <MicPositionProvider value={micPositionContextValue}>
       <Animated.View layout={LinearTransition.duration(200)}>
         <PortalWhileClosingView
-          placeholderHeight={height}
           portalHostName='overlay-composer'
           portalName='message-input-composer'
         >
@@ -372,7 +370,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                 layout: { height: newHeight },
               },
             }) => {
-              setOverlayComposerH(newHeight);
               messageInputHeightStore.setHeight(
                 messageInputFloating ? newHeight + BOTTOM_OFFSET : newHeight,
               );
diff --git a/package/src/components/UIComponents/PortalWhileClosingView.tsx b/package/src/components/UIComponents/PortalWhileClosingView.tsx
@@ -1,49 +1,92 @@
-import React, { ReactNode, useMemo, useState } from 'react';
-import { View } from 'react-native';
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
 
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import { useOverlayController } from '../../state-store';
+import { setClosingPortalLayout, useOverlayController } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
   children: ReactNode;
-  placeholderHeight?: number;
   portalHostName: string;
   portalName: string;
 };
 
 export const PortalWhileClosingView = ({
   children,
-  placeholderHeight,
   portalHostName,
   portalName,
 }: PortalWhileClosingViewProps) => {
   const { closing } = useOverlayController();
+  const containerRef = useRef<View | null>(null);
+  const absolutePositionRef = useRef<{ x: number; y: number } | null>(null);
+  const measuredSizeRef = useRef<{ h: number; w: number }>({ h: 0, w: 0 });
   const [measuredHeight, setMeasuredHeight] = useState(0);
-  const shouldMeasure = placeholderHeight == null;
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const insets = useSafeAreaInsets();
 
-  const resolvedPlaceholderHeight = useMemo(
-    () => placeholderHeight ?? measuredHeight,
-    [placeholderHeight, measuredHeight],
-  );
+  const resolvedPlaceholderHeight = useMemo(() => measuredHeight, [measuredHeight]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const measureAbsolutePosition = () => {
+      containerRef.current?.measureInWindow((x, y) => {
+        if (cancelled) return;
+        const absolute = {
+          x,
+          y: y + (Platform.OS === 'android' ? insets.top : 0),
+        };
+
+        absolutePositionRef.current = absolute;
+
+        const { h, w } = measuredSizeRef.current;
+        if (!w || !h) return;
+
+        setClosingPortalLayout(portalHostName, {
+          ...absolute,
+          h,
+          w,
+        });
+      });
+    };
+
+    // Measure once after mount and layout settle.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(measureAbsolutePosition);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [insets.top, portalHostName]);
 
   return (
     <>
       <Portal hostName={closing ? portalHostName : undefined} name={portalName}>
-        {shouldMeasure ? (
-          <View
-            onLayout={(event) => {
-              setMeasuredHeight(event.nativeEvent.layout.height);
-            }}
-          >
-            {children}
-          </View>
-        ) : (
-          children
-        )}
+        <View
+          collapsable={false}
+          ref={containerRef}
+          onLayout={(event) => {
+            const { height, width } = event.nativeEvent.layout;
+            setMeasuredHeight(height);
+            setMeasuredWidth(width);
+            measuredSizeRef.current = { h: height, w: width };
+
+            const absolute = absolutePositionRef.current;
+            if (!absolute) return;
+
+            setClosingPortalLayout(portalHostName, { ...absolute, h: height, w: width });
+          }}
+        >
+          {children}
+        </View>
       </Portal>
       {closing && resolvedPlaceholderHeight > 0 ? (
-        <View pointerEvents='none' style={{ height: resolvedPlaceholderHeight, width: '100%' }} />
+        <View
+          pointerEvents='none'
+          style={{ height: resolvedPlaceholderHeight, width: measuredWidth || '100%' }}
+        />
       ) : null}
     </>
   );
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
@@ -183,6 +183,7 @@ export * from './UIComponents/StreamBottomSheetModalFlatList';
 export * from './UIComponents/ImageBackground';
 export * from './UIComponents/Spinner';
 export * from './UIComponents/SwipableWrapper';
+export * from './UIComponents/PortalWhileClosingView';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
diff --git a/package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx b/package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  SharedValue,
   clamp,
   runOnJS,
   useAnimatedStyle,
@@ -17,18 +18,56 @@ import {
   finalizeCloseOverlay,
   registerOverlaySharedValueController,
   Rect,
+  useClosingPortalLayouts,
   useOverlayController,
 } from '../../state-store';
 
 const DURATION = 300;
+const ClosingPortalHostSlot = ({
+  closeCoverOpacity,
+  hostName,
+  rect,
+}: {
+  closeCoverOpacity: SharedValue<number>;
+  hostName: string;
+  rect: Exclude<Rect, undefined>;
+}) => {
+  const layout = useSharedValue<Rect>(rect);
+
+  useEffect(() => {
+    layout.value = rect;
+  }, [layout, rect]);
+
+  const style = useAnimatedStyle(() => {
+    const value = layout.value;
+    if (!value) return { opacity: closeCoverOpacity.value };
+
+    return {
+      height: value.h,
+      left: value.x,
+      opacity: closeCoverOpacity.value,
+      top: value.y,
+      width: value.w,
+    };
+  });
+
+  console.log('RENDERING: ', hostName);
+
+  return (
+    <Animated.View pointerEvents='box-none' style={[styles.overlayClosingSlot, style]}>
+      <PortalHost name={hostName} style={StyleSheet.absoluteFillObject} />
+    </Animated.View>
+  );
+};
+
 export const MessageOverlayHostLayer = () => {
   const { id, closing } = useOverlayController();
+  const closingPortalLayouts = useClosingPortalLayouts();
   const insets = useSafeAreaInsets();
   const { height: screenH } = useWindowDimensions();
   const messageH = useSharedValue<Rect>(undefined);
   const topH = useSharedValue<Rect>(undefined);
   const bottomH = useSharedValue<Rect>(undefined);
-  const composerH = useSharedValue(0);
   const closeCorrectionY = useSharedValue(0);
 
   const topInset = insets.top;
@@ -65,17 +104,14 @@ export const MessageOverlayHostLayer = () => {
         setBottomH: (rect) => {
           bottomH.value = rect;
         },
-        setComposerH: (height) => {
-          composerH.value = height;
-        },
         setMessageH: (rect) => {
           messageH.value = rect;
         },
         setTopH: (rect) => {
           topH.value = rect;
         },
       }),
-    [bottomH, closeCorrectionY, composerH, messageH, topH],
+    [bottomH, closeCorrectionY, messageH, topH],
   );
 
   useEffect(() => {
@@ -91,12 +127,6 @@ export const MessageOverlayHostLayer = () => {
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: backdrop.value,
   }));
-  const closeCoverStyle = useAnimatedStyle(() => ({
-    opacity: closeCoverOpacity.value,
-  }));
-  const composerSlotStyle = useAnimatedStyle(() => ({
-    height: composerH.value,
-  }));
 
   const messageShiftY = useDerivedValue(() => {
     if (!messageH.value || !topH.value || !bottomH.value) return 0;
@@ -231,6 +261,8 @@ export const MessageOverlayHostLayer = () => {
       runOnJS(closeOverlay)();
     });
 
+  console.log('TEST', Object.entries(closingPortalLayouts));
+
   return (
     <GestureDetector gesture={tap}>
       <View pointerEvents='box-none' style={StyleSheet.absoluteFill}>
@@ -259,38 +291,28 @@ export const MessageOverlayHostLayer = () => {
           </Animated.View>
         </View>
 
-        <Animated.View pointerEvents='box-none' style={[styles.overlayHeaderSlot, closeCoverStyle]}>
-          <PortalHost name='overlay-header' style={StyleSheet.absoluteFillObject} />
-        </Animated.View>
-
-        <Animated.View
-          pointerEvents='box-none'
-          style={[styles.overlayComposerSlot, closeCoverStyle, composerSlotStyle]}
-        >
-          <PortalHost name='overlay-composer' style={StyleSheet.absoluteFillObject} />
-        </Animated.View>
+        {Object.entries(closingPortalLayouts).map(([hostName, rect]) => {
+          if (!rect) return null;
+          return (
+            <ClosingPortalHostSlot
+              closeCoverOpacity={closeCoverOpacity}
+              hostName={hostName}
+              key={hostName}
+              rect={rect}
+            />
+          );
+        })}
       </View>
     </GestureDetector>
   );
 };
 
 const styles = StyleSheet.create({
-  overlayComposerSlot: {
-    bottom: 0,
+  overlayClosingSlot: {
     elevation: 20,
-    left: 0,
     position: 'absolute',
-    right: 0,
-    width: '100%',
     zIndex: 20,
   },
-  overlayHeaderSlot: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'flex-start',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-  },
   shadow3: {
     overflow: 'visible',
     ...Platform.select({
diff --git a/package/src/state-store/message-overlay-store.ts b/package/src/state-store/message-overlay-store.ts
