From b3c372c1c03d3d9f4877cd6737610e00d3c4c856 Mon Sep 17 00:00:00 2001
From: Rohan Khanderia <rohan.khanderia@gmail.com>
Date: Tue, 20 Jun 2023 14:34:31 -0400
Subject: [PATCH] [native] Prevent nested scroll in the message results screen

Summary:
This is the native counterpart to the previous diff that handled the nested scroll in the message results modal on web. These changes will maintain the scrollable message in the toggle pin modal, but show the message in full when navigating to see the pinned messages or search results.

The changes here also cover the issue where two pinned messages back to back would prevent the user from scrolling to see other messages [[
https://linear.app/comm/issue/ENG-4150/scrolling-issue-in-pinned-messages-message-search#comment-c020d958  | ENG-4150 ]].

Depends on D8259

Test Plan:
Checked the toggle pin modal to confirm messages still scroll, checked both the search results / pinned messages screens to confirm that the messages show in full, and confirm that two long messages won't block scroll now.

{F597666}

Reviewers: michal, inka

Reviewed By: inka

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8262
---
 native/chat/message-result.react.js         | 13 ++++++++++++-
 native/chat/message-results-screen.react.js |  1 +
 native/chat/toggle-pin-modal.react.js       |  1 +
 native/search/message-search.react.js       |  1 +
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/native/chat/message-result.react.js b/native/chat/message-result.react.js
index 091b50a6d5..c30b0c4b8e 100644
--- a/native/chat/message-result.react.js
+++ b/native/chat/message-result.react.js
@@ -29,6 +29,7 @@ type MessageResultProps = {
     | NavigationRoute<'MessageResultsScreen'>
     | NavigationRoute<'MessageSearch'>,
   +messageVerticalBounds: ?VerticalBounds,
+  +scrollable: boolean,
 };
 
 function MessageResult(props: MessageResultProps): React.Node {
@@ -41,8 +42,16 @@ function MessageResult(props: MessageResultProps): React.Node {
     [props.item],
   );
 
+  const containerStyle = React.useMemo(
+    () =>
+      props.scrollable
+        ? [styles.container, styles.containerOverflow]
+        : styles.container,
+    [props.scrollable, styles.container, styles.containerOverflow],
+  );
+
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView style={containerStyle}>
       <MessageListContextProvider threadInfo={props.threadInfo}>
         <View style={styles.viewContainer}>
           <Message
@@ -67,6 +76,8 @@ const unboundStyles = {
   container: {
     marginTop: 5,
     backgroundColor: 'panelForeground',
+  },
+  containerOverflow: {
     overflow: 'scroll',
     maxHeight: 400,
   },
diff --git a/native/chat/message-results-screen.react.js b/native/chat/message-results-screen.react.js
index 7bec465fce..3277b5c4a9 100644
--- a/native/chat/message-results-screen.react.js
+++ b/native/chat/message-results-screen.react.js
@@ -153,6 +153,7 @@ function MessageResultsScreen(props: MessageResultsScreenProps): React.Node {
             navigation={navigation}
             route={route}
             messageVerticalBounds={messageVerticalBounds}
+            scrollable={false}
           />
         );
       }),
diff --git a/native/chat/toggle-pin-modal.react.js b/native/chat/toggle-pin-modal.react.js
index dd6908e800..514182024d 100644
--- a/native/chat/toggle-pin-modal.react.js
+++ b/native/chat/toggle-pin-modal.react.js
@@ -102,6 +102,7 @@ function TogglePinModal(props: TogglePinModalProps): React.Node {
         navigation={navigation}
         route={route}
         messageVerticalBounds={null}
+        scrollable={true}
       />
       <View style={styles.buttonsContainer}>
         <Button style={modalInfo.buttonStyle} onPress={onPress}>
diff --git a/native/search/message-search.react.js b/native/search/message-search.react.js
index 3d8ce27606..d39ca880c0 100644
--- a/native/search/message-search.react.js
+++ b/native/search/message-search.react.js
@@ -161,6 +161,7 @@ function MessageSearch(props: MessageSearchProps): React.Node {
           navigation={props.navigation}
           route={props.route}
           messageVerticalBounds={messageVerticalBounds}
+          scrollable={false}
         />
       );
     },