Page MenuHomePhabricator
Files F3507330

D14128.id46422.diff
No OneTemporary
Actions

D14128.id46422.diff
View Options

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';
@@ -45,8 +46,6 @@
} from '../types/layout-types.js';
import type { AnimatedViewStyle } from '../types/styles.js';
-const { Node, Extrapolate, interpolateNode, sub } = Animated;
-
function textMessageItemHeight(
item: ChatTextMessageInfoItemWithHeight,
): number {
@@ -290,7 +289,7 @@
? 0
: 1,
};
- }, [currentTransitionSidebarSourceID, sidebarAnimationType]);
+ }, [currentTransitionSidebarSourceID, sidebarAnimationType, targetPosition]);
return {
style: messageContainerStyle,
@@ -318,7 +317,7 @@
overlay.routeName === RobotextMessageTooltipModalRouteName) &&
overlay.routeKey === getMessageTooltipKey(item)
) {
- return overlay.position;
+ return overlay.positionV2;
}
}
return undefined;
@@ -326,32 +325,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 ||
@@ -359,11 +355,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,

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 8:15 PM (10 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688961
Default Alt Text
D14128.id46422.diff (6 KB)

Event Timeline