From 1a2ed5620f18b56453ba26453812381c22bbd57e Mon Sep 17 00:00:00 2001
From: Ginsu Eddy <ginsu.eddy@gmail.com>
Date: Fri, 11 Aug 2023 16:55:30 -0400
Subject: [PATCH] [native] fix forcing the incorrect height for robotext
 messages

Summary:
This diff is part 1/3 to fix forcing the incorrect height for messages with inline engagement in prod.

This [[ https://linear.app/comm/issue/ENG-4606/fix-forcing-incorrect-height-for-messages-with-inline-engagement-in | linear ]] comment explains this issue and what I did to address this

> Since item.contentHeight is now the height of the inner text message AND the height of the inline engagement we are now forcing the wrong height for the inner text message component. An idea I want to explore to address this is to force the height higher up in the component tree (somewhere like ComposedMessage) where both the "inner message" and the inline engagement is rendered so that when we force the height withitem.contentHeight, it is correct

Test Plan:
Please see demo video where I force and unforce the correct height of the robotext message and it did not change visually (outside of the green background) and I did not get any error logs talking about incorrect height measurements, I also purposely force an incorrect height (which resulted in some logs about incorrect height measurements.

Also please note for the video, I set a green background so that it is easier to visually see what is happening, but these are only for the demo videos

With the correct height measurement:
{F686462}

With the incorrect height measurement:
{F686474}

Reviewers: atul, kamil, tomek, ashoat

Reviewed By: ashoat

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8797
---
 native/chat/inner-robotext-message.react.js |  9 +--------
 native/chat/robotext-message.react.js       | 11 +++++++++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
index 38b9b6eac2..e981f79aa7 100644
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -79,16 +79,9 @@ function InnerRobotextMessage(props: InnerRobotextMessageProps): React.Node {
     });
   }, [robotextWithENSNames, activeTheme, threadID, styles.robotext]);
 
-  const viewStyle = [styles.robotextContainer];
-  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
-    viewStyle.push({ height: item.contentHeight });
-  }
-
   return (
     <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
-      <View style={viewStyle}>
+      <View style={styles.robotextContainer}>
         <Text style={styles.robotext}>{textParts}</Text>
       </View>
     </TouchableWithoutFeedback>
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
index fbbf12e557..c5cf7a235c 100644
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -196,12 +196,19 @@ function RobotextMessage(props: Props): React.Node {
 
   const contentAndHeaderOpacity = useContentAndHeaderOpacity(item);
 
+  const viewStyle = {};
+  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
+    viewStyle.height = item.contentHeight;
+  }
+
   return (
     <View {...viewProps}>
       <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
         {timestamp}
       </AnimatedView>
-      <View onLayout={onLayout} ref={viewRef}>
+      <View onLayout={onLayout} ref={viewRef} style={viewStyle}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <InnerRobotextMessage
             item={item}
@@ -209,8 +216,8 @@ function RobotextMessage(props: Props): React.Node {
             onLongPress={onLongPress}
           />
         </AnimatedView>
+        {inlineEngagement}
       </View>
-      {inlineEngagement}
     </View>
   );
 }