[native] Introduce naive ChatThreadListSearch component

Summary:
This diff starts moving things from `ChatThreadList` to `ChatThreadListSearch` in a pretty naive/cut-and-paste way. Breaking into steps so I can make sure that things continue to work as expected after each change. Originally made all the changes at once and ran into weird issues I couldn't troubleshoot, so hopefully doing this incrementally will make it easier to narrow down.

This diff involves moving JUST the `Search` component to `ChatThreadListSearch` and ensuring that `onChangeText`, `onBlur`, and `additionalProps` get passed in and work as expected.

Test Plan: Search experience continues to work as expected.

Reviewers: ginsu, rohan, tomek

Reviewed By: ginsu

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D9205

native/chat/chat-thread-list-search.react.js

@@ -0,0 +1,72 @@
+// @flow
+
+import * as React from 'react';
+
+import Search from '../components/search.react.js';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+  +searchText: string,
+  +onChangeText: (updatedSearchText: string) => mixed,
+  +onBlur: () => mixed,
+  +additionalProps?: $Shape<React.ElementConfig<typeof Search>>,
+};
+function ChatThreadListSearch(props: Props): React.Node {
+  const { searchText, onChangeText, onBlur, additionalProps } = props;
+  const styles = useStyles(unboundStyles);
+
+  const searchInputRef = React.useRef();
+  return (
+    <Search
+      searchText={searchText}
+      onChangeText={onChangeText}
+      containerStyle={styles.search}
+      onBlur={onBlur}
+      placeholder="Search chats"
+      ref={searchInputRef}
+      {...additionalProps}
+    />
+  );
+}
+
+const unboundStyles = {
+  icon: {
+    fontSize: 28,
+  },
+  container: {
+    flex: 1,
+  },
+  searchContainer: {
+    backgroundColor: 'listBackground',
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  searchBox: {
+    flex: 1,
+  },
+  search: {
+    marginBottom: 8,
+    marginHorizontal: 18,
+    marginTop: 16,
+  },
+  cancelSearchButton: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  cancelSearchButtonText: {
+    color: 'link',
+    fontSize: 16,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  flatList: {
+    flex: 1,
+    backgroundColor: 'listBackground',
+  },
+};
+export default ChatThreadListSearch;

native/chat/chat-thread-list.react.js

@@ -31,6 +31,7 @@ import type { GlobalAccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
 import { ChatThreadListItem } from './chat-thread-list-item.react.js';
+import ChatThreadListSearch from './chat-thread-list-search.react.js';
 import { getItemLayout, keyExtractor } from './chat-thread-list-utils.js';
 import type {
   ChatTopTabsNavigationProp,
@@ -250,14 +251,11 @@ function ChatThreadList(props: BaseProps): React.Node {
           {/* eslint-enable react-native/no-raw-text */}
         </Button>
         <AnimatedView style={searchBoxStyle}>
-          <Search
+          <ChatThreadListSearch
             searchText={searchText}
             onChangeText={onChangeSearchText}
-            containerStyle={styles.search}
             onBlur={onSearchBlur}
-            placeholder="Search chats"
-            ref={searchInputRef}
-            {...additionalProps}
+            additionalProps={additionalProps}
           />
         </AnimatedView>
       </View>
@@ -271,7 +269,6 @@ function ChatThreadList(props: BaseProps): React.Node {
       searchStatus,
       searchText,
       styles.cancelSearchButton,
-      styles.search,
       styles.searchContainer,
     ],
   );