fix: freeze message once teleported

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -684,6 +684,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     showMessageOverlay();
   };
 
+  const frozenMessage = useRef(message);
+  const { state, id, closing } = useOverlayController();
+
+  const active = id === message.id;
+
   const messageContext = useCreateMessageContext({
     actionsEnabled,
     alignment,
@@ -703,7 +708,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     members,
-    message,
+    message: active ? frozenMessage.current : message,
     messageContentOrder,
     myMessageTheme: messagesContext.myMessageTheme,
     onLongPress: (payload) => {
@@ -779,16 +784,21 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     videos: attachments.videos,
   });
 
-  const { state, id, closing } = useOverlayController();
-
-  const active = id === message.id;
+  const prevActive = useRef<boolean>(active);
 
   useEffect(() => {
-    if (!active && setNativeScrollability) {
+    if (!active && prevActive.current && setNativeScrollability) {
       setNativeScrollability(true);
     }
+    prevActive.current = active;
   }, [setNativeScrollability, active]);
 
+  useEffect(() => {
+    if (!active) {
+      frozenMessage.current = message;
+    }
+  }, [active, message]);
+
   if (!(isMessageTypeDeleted || messageContentOrder.length)) {
     return null;
   }

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -3,7 +3,6 @@ import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
 
-import { updateOverlayState } from '../../../contexts';
 import {
   MessageContextValue,
   useMessageContext,
@@ -203,6 +202,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
   return (
     <View ref={ref}>
       <View
+        pointerEvents='box-none'
         style={[
           styles.container,
           messageGroupedSingleOrBottom

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -5,9 +5,6 @@ import { BackHandler, Pressable, StyleSheet, useWindowDimensions } from 'react-n
 import Animated, {
   cancelAnimation,
   clamp,
-  Easing,
-  FadeIn,
-  FadeOut,
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -244,7 +241,7 @@ const OverlayHostLayer = () => {
 
     const solvedTop = clamp(anchorY, minTop, maxTop);
     return solvedTop - anchorY;
-  });
+  }, [rect]);
 
   const hostStyle = useAnimatedStyle(() => {
     const target = isActive ? (closing ? 0 : shiftY.value) : 0;
@@ -280,6 +277,9 @@ const OverlayHostLayer = () => {
         {
           translateY: withTiming(target, { duration: 150 }),
         },
+        {
+          scale: backdrop.value,
+        },
       ],
     };
   });
@@ -303,6 +303,9 @@ const OverlayHostLayer = () => {
         {
           translateY: withTiming(target, { duration: 150 }),
         },
+        {
+          scale: backdrop.value,
+        },
       ],
     };
   });
@@ -321,8 +324,6 @@ const OverlayHostLayer = () => {
       ) : null}
 
       <Animated.View
-        entering={FadeIn.duration(ANIMATED_DURATION).easing(Easing.in(Easing.cubic))}
-        exiting={FadeOut.duration(ANIMATED_DURATION).easing(Easing.out(Easing.cubic))}
         style={[
           isActive && rect
             ? {
@@ -354,8 +355,6 @@ const OverlayHostLayer = () => {
         <PortalHost name='message-overlay' style={StyleSheet.absoluteFillObject} />
       </Animated.View>
       <Animated.View
-        entering={FadeIn.duration(ANIMATED_DURATION).easing(Easing.in(Easing.cubic))}
-        exiting={FadeOut.duration(ANIMATED_DURATION).easing(Easing.out(Easing.cubic))}
         style={[
           isActive && rect
             ? {
@@ -374,5 +373,3 @@ const OverlayHostLayer = () => {
 };
 
 type Rect = { x: number; y: number; w: number; h: number } | undefined;
-
-const ANIMATED_DURATION = 150;