diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js --- a/native/chat/chat-thread-list-search.react.js +++ b/native/chat/chat-thread-list-search.react.js @@ -80,8 +80,38 @@ ], [searchCancelButtonProgress, styles.cancelSearchButtonText], ); - return ( - <> + + const innerSearchNode = React.useMemo( + () => ( + + ), + [ + innerSearchActive, + innerSearchAutoFocus, + onBlur, + onChangeText, + ref, + searchText, + styles.search, + ], + ); + + const searchContainer = React.useMemo( + () => {innerSearchNode}, + [innerSearchNode, searchBoxStyle], + ); + + const cancelButton = React.useMemo( + () => ( - - - - + ), + [buttonStyle, onSearchCancel, searchStatus, styles.cancelSearchButton], + ); + + const chatThreadListSearch = React.useMemo( + () => ( + <> + {cancelButton} + {searchContainer} + + ), + [cancelButton, searchContainer], ); + + return chatThreadListSearch; } const unboundStyles = { - icon: { - fontSize: 28, - }, - container: { - flex: 1, - }, - searchContainer: { - backgroundColor: 'listBackground', - display: 'flex', - justifyContent: 'center', - flexDirection: 'row', - }, searchBox: { flex: 1, }, @@ -142,10 +161,6 @@ paddingHorizontal: 16, paddingTop: 8, }, - flatList: { - flex: 1, - backgroundColor: 'listBackground', - }, }; const ChatThreadListSearch: React.AbstractComponent< diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -494,28 +494,6 @@ 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',