diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js
--- a/native/chat/inner-text-message.react.js
+++ b/native/chat/inner-text-message.react.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { type SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
@@ -26,8 +26,6 @@
 import { colors, useColors } from '../themes/colors.js';
 import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';
 
-const { Node } = Animated;
-
 function dummyNodeForTextMessageHeightMeasurement(
   text: string,
   editedLabel?: ?string,
@@ -68,7 +66,7 @@
   +item: ChatTextMessageInfoItemWithHeight,
   +onPress: () => void,
   +messageRef?: (message: ?React.ElementRef<typeof View>) => void,
-  +threadColorOverride?: ?Node,
+  +threadColorOverride?: SharedValue<string | null>,
   +isThreadColorDarkOverride?: ?boolean,
 };
 function InnerTextMessage(props: Props): React.Node {
@@ -83,18 +81,13 @@
     ? activeTheme === 'dark'
     : props.isThreadColorDarkOverride ?? colorIsDark(item.threadInfo.color);
 
-  const messageStyle = React.useMemo(
+  const messageStyle = useAnimatedStyle(
     () => ({
       backgroundColor: !isViewer
         ? boundColors.listChatBubble
-        : props.threadColorOverride ?? `#${item.threadInfo.color}`,
+        : props.threadColorOverride?.value ?? `#${item.threadInfo.color}`,
     }),
-    [
-      boundColors.listChatBubble,
-      isViewer,
-      item.threadInfo.color,
-      props.threadColorOverride,
-    ],
+    [boundColors.listChatBubble, isViewer, item.threadInfo.color],
   );
 
   const cornerStyle = React.useMemo(
diff --git a/native/chat/utils.js b/native/chat/utils.js
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -5,7 +5,10 @@
 import Animated, {
   type SharedValue,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
+  useDerivedValue,
+  interpolateColor,
 } from 'react-native-reanimated';
 
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
@@ -43,17 +46,7 @@
 } from '../types/layout-types.js';
 import type { AnimatedViewStyle } from '../types/styles.js';
 
-const {
-  Node,
-  Extrapolate,
-  interpolateNode,
-  interpolateColors,
-  block,
-  call,
-  eq,
-  cond,
-  sub,
-} = Animated;
+const { Node, Extrapolate, interpolateNode, sub } = Animated;
 
 function textMessageItemHeight(
   item: ChatTextMessageInfoItemWithHeight,
@@ -191,12 +184,11 @@
   sourceMessage,
   initialCoordinates,
   messageListVerticalBounds,
-  progress,
   progressV2,
   targetInputBarHeight,
 }: AnimatedMessageArgs): {
   +style: AnimatedViewStyle,
-  +threadColorOverride: ?Node,
+  +threadColorOverride: SharedValue<string | null>,
   +isThreadColorDarkOverride: ?boolean,
 } {
   const chatContext = React.useContext(ChatContext);
@@ -262,26 +254,23 @@
     }
   }, [sourceMessage.threadInfo.color, targetColor]);
 
-  const threadColorOverride = React.useMemo(() => {
+  const threadColorOverride = useDerivedValue(() => {
     if (
       sourceMessage.messageShapeType !== 'text' ||
       !currentTransitionSidebarSourceID
     ) {
       return null;
     }
-    return block([
-      cond(eq(progress, 1), call([], setThreadColorBrightness)),
-      interpolateColors(progress, {
-        inputRange: [0, 1],
-        outputColorRange: [
-          `#${targetColor}`,
-          `#${sourceMessage.threadInfo.color}`,
-        ],
-      }),
-    ]);
+    if (progressV2.value === 1) {
+      runOnJS(setThreadColorBrightness)();
+    }
+    return interpolateColor(
+      progressV2.value,
+      [0, 1],
+      [`#${targetColor}`, `#${sourceMessage.threadInfo.color}`],
+    );
   }, [
     currentTransitionSidebarSourceID,
-    progress,
     setThreadColorBrightness,
     sourceMessage.messageShapeType,
     sourceMessage.threadInfo.color,