stream-chat-react-native-core 9.0.0-beta.17 → 9.0.0-beta.19

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -11,6 +11,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
   runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -64,6 +65,9 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
   const topH = useSharedValue<Rect>(undefined);
   const bottomH = useSharedValue<Rect>(undefined);
   const closeCorrectionY = useSharedValue(0);
+  const topVisualY = useSharedValue(0);
+  const messageVisualY = useSharedValue(0);
+  const bottomVisualY = useSharedValue(0);
 
   const topInset = insets.top;
   // Due to edge-to-edge in combination with various libraries, Android sometimes reports
@@ -95,6 +99,9 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           topH.value = undefined;
           bottomH.value = undefined;
           closeCorrectionY.value = 0;
+          topVisualY.value = 0;
+          messageVisualY.value = 0;
+          bottomVisualY.value = 0;
         },
         setBottomH: (rect) => {
           bottomH.value = rect;
@@ -106,7 +113,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           topH.value = rect;
         },
       }),
-    [bottomH, closeCorrectionY, messageH, topH],
+    [bottomH, bottomVisualY, closeCorrectionY, messageH, messageVisualY, topH, topVisualY],
   );
 
   useEffect(() => {
@@ -156,51 +163,111 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     return solvedBottomTop - bottomH.value.y;
   });
 
+  useAnimatedReaction(
+    () => {
+      if (!topH.value) return undefined;
+      const correction = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
+      return topH.value.y + correction;
+    },
+    (next, previous) => {
+      if (next === undefined) {
+        topVisualY.value = 0;
+        return;
+      }
+
+      if (previous === undefined) {
+        topVisualY.value = next;
+        return;
+      }
+
+      topVisualY.value = withSpring(next, { duration: DURATION });
+    },
+    [isActive, closing],
+  );
+
+  useAnimatedReaction(
+    () => {
+      if (!messageH.value) return undefined;
+      const correction = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
+      return messageH.value.y + correction;
+    },
+    (next, previous) => {
+      if (next === undefined) {
+        messageVisualY.value = 0;
+        return;
+      }
+
+      if (previous === undefined) {
+        messageVisualY.value = next;
+        return;
+      }
+
+      messageVisualY.value = withSpring(next, { duration: DURATION });
+    },
+    [isActive, closing],
+  );
+
+  useAnimatedReaction(
+    () => {
+      if (!bottomH.value) return undefined;
+      const correction = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
+      return bottomH.value.y + correction;
+    },
+    (next, previous) => {
+      if (next === undefined) {
+        bottomVisualY.value = 0;
+        return;
+      }
+
+      if (previous === undefined) {
+        bottomVisualY.value = next;
+        return;
+      }
+
+      bottomVisualY.value = withSpring(next, { duration: DURATION });
+    },
+    [isActive, closing],
+  );
+
   const topItemStyle = useAnimatedStyle(() => {
-    if (!topH.value) return { height: 0 };
+    if (!topVisualY.value || !topH.value) return { opacity: 0 };
     const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
       position: 'absolute',
-      top: topH.value.y,
+      top: topVisualY.value,
+      opacity: 1,
       width: topH.value.w,
       ...horizontalPosition,
     };
   });
 
   const topItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
     return {
-      transform: [
-        { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
-      ],
+      transform: [{ scale: backdrop.value }],
     };
-  }, [isActive, closing]);
+  });
 
   const bottomItemStyle = useAnimatedStyle(() => {
-    if (!bottomH.value) return { height: 0 };
+    if (!bottomVisualY.value || !bottomH.value) return { opacity: 0 };
     const horizontalPosition = I18nManager.isRTL
       ? { right: bottomH.value.x }
       : { left: bottomH.value.x };
     return {
       height: bottomH.value.h,
       position: 'absolute',
-      top: bottomH.value.y,
+      top: bottomVisualY.value,
+      opacity: 1,
       width: bottomH.value.w,
       ...horizontalPosition,
     };
   });
 
   const bottomItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
     return {
-      transform: [
-        { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
-      ],
+      transform: [{ scale: backdrop.value }],
     };
-  }, [isActive, closing]);
+  });
 
   const hostStyle = useAnimatedStyle(() => {
     if (!messageH.value) return { height: 0 };
@@ -208,23 +275,11 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
       height: messageH.value.h,
       left: messageH.value.x,
       position: 'absolute',
-      top: messageH.value.y,
+      top: messageVisualY.value,
       width: messageH.value.w,
     };
   });
 
-  const hostTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-
-    return {
-      transform: [
-        {
-          translateY: withSpring(target, { duration: DURATION }),
-        },
-      ],
-    };
-  }, [isActive, closing]);
-
   const tap = useMemo(
     () =>
       Gesture.Tap()
@@ -288,7 +343,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
 
           <Animated.View
             pointerEvents='box-none'
-            style={[hostStyle, hostTranslateStyle]}
+            style={hostStyle}
             testID='message-overlay-message'
           >
             <PortalHost name='message-overlay' style={StyleSheet.absoluteFillObject} />

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -75,6 +75,12 @@ jest.mock('react-native-reanimated', () => {
     },
     clamp: (value: number, min: number, max: number) => Math.min(Math.max(value, min), max),
     runOnJS: (fn: (...args: unknown[]) => unknown) => fn,
+    useAnimatedReaction: (
+      prepare: () => unknown,
+      react: (current: unknown, previous: unknown) => void,
+    ) => {
+      react(prepare(), undefined);
+    },
     useAnimatedStyle: (updater: () => unknown) => updater(),
     useDerivedValue: (updater: () => unknown) => ({ value: updater() }),
     useSharedValue: useStableSharedValue,
@@ -175,25 +181,26 @@ describe('MessageOverlayHostLayer', () => {
     expect(StyleSheet.flatten(topSlot.props.style)).toMatchObject({
       height: TOP_RECT.h,
       left: TOP_RECT.x,
+      opacity: 1,
       position: 'absolute',
-      top: TOP_RECT.y,
-      transform: [{ scale: 1 }, { translateY: 38 }],
+      top: 38,
+      transform: [{ scale: 1 }],
       width: TOP_RECT.w,
     });
     expect(StyleSheet.flatten(messageSlot.props.style)).toMatchObject({
       height: MESSAGE_RECT.h,
       left: MESSAGE_RECT.x,
       position: 'absolute',
-      top: MESSAGE_RECT.y,
-      transform: [{ translateY: 38 }],
+      top: 38,
       width: MESSAGE_RECT.w,
     });
     expect(StyleSheet.flatten(bottomSlot.props.style)).toMatchObject({
       height: BOTTOM_RECT.h,
       left: BOTTOM_RECT.x,
+      opacity: 1,
       position: 'absolute',
-      top: BOTTOM_RECT.y,
-      transform: [{ scale: 1 }, { translateY: -12 }],
+      top: 88,
+      transform: [{ scale: 1 }],
       width: BOTTOM_RECT.w,
     });
   });
@@ -227,7 +234,8 @@ describe('MessageOverlayHostLayer', () => {
 
     expect(StyleSheet.flatten(screen.getByTestId('message-overlay-top').props.style)).toMatchObject(
       {
-        height: 0,
+        opacity: 0,
+        transform: [{ scale: 0 }],
       },
     );
     expect(
@@ -236,7 +244,8 @@ describe('MessageOverlayHostLayer', () => {
     expect(
       StyleSheet.flatten(screen.getByTestId('message-overlay-bottom').props.style),
     ).toMatchObject({
-      height: 0,
+      opacity: 0,
+      transform: [{ scale: 0 }],
     });
   });
 });

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.17"
+  "version": "9.0.0-beta.19"
 }