diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -34,11 +34,7 @@
 import { InputStateContext } from '../input/input-state.js';
 import { useColors } from '../themes/colors.js';
 import type { ChatComposedMessageInfoItemWithHeight } from '../types/chat-types.js';
-import {
-  type AnimatedStyleObj,
-  type ViewStyle,
-  AnimatedView,
-} from '../types/styles.js';
+import { type ViewStyle, AnimatedView } from '../types/styles.js';
 import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 
 type SwipeOptions = 'reply' | 'sidebar' | 'both' | 'none';
@@ -118,6 +114,10 @@
       [isViewer],
     );
 
+    const deliveryIconAnimatedStyle = useAnimatedStyle(() => ({
+      opacity: deliveryIconOpacity.value,
+    }));
+
     const deliveryIcon = React.useMemo(() => {
       if (!isViewer) {
         return undefined;
@@ -141,10 +141,8 @@
         deliveryIconName = 'circle';
       }
 
-      const animatedStyle: AnimatedStyleObj = { opacity: deliveryIconOpacity };
-
       return (
-        <AnimatedView style={[styles.iconContainer, animatedStyle]}>
+        <AnimatedView style={[styles.iconContainer, deliveryIconAnimatedStyle]}>
           <Icon
             name={deliveryIconName}
             style={[styles.icon, { color: deliveryIconColor }]}
@@ -153,7 +151,7 @@
       );
     }, [
       colors.redText,
-      deliveryIconOpacity,
+      deliveryIconAnimatedStyle,
       id,
       isViewer,
       item?.localMessageInfo?.outboundP2PMessageIDs,
@@ -236,12 +234,12 @@
       shouldDisplayPinIndicator,
     ]);
 
-    const messageBoxStyle = React.useMemo(
+    const messageBoxStyle = useAnimatedStyle(
       () => ({
-        opacity: contentAndHeaderOpacity,
+        opacity: contentAndHeaderOpacity.value,
         maxWidth: composedMessageMaxWidth,
       }),
-      [composedMessageMaxWidth, contentAndHeaderOpacity],
+      [composedMessageMaxWidth],
     );
 
     const messageBox = React.useMemo(
@@ -316,12 +314,9 @@
       item.messageShapeType,
     ]);
 
-    const messageHeaderStyle = React.useMemo(
-      () => ({
-        opacity: contentAndHeaderOpacity,
-      }),
-      [contentAndHeaderOpacity],
-    );
+    const messageHeaderStyle = useAnimatedStyle(() => ({
+      opacity: contentAndHeaderOpacity.value,
+    }));
 
     const animatedContainerStyle = React.useMemo(
       () => [containerStyle, editedMessageStyle],
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -3,6 +3,7 @@
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
+import { useAnimatedStyle } from 'react-native-reanimated';
 
 import {
   chatMessageItemKey,
@@ -214,6 +215,9 @@
   const onLayout = React.useCallback(() => {}, []);
 
   const contentAndHeaderOpacity = useContentAndHeaderOpacity(item);
+  const contentAndHeaderOpacityStyle = useAnimatedStyle(() => {
+    return { opacity: contentAndHeaderOpacity.value };
+  });
 
   const viewStyle: { height?: number } = {};
   if (!__DEV__) {
@@ -224,11 +228,11 @@
 
   return (
     <View {...viewProps}>
-      <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
+      <AnimatedView style={contentAndHeaderOpacityStyle}>
         {timestamp}
       </AnimatedView>
       <View onLayout={onLayout} ref={viewRef} style={viewStyle}>
-        <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
+        <AnimatedView style={contentAndHeaderOpacityStyle}>
           <InnerRobotextMessage
             item={item}
             onPress={onPress}
diff --git a/native/chat/utils.js b/native/chat/utils.js
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -2,13 +2,14 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import Animated, {
+import {
   type SharedValue,
   interpolate,
   runOnJS,
   useAnimatedStyle,
   useDerivedValue,
   interpolateColor,
+  Extrapolate,
 } from 'react-native-reanimated';
 
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
@@ -46,8 +47,6 @@
 } from '../types/layout-types.js';
 import type { AnimatedViewStyle } from '../types/styles.js';
 
-const { Node, Extrapolate, interpolateNode, sub } = Animated;
-
 function textMessageItemHeight(
   item: ChatTextMessageInfoItemWithHeight,
 ): number {
@@ -291,7 +290,7 @@
           ? 0
           : 1,
     };
-  }, [currentTransitionSidebarSourceID, sidebarAnimationType]);
+  }, [currentTransitionSidebarSourceID, sidebarAnimationType, targetPosition]);
 
   return {
     style: messageContainerStyle,
@@ -319,7 +318,7 @@
         overlay.routeName === RobotextMessageTooltipModalRouteName) &&
       overlay.routeKey === getMessageTooltipKey(item)
     ) {
-      return overlay.position;
+      return overlay.positionV2;
     }
   }
   return undefined;
@@ -327,32 +326,29 @@
 
 function useContentAndHeaderOpacity(
   item: ChatMessageInfoItemWithHeight,
-): number | Node {
+): SharedValue<number> {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
-  return React.useMemo(
-    () =>
-      overlayPosition &&
+  return useDerivedValue(() => {
+    return overlayPosition &&
       chatContext?.sidebarAnimationType === 'move_source_message'
-        ? sub(
-            1,
-            interpolateNode(overlayPosition, {
-              inputRange: [0.05, 0.06],
-              outputRange: [0, 1],
-              extrapolate: Extrapolate.CLAMP,
-            }),
+      ? 1 -
+          interpolate(
+            overlayPosition.value,
+            [0.05, 0.06],
+            [0, 1],
+            Extrapolate.CLAMP,
           )
-        : 1,
-    [chatContext?.sidebarAnimationType, overlayPosition],
-  );
+      : 1;
+  }, [chatContext?.sidebarAnimationType, overlayPosition]);
 }
 
 function useDeliveryIconOpacity(
   item: ChatMessageInfoItemWithHeight,
-): number | Node {
+): SharedValue<number> {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
-  return React.useMemo(() => {
+  return useDerivedValue(() => {
     if (
       !overlayPosition ||
       !chatContext?.currentTransitionSidebarSourceID ||
@@ -360,11 +356,12 @@
     ) {
       return 1;
     }
-    return interpolateNode(overlayPosition, {
-      inputRange: [0.05, 0.06, 1],
-      outputRange: [1, 0, 0],
-      extrapolate: Extrapolate.CLAMP,
-    });
+    return interpolate(
+      overlayPosition.value,
+      [0.05, 0.06, 1],
+      [1, 0, 0],
+      Extrapolate.CLAMP,
+    );
   }, [
     chatContext?.currentTransitionSidebarSourceID,
     chatContext?.sidebarAnimationType,