Page MenuHomePhabricator
Files F3508516

D14120.id46338.diff
No OneTemporary
Actions

D14120.id46338.diff
View Options

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';
@@ -42,17 +45,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,
@@ -190,12 +183,11 @@
sourceMessage,
initialCoordinates,
messageListVerticalBounds,
- progress,
progressV2,
targetInputBarHeight,
}: AnimatedMessageArgs): {
+style: AnimatedViewStyle,
- +threadColorOverride: ?Node,
+ +threadColorOverride: SharedValue<string | null>,
+isThreadColorDarkOverride: ?boolean,
} {
const chatContext = React.useContext(ChatContext);
@@ -261,26 +253,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,

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 10:39 PM (20 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2687230
Default Alt Text
D14120.id46338.diff (3 KB)

Event Timeline