diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -135,13 +135,23 @@
[children, iconColor],
);
- return (
-
-
- {coloredIcon}
-
-
+ const swipeSnake = React.useMemo(
+ () => (
+
+
+ {coloredIcon}
+
+
+ ),
+ [
+ animationContainerStyle,
+ coloredIcon,
+ swipeSnakeContainerStyle,
+ swipeSnakeStyle,
+ ],
);
+
+ return swipeSnake;
}
type Props = {
@@ -247,83 +257,123 @@
[contentStyle, transformContentStyle],
);
- if (!triggerReply && !triggerSidebar) {
- return (
-
- {children}
-
- );
- }
-
const threadColor = `#${props.threadColor}`;
const tinyThreadColor = tinycolor(threadColor);
- const snakes = [];
- if (triggerReply) {
- const replySnakeOpacityInterpolator = isViewer
- ? interpolateOpacityForViewerPrimarySnake
- : interpolateOpacityForNonViewerPrimarySnake;
- snakes.push(
+ const replyIcon = React.useMemo(
+ () => ,
+ [],
+ );
+ const replySwipeSnake = React.useMemo(
+ () => (
-
- ,
- );
- }
- if (triggerReply && triggerSidebar) {
- const sidebarSnakeTranslateXInterpolator = isViewer
- ? interpolateTranslateXForViewerSecondarySnake
- : interpolateTranslateXForNonViewerSecondarySnake;
- const darkerThreadColor = tinyThreadColor
- .darken(tinyThreadColor.isDark() ? 10 : 20)
- .toString();
- snakes.push(
+ {replyIcon}
+
+ ),
+ [isViewer, replyIcon, threadColor, translateX],
+ );
+
+ const sidebarIcon = React.useMemo(
+ () => ,
+ [],
+ );
+ const sidebarSwipeSnakeWithReplySwipeSnake = React.useMemo(
+ () => (
-
- ,
- );
- } else if (triggerSidebar) {
- const sidebarSnakeOpacityInterpolator = isViewer
- ? interpolateOpacityForViewerPrimarySnake
- : interpolateOpacityForNonViewerPrimarySnake;
- snakes.push(
+ {sidebarIcon}
+
+ ),
+ [isViewer, sidebarIcon, tinyThreadColor, translateX],
+ );
+
+ const sidebarSwipeSnakeWithoutReplySwipeSnake = React.useMemo(
+ () => (
-
- ,
- );
- }
+ {sidebarIcon}
+
+ ),
+ [isViewer, sidebarIcon, threadColor, translateX],
+ );
- snakes.push(
-
- {children}
- ,
+ const panGestureHandler = React.useMemo(
+ () => (
+
+ {children}
+
+ ),
+ [children, isViewer, panGestureHandlerStyle, swipeEvent],
);
- return snakes;
+ const swipeableMessage = React.useMemo(() => {
+ if (!triggerReply && !triggerSidebar) {
+ return (
+
+ {children}
+
+ );
+ }
+ const snakes = [];
+ if (triggerReply) {
+ snakes.push(replySwipeSnake);
+ }
+ if (triggerReply && triggerSidebar) {
+ snakes.push(sidebarSwipeSnakeWithReplySwipeSnake);
+ } else if (triggerSidebar) {
+ snakes.push(sidebarSwipeSnakeWithoutReplySwipeSnake);
+ }
+ snakes.push(panGestureHandler);
+ return snakes;
+ }, [
+ children,
+ contentStyle,
+ panGestureHandler,
+ replySwipeSnake,
+ sidebarSwipeSnakeWithReplySwipeSnake,
+ sidebarSwipeSnakeWithoutReplySwipeSnake,
+ triggerReply,
+ triggerSidebar,
+ ]);
+
+ return swipeableMessage;
}
const styles = {