[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

@@ -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,
   },

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}
           />
         );
       }),

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}>

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}
         />
       );
     },