diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
index aeba80b77..4ca0e18c1 100644
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -1,289 +1,289 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Feather.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 
 import {
   clusterEndHeight,
   composedMessageStyle,
   avatarOffset,
 } from './chat-constants.js';
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { FailedSend } from './failed-send.react.js';
 import { InlineEngagement } from './inline-engagement.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { useNavigateToSidebar } from './sidebar-navigation.js';
 import SwipeableMessage from './swipeable-message.react.js';
 import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { type Colors, useColors } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
 import { type AnimatedStyleObj, AnimatedView } from '../types/styles.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type SwipeOptions = 'reply' | 'sidebar' | 'both' | 'none';
 type BaseProps = {
   ...React.ElementConfig<typeof View>,
   +item: ChatMessageInfoItemWithHeight,
   +sendFailed: boolean,
   +focused: boolean,
   +swipeOptions: SwipeOptions,
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +composedMessageMaxWidth: number,
   +colors: Colors,
   +contentAndHeaderOpacity: number | Node,
   +deliveryIconOpacity: number | Node,
   // withInputState
   +inputState: ?InputState,
   +navigateToSidebar: () => mixed,
   +shouldRenderAvatars: boolean,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   render() {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const {
       item,
       sendFailed,
       focused,
       swipeOptions,
       children,
       composedMessageMaxWidth,
       colors,
       inputState,
       navigateToSidebar,
       contentAndHeaderOpacity,
       deliveryIconOpacity,
       shouldRenderAvatars,
       ...viewProps
     } = this.props;
     const { id, creator } = item.messageInfo;
     const { hasBeenEdited } = item;
 
     const { isViewer } = creator;
     const alignStyle = isViewer
       ? styles.rightChatBubble
       : styles.leftChatBubble;
 
     let containerMarginBottom = 5;
     if (item.endsCluster) {
       containerMarginBottom += clusterEndHeight;
     }
 
     const highlightStyle =
       id && this.props.inputState?.editState.editedMessage?.id === id
         ? { backgroundColor: `#${item.threadInfo.color}40` }
         : null;
 
     const containerStyle = [
       { marginBottom: containerMarginBottom },
       highlightStyle,
     ];
     const swipeableMessageBoxStyle = [
       styles.swipeableContainer,
       { maxWidth: composedMessageMaxWidth },
     ];
 
     const messageBoxContainerStyle = [styles.messageBoxContainer];
     const positioningStyle = isViewer
       ? styles.rightChatContainer
       : styles.leftChatContainer;
     messageBoxContainerStyle.push(positioningStyle);
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconName;
       let deliveryIconColor = `#${item.threadInfo.color}`;
       if (id !== null && id !== undefined) {
         deliveryIconName = 'check-circle';
       } else if (sendFailed) {
         deliveryIconName = 'x-circle';
         deliveryIconColor = colors.redText;
         failedSendInfo = <FailedSend item={item} />;
       } else {
         deliveryIconName = 'circle';
       }
 
       const animatedStyle: AnimatedStyleObj = { opacity: deliveryIconOpacity };
       deliveryIcon = (
         <AnimatedView style={[styles.iconContainer, animatedStyle]}>
           <Icon
             name={deliveryIconName}
             style={[styles.icon, { color: deliveryIconColor }]}
           />
         </AnimatedView>
       );
     }
 
     const triggerReply =
       swipeOptions === 'reply' || swipeOptions === 'both'
         ? this.reply
         : undefined;
     const triggerSidebar =
       swipeOptions === 'sidebar' || swipeOptions === 'both'
         ? navigateToSidebar
         : undefined;
 
     let avatar;
     if (!isViewer && item.endsCluster && shouldRenderAvatars) {
       avatar = (
         <View style={styles.avatarContainer}>
           <UserAvatar size="small" userID={item.messageInfo.creator.id} />
         </View>
       );
     } else if (!isViewer && shouldRenderAvatars) {
       avatar = <View style={styles.avatarOffset} />;
     }
 
     const messageBox = (
       <View style={messageBoxContainerStyle}>
         <SwipeableMessage
           triggerReply={triggerReply}
           triggerSidebar={triggerSidebar}
           isViewer={isViewer}
-          messageBoxStyle={swipeableMessageBoxStyle}
+          contentStyle={swipeableMessageBoxStyle}
           threadColor={item.threadInfo.color}
         >
           {avatar}
           <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
             {children}
           </AnimatedView>
         </SwipeableMessage>
       </View>
     );
 
     let inlineEngagement = null;
     const label = getMessageLabel(hasBeenEdited, item.threadInfo);
     if (
       item.threadCreatedFromMessage ||
       Object.keys(item.reactions).length > 0 ||
       label
     ) {
       const positioning = isViewer ? 'right' : 'left';
       inlineEngagement = (
         <InlineEngagement
           threadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           positioning={positioning}
           shouldRenderAvatars={shouldRenderAvatars}
           label={label}
         />
       );
     }
 
     return (
       <View {...viewProps}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <MessageHeader item={item} focused={focused} display="lowContrast" />
         </AnimatedView>
         <View style={containerStyle}>
           <View style={styles.alignment}>
             <View style={[styles.content, alignStyle]}>
               {deliveryIcon}
               {messageBox}
             </View>
             {failedSendInfo}
             {inlineEngagement}
           </View>
         </View>
       </View>
     );
   }
 
   reply = () => {
     const { inputState, item } = this.props;
     invariant(inputState, 'inputState should be set in reply');
     invariant(item.messageInfo.text, 'text should be set in reply');
     inputState.editInputMessage({
       message: createMessageReply(item.messageInfo.text),
       mode: 'prepend',
     });
   };
 }
 
 const styles = StyleSheet.create({
   alignment: {
     marginLeft: composedMessageStyle.marginLeft,
     marginRight: composedMessageStyle.marginRight,
   },
   avatarContainer: {
     marginRight: 8,
   },
   avatarOffset: {
     width: avatarOffset,
   },
   content: {
     alignItems: 'center',
     flexDirection: 'row-reverse',
   },
   icon: {
     fontSize: 16,
     textAlign: 'center',
   },
   iconContainer: {
     marginLeft: 2,
     width: 16,
   },
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
   leftChatContainer: {
     alignItems: 'flex-start',
   },
   messageBoxContainer: {
     flex: 1,
     marginRight: 5,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
   rightChatContainer: {
     alignItems: 'flex-end',
   },
   swipeableContainer: {
     alignItems: 'flex-end',
     flexDirection: 'row',
   },
 });
 
 const ConnectedComposedMessage: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
     const composedMessageMaxWidth = useComposedMessageMaxWidth();
     const colors = useColors();
     const inputState = React.useContext(InputStateContext);
     const navigateToSidebar = useNavigateToSidebar(props.item);
     const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
     const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
     const shouldRenderAvatars = useShouldRenderAvatars();
 
     return (
       <ComposedMessage
         {...props}
         composedMessageMaxWidth={composedMessageMaxWidth}
         colors={colors}
         inputState={inputState}
         navigateToSidebar={navigateToSidebar}
         contentAndHeaderOpacity={contentAndHeaderOpacity}
         deliveryIconOpacity={deliveryIconOpacity}
         shouldRenderAvatars={shouldRenderAvatars}
       />
     );
   });
 
 export default ConnectedComposedMessage;
diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
index 36b98a7e5..35ef85458 100644
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -1,358 +1,358 @@
 // @flow
 
 import type { IconProps } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
 import * as React from 'react';
 import { View } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedGestureHandler,
   useSharedValue,
   useAnimatedStyle,
   runOnJS,
   withSpring,
   interpolate,
   cancelAnimation,
   Extrapolate,
   type SharedValue,
 } from 'react-native-reanimated';
 import tinycolor from 'tinycolor2';
 
 import { useMessageListScreenWidth } from './composed-message-width.js';
 import CommIcon from '../components/comm-icon.react.js';
 import { colors } from '../themes/colors.js';
 import type { ViewStyle } from '../types/styles.js';
 
 const primaryThreshold = 40;
 const secondaryThreshold = 120;
 
 function dividePastDistance(value, distance, factor) {
   'worklet';
   const absValue = Math.abs(value);
   if (absValue < distance) {
     return value;
   }
   const absFactor = value >= 0 ? 1 : -1;
   return absFactor * (distance + (absValue - distance) / factor);
 }
 
 function makeSpringConfig(velocity) {
   'worklet';
   return {
     stiffness: 257.1370588235294,
     damping: 19.003038357561845,
     mass: 1,
     overshootClamping: true,
     restDisplacementThreshold: 0.001,
     restSpeedThreshold: 0.001,
     velocity,
   };
 }
 
 function interpolateOpacityForViewerPrimarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [-20, -5], [1, 0], Extrapolate.CLAMP);
 }
 function interpolateOpacityForNonViewerPrimarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [5, 20], [0, 1], Extrapolate.CLAMP);
 }
 function interpolateTranslateXForViewerSecondarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [-130, -120, -60, 0], [-130, -120, -5, 20]);
 }
 function interpolateTranslateXForNonViewerSecondarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [0, 80, 120, 130], [0, 30, 120, 130]);
 }
 
 type SwipeSnakeProps<IconGlyphs: string> = {
   +isViewer: boolean,
   +translateX: SharedValue<number>,
   +color: string,
   +children: React.Element<React.ComponentType<IconProps<IconGlyphs>>>,
   +opacityInterpolator?: number => number, // must be worklet
   +translateXInterpolator?: number => number, // must be worklet
 };
 function SwipeSnake<IconGlyphs: string>(
   props: SwipeSnakeProps<IconGlyphs>,
 ): React.Node {
   const { translateX, isViewer, opacityInterpolator, translateXInterpolator } =
     props;
   const transformStyle = useAnimatedStyle(() => {
     const opacity = opacityInterpolator
       ? opacityInterpolator(translateX.value)
       : undefined;
     const translate = translateXInterpolator
       ? translateXInterpolator(translateX.value)
       : translateX.value;
     return {
       transform: [
         {
           translateX: translate,
         },
       ],
       opacity,
     };
   }, [isViewer, translateXInterpolator, opacityInterpolator]);
 
   const animationPosition = isViewer ? styles.right0 : styles.left0;
   const animationContainerStyle = React.useMemo(() => {
     return [styles.animationContainer, animationPosition];
   }, [animationPosition]);
 
   const iconPosition = isViewer ? styles.left0 : styles.right0;
   const swipeSnakeContainerStyle = React.useMemo(() => {
     return [styles.swipeSnakeContainer, transformStyle, iconPosition];
   }, [transformStyle, iconPosition]);
 
   const iconAlign = isViewer ? styles.alignStart : styles.alignEnd;
   const screenWidth = useMessageListScreenWidth();
   const { color } = props;
   const swipeSnakeStyle = React.useMemo(() => {
     return [
       styles.swipeSnake,
       iconAlign,
       {
         width: screenWidth,
         backgroundColor: color,
       },
     ];
   }, [iconAlign, screenWidth, color]);
 
   const { children } = props;
   const iconColor = tinycolor(color).isDark()
     ? colors.dark.listForegroundLabel
     : colors.light.listForegroundLabel;
   const coloredIcon = React.useMemo(
     () =>
       React.cloneElement(children, {
         color: iconColor,
       }),
     [children, iconColor],
   );
 
   return (
     <View style={animationContainerStyle}>
       <Animated.View style={swipeSnakeContainerStyle}>
         <View style={swipeSnakeStyle}>{coloredIcon}</View>
       </Animated.View>
     </View>
   );
 }
 
 type Props = {
   +triggerReply?: () => mixed,
   +triggerSidebar?: () => mixed,
   +isViewer: boolean,
-  +messageBoxStyle: ViewStyle,
+  +contentStyle: ViewStyle,
   +threadColor: string,
   +children: React.Node,
 };
 function SwipeableMessage(props: Props): React.Node {
   const { isViewer, triggerReply, triggerSidebar } = props;
   const secondaryActionExists = triggerReply && triggerSidebar;
 
   const onPassPrimaryThreshold = React.useCallback(() => {
     const impactStrength = secondaryActionExists
       ? Haptics.ImpactFeedbackStyle.Medium
       : Haptics.ImpactFeedbackStyle.Heavy;
     Haptics.impactAsync(impactStrength);
   }, [secondaryActionExists]);
   const onPassSecondaryThreshold = React.useCallback(() => {
     if (secondaryActionExists) {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
     }
   }, [secondaryActionExists]);
 
   const primaryAction = React.useCallback(() => {
     if (triggerReply) {
       triggerReply();
     } else if (triggerSidebar) {
       triggerSidebar();
     }
   }, [triggerReply, triggerSidebar]);
   const secondaryAction = React.useCallback(() => {
     if (triggerReply && triggerSidebar) {
       triggerSidebar();
     }
   }, [triggerReply, triggerSidebar]);
 
   const translateX = useSharedValue(0);
   const swipeEvent = useAnimatedGestureHandler(
     {
       onStart: (event, ctx) => {
         ctx.translationAtStart = translateX.value;
         cancelAnimation(translateX.value);
       },
       onActive: (event, ctx) => {
         const translationX = ctx.translationAtStart + event.translationX;
         const baseActiveTranslation = isViewer
           ? Math.min(translationX, 0)
           : Math.max(translationX, 0);
         translateX.value = dividePastDistance(
           baseActiveTranslation,
           primaryThreshold,
           2,
         );
 
         const absValue = Math.abs(translateX.value);
         const pastPrimaryThreshold = absValue >= primaryThreshold;
         if (pastPrimaryThreshold && !ctx.prevPastPrimaryThreshold) {
           runOnJS(onPassPrimaryThreshold)();
         }
         ctx.prevPastPrimaryThreshold = pastPrimaryThreshold;
 
         const pastSecondaryThreshold = absValue >= secondaryThreshold;
         if (pastSecondaryThreshold && !ctx.prevPastSecondaryThreshold) {
           runOnJS(onPassSecondaryThreshold)();
         }
         ctx.prevPastSecondaryThreshold = pastSecondaryThreshold;
       },
       onEnd: event => {
         const absValue = Math.abs(translateX.value);
         if (absValue >= secondaryThreshold && secondaryActionExists) {
           runOnJS(secondaryAction)();
         } else if (absValue >= primaryThreshold) {
           runOnJS(primaryAction)();
         }
 
         translateX.value = withSpring(0, makeSpringConfig(event.velocityX));
       },
     },
     [
       isViewer,
       onPassPrimaryThreshold,
       onPassSecondaryThreshold,
       primaryAction,
       secondaryAction,
       secondaryActionExists,
     ],
   );
 
-  const transformMessageBoxStyle = useAnimatedStyle(
+  const transformContentStyle = useAnimatedStyle(
     () => ({
       transform: [{ translateX: translateX.value }],
     }),
     [],
   );
 
-  const { messageBoxStyle, children } = props;
+  const { contentStyle, children } = props;
 
   if (!triggerReply && !triggerSidebar) {
     return (
       <PanGestureHandler enabled={false}>
-        <Animated.View style={messageBoxStyle}>{children}</Animated.View>
+        <Animated.View style={contentStyle}>{children}</Animated.View>
       </PanGestureHandler>
     );
   }
 
   const threadColor = `#${props.threadColor}`;
   const tinyThreadColor = tinycolor(threadColor);
 
   const snakes = [];
   if (triggerReply) {
     const replySnakeOpacityInterpolator = isViewer
       ? interpolateOpacityForViewerPrimarySnake
       : interpolateOpacityForNonViewerPrimarySnake;
     snakes.push(
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={threadColor}
         opacityInterpolator={replySnakeOpacityInterpolator}
         key="reply"
       >
         <CommIcon name="reply-filled" size={14} />
       </SwipeSnake>,
     );
   }
   if (triggerReply && triggerSidebar) {
     const sidebarSnakeTranslateXInterpolator = isViewer
       ? interpolateTranslateXForViewerSecondarySnake
       : interpolateTranslateXForNonViewerSecondarySnake;
     const darkerThreadColor = tinyThreadColor
       .darken(tinyThreadColor.isDark() ? 10 : 20)
       .toString();
     snakes.push(
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={darkerThreadColor}
         translateXInterpolator={sidebarSnakeTranslateXInterpolator}
         key="sidebar"
       >
         <CommIcon name="sidebar-filled" size={16} />
       </SwipeSnake>,
     );
   } else if (triggerSidebar) {
     const sidebarSnakeOpacityInterpolator = isViewer
       ? interpolateOpacityForViewerPrimarySnake
       : interpolateOpacityForNonViewerPrimarySnake;
     snakes.push(
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={threadColor}
         opacityInterpolator={sidebarSnakeOpacityInterpolator}
         key="sidebar"
       >
         <CommIcon name="sidebar-filled" size={16} />
       </SwipeSnake>,
     );
   }
 
   snakes.push(
     <PanGestureHandler
       maxPointers={1}
       activeOffsetX={[-4, 4]}
       onGestureEvent={swipeEvent}
       failOffsetX={isViewer ? 5 : -5}
       failOffsetY={[-5, 5]}
       key="gesture"
     >
-      <Animated.View style={[messageBoxStyle, transformMessageBoxStyle]}>
+      <Animated.View style={[contentStyle, transformContentStyle]}>
         {children}
       </Animated.View>
     </PanGestureHandler>,
   );
 
   return snakes;
 }
 
 const styles = {
   swipeSnakeContainer: {
     marginHorizontal: 20,
     justifyContent: 'center',
     position: 'absolute',
     top: 0,
     bottom: 0,
   },
   animationContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
   },
   swipeSnake: {
     paddingHorizontal: 15,
     flex: 1,
     borderRadius: 25,
     height: 30,
     justifyContent: 'center',
     maxHeight: 50,
   },
   left0: {
     left: 0,
   },
   right0: {
     right: 0,
   },
   alignStart: {
     alignItems: 'flex-start',
   },
   alignEnd: {
     alignItems: 'flex-end',
   },
 };
 
 export default SwipeableMessage;