diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
index b1777dd96..19a8e4d6f 100644
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -1,341 +1,350 @@
 // @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, {
   useDerivedValue,
   withTiming,
   interpolateColor,
   useAnimatedStyle,
 } 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 { MessageEditingContext } from './message-editing-context.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 CommIcon from '../components/comm-icon.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';
 
 /* 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,
   +shouldDisplayPinIndicator: boolean,
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +composedMessageMaxWidth: number,
   +colors: Colors,
   +contentAndHeaderOpacity: number | Node,
   +deliveryIconOpacity: number | Node,
   // withInputState
   +inputState: ?InputState,
   +navigateToSidebar: () => mixed,
   +editedMessageStyle: AnimatedStyleObj,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   render() {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const {
       item,
       sendFailed,
       focused,
       swipeOptions,
       shouldDisplayPinIndicator,
       children,
       composedMessageMaxWidth,
       colors,
       inputState,
       navigateToSidebar,
       contentAndHeaderOpacity,
       deliveryIconOpacity,
       editedMessageStyle,
       ...viewProps
     } = this.props;
     const { id, creator } = item.messageInfo;
     const { hasBeenEdited, isPinned } = item;
 
     const { isViewer } = creator;
     const alignStyle = isViewer
       ? styles.rightChatBubble
       : styles.leftChatBubble;
 
     let containerMarginBottom = 5;
     if (item.endsCluster) {
       containerMarginBottom += clusterEndHeight;
     }
     const containerStyle = { marginBottom: containerMarginBottom };
 
     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) {
       avatar = (
         <View style={styles.avatarContainer}>
           <UserAvatar size="small" userID={item.messageInfo.creator.id} />
         </View>
       );
     } else if (!isViewer) {
       avatar = <View style={styles.avatarOffset} />;
     }
 
     const pinIconPositioning = isViewer ? 'left' : 'right';
     const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
     const messageBoxTopLevelContainerStyle =
       pinIconPositioning === 'left'
         ? styles.rightMessageBoxTopLevelContainerStyle
         : styles.leftMessageBoxTopLevelContainerStyle;
 
     let pinIcon;
     if (isPinned && shouldDisplayPinIndicator) {
       pinIcon = (
         <View style={styles.pinIconContainer}>
           <CommIcon
             name={pinIconName}
             size={12}
             style={{ color: `#${item.threadInfo.color}` }}
           />
         </View>
       );
     }
 
     const messageBoxStyle = {
       opacity: contentAndHeaderOpacity,
       maxWidth: composedMessageMaxWidth,
     };
 
     const messageBox = (
       <View style={messageBoxTopLevelContainerStyle}>
         {pinIcon}
         <View style={messageBoxContainerStyle}>
           <SwipeableMessage
             triggerReply={triggerReply}
             triggerSidebar={triggerSidebar}
             isViewer={isViewer}
             contentStyle={styles.swipeableContainer}
             threadColor={item.threadInfo.color}
           >
             {avatar}
             <AnimatedView style={messageBoxStyle}>{children}</AnimatedView>
           </SwipeableMessage>
         </View>
       </View>
     );
 
     let inlineEngagement = null;
     const label = getMessageLabel(hasBeenEdited, item.threadInfo.id);
     if (
       item.threadCreatedFromMessage ||
       Object.keys(item.reactions).length > 0 ||
       label
     ) {
       const positioning = isViewer ? 'right' : 'left';
       inlineEngagement = (
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={item.threadInfo}
           sidebarThreadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           positioning={positioning}
           label={label}
         />
       );
     }
 
+    const viewStyle = [styles.alignment];
+    if (!__DEV__) {
+      // We don't force view height in dev mode because we
+      // want to measure it in Message to see if it's correct
+      if (item.messageShapeType === 'text') {
+        viewStyle.push({ height: item.contentHeight });
+      }
+    }
+
     return (
       <View {...viewProps}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <MessageHeader item={item} focused={focused} display="lowContrast" />
         </AnimatedView>
         <AnimatedView style={[containerStyle, editedMessageStyle]}>
-          <View style={styles.alignment}>
+          <View style={viewStyle}>
             <View style={[styles.content, alignStyle]}>
               {deliveryIcon}
               {messageBox}
             </View>
             {failedSendInfo}
             {inlineEngagement}
           </View>
         </AnimatedView>
       </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',
   },
   leftMessageBoxTopLevelContainerStyle: {
     flexDirection: 'row-reverse',
   },
   messageBoxContainer: {
     marginRight: 5,
   },
   pinIconContainer: {
     marginRight: 4,
     marginTop: 4,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
   rightChatContainer: {
     alignItems: 'flex-end',
   },
   rightMessageBoxTopLevelContainerStyle: {
     flexDirection: 'row',
   },
   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 messageEditingContext = React.useContext(MessageEditingContext);
     const progress = useDerivedValue(() => {
       const isThisThread =
         messageEditingContext?.editState.editedMessage?.threadID ===
         props.item.threadInfo.id;
       const isHighlighted =
         messageEditingContext?.editState.editedMessage?.id ===
           props.item.messageInfo.id && isThisThread;
       return withTiming(isHighlighted ? 1 : 0);
     });
 
     const editedMessageStyle = useAnimatedStyle(() => {
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
         ['transparent', `#${props.item.threadInfo.color}40`],
       );
       return {
         backgroundColor,
       };
     });
 
     return (
       <ComposedMessage
         {...props}
         composedMessageMaxWidth={composedMessageMaxWidth}
         colors={colors}
         inputState={inputState}
         navigateToSidebar={navigateToSidebar}
         contentAndHeaderOpacity={contentAndHeaderOpacity}
         deliveryIconOpacity={deliveryIconOpacity}
         editedMessageStyle={editedMessageStyle}
       />
     );
   });
 
 export default ConnectedComposedMessage;
diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js
index 7b73bec8a..1b5d5244a 100644
--- a/native/chat/inner-text-message.react.js
+++ b/native/chat/inner-text-message.react.js
@@ -1,193 +1,187 @@
 // @flow
 
 import * as React from 'react';
 import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { DummyInlineEngagementNode } from './inline-engagement.react.js';
 import { useTextMessageMarkdownRules } from './message-list-types.js';
 import {
   allCorners,
   filterCorners,
   getRoundedContainerStyle,
 } from './rounded-corners.js';
 import {
   TextMessageMarkdownContext,
   useTextMessageMarkdown,
 } from './text-message-markdown-context.js';
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
 import Markdown from '../markdown/markdown.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, colors } from '../themes/colors.js';
 import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function dummyNodeForTextMessageHeightMeasurement(
   text: string,
   editedLabel?: ?string,
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
 ): React.Element<typeof View> {
   return (
     <View>
       <DummyTextNode>{text}</DummyTextNode>
       <DummyInlineEngagementNode
         editedLabel={editedLabel}
         sidebarInfo={sidebarInfo}
         reactions={reactions}
       />
     </View>
   );
 }
 
 type DummyTextNodeProps = {
   ...React.ElementConfig<typeof View>,
   +children: string,
 };
 function DummyTextNode(props: DummyTextNodeProps): React.Node {
   const { children, style, ...rest } = props;
   const maxWidth = useComposedMessageMaxWidth();
   const viewStyle = [props.style, styles.dummyMessage, { maxWidth }];
   const rules = useTextMessageMarkdownRules(false);
   return (
     <View {...rest} style={viewStyle}>
       <Markdown style={styles.text} rules={rules}>
         {children}
       </Markdown>
     </View>
   );
 }
 
 type Props = {
   +item: ChatTextMessageInfoItemWithHeight,
   +onPress: () => void,
   +messageRef?: (message: ?React.ElementRef<typeof View>) => void,
   +threadColorOverride?: ?Node,
   +isThreadColorDarkOverride?: ?boolean,
 };
 function InnerTextMessage(props: Props): React.Node {
   const { item } = props;
   const { text, creator } = item.messageInfo;
   const { isViewer } = creator;
 
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const boundColors = useColors();
 
   const messageStyle = {};
   let darkColor;
   if (isViewer) {
     const threadColor = item.threadInfo.color;
     messageStyle.backgroundColor =
       props.threadColorOverride ?? `#${threadColor}`;
     darkColor = props.isThreadColorDarkOverride ?? colorIsDark(threadColor);
   } else {
     messageStyle.backgroundColor = boundColors.listChatBubble;
     darkColor = activeTheme === 'dark';
   }
 
   const cornerStyle = getRoundedContainerStyle(filterCorners(allCorners, item));
 
-  if (!__DEV__) {
-    // We don't force view height in dev mode because we
-    // want to measure it in Message to see if it's correct
-    messageStyle.height = item.contentHeight;
-  }
-
   const rules = useTextMessageMarkdownRules(darkColor);
   const textMessageMarkdown = useTextMessageMarkdown(item.messageInfo);
 
   const markdownStyles = React.useMemo(() => {
     const textStyle = {
       color: darkColor
         ? colors.dark.listForegroundLabel
         : colors.light.listForegroundLabel,
     };
 
     return [styles.text, textStyle];
   }, [darkColor]);
 
   // If we need to render a Text with an onPress prop inside, we're going to
   // have an issue: the GestureTouchableOpacity below will trigger too when the
   // the onPress is pressed. We have to use a GestureTouchableOpacity in order
   // for the message touch gesture to play nice with the message swipe gesture,
   // so we need to find a way to disable the GestureTouchableOpacity.
   //
   // Our solution is to keep using the GestureTouchableOpacity for the padding
   // around the text, and to have the Texts inside ALL implement an onPress prop
   // that will default to the message touch gesture. Luckily, Text with onPress
   // plays nice with the message swipe gesture.
   let secondMessage;
   if (textMessageMarkdown.markdownHasPressable) {
     secondMessage = (
       <View
         style={[StyleSheet.absoluteFill, styles.message]}
         pointerEvents="box-none"
       >
         <Markdown style={markdownStyles} rules={rules}>
           {text}
         </Markdown>
       </View>
     );
   }
 
   const message = (
     <TextMessageMarkdownContext.Provider value={textMessageMarkdown}>
       <TouchableWithoutFeedback>
         <View>
           <GestureTouchableOpacity
             onPress={props.onPress}
             onLongPress={props.onPress}
             activeOpacity={0.6}
             style={[styles.message, cornerStyle]}
             animatedStyle={messageStyle}
           >
             <Markdown style={markdownStyles} rules={rules}>
               {text}
             </Markdown>
           </GestureTouchableOpacity>
           {secondMessage}
         </View>
       </TouchableWithoutFeedback>
     </TextMessageMarkdownContext.Provider>
   );
 
   // We need to set onLayout in order to allow .measure() to be on the ref
   const onLayout = React.useCallback(() => {}, []);
 
   const { messageRef } = props;
   if (!messageRef) {
     return message;
   }
 
   return (
     <View onLayout={onLayout} ref={messageRef}>
       {message}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   dummyMessage: {
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
   message: {
     overflow: 'hidden',
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
   text: {
     fontFamily: 'Arial',
     fontSize: 18,
   },
 });
 
 export { InnerTextMessage, dummyNodeForTextMessageHeightMeasurement };