Add an x button to the search to clear the input

1 files changed, 9 insertions, 0 deletions

diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx
index 93539e29a..a87c41e76 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}>