From c7560ae2f754e285291f24f4c9a77f0ac4b95be9 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Fri, 3 Mar 2023 14:38:59 -0800
Subject: [PATCH] Add an x button to the search to clear the input

---
 src/view/screens/Search.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx
index 93539e29..a87c41e7 100644
--- a/src/view/screens/Search.tsx
+++ b/src/view/screens/Search.tsx
@@ -7,6 +7,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ScrollView} from '../com/util/Views'
 import {observer} from 'mobx-react-lite'
 import {UserAvatar} from '../com/util/UserAvatar'
@@ -78,6 +79,9 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
       autocompleteView.setActive(false)
     }
   }
+  const onPressClearQuery = () => {
+    setQuery('')
+  }
   const onPressCancelSearch = () => {
     setQuery('')
     autocompleteView.setActive(false)
@@ -127,6 +131,11 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
               onBlur={() => setIsInputFocused(false)}
               onChangeText={onChangeQuery}
             />
+            {query ? (
+              <TouchableOpacity onPress={onPressClearQuery}>
+                <FontAwesomeIcon icon="xmark" size={16} style={pal.textLight} />
+              </TouchableOpacity>
+            ) : undefined}
           </View>
           {query || isInputFocused ? (
             <View style={styles.headerCancelBtn}>