feat(android): Add shouldClearOnSubmit-prop to search view

Example/src/screens/SearchBar.tsx

@@ -46,6 +46,7 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   const [autoCapitalize, setAutoCapitalize] =
     useState<AutoCapitalize>('sentences');
   const [inputType, setInputType] = useState<InputType>('text');
+  const [shouldClearOnSubmit, setShouldClearOnSubmit] = useState(false);
   const searchBarRef = useRef<SearchBarCommands>(null);
 
   useLayoutEffect(() => {
@@ -62,6 +63,7 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         autoCapitalize,
         placeholder,
         inputType,
+        shouldClearOnSubmit,
         onChangeText: event => setSearch(event.nativeEvent.text),
         onCancelButtonPress: () =>
           toast.push({
@@ -108,6 +110,7 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     hideNavigationBar,
     autoCapitalize,
     inputType,
+    shouldClearOnSubmit,
   ]);
 
   return (
@@ -172,6 +175,11 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         value={shouldShowHintSearchIcon}
         onValueChange={setShouldShowHintSearchIcon}
       />
+      <SettingsSwitch
+        label="Clear on submit"
+        value={shouldClearOnSubmit}
+        onValueChange={setShouldClearOnSubmit}
+      />
       <Text style={styles.heading}>Imperative actions</Text>
       <Button onPress={() => searchBarRef.current?.blur()} title="Blur" />
       <Button onPress={() => searchBarRef.current?.focus()} title="Focus" />

android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt

@@ -77,6 +77,13 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
         }
     }
 
+    @ReactProp(name = "shouldClearOnSubmit")
+    fun setShouldClearOnSubmit(view: SearchBarView, shouldClearOnSubmit: Boolean?) {
+        if (shouldClearOnSubmit != null) {
+            view.shouldClearOnSubmit = shouldClearOnSubmit
+        }
+    }
+
     @ReactProp(name = "textColor", customType = "Color")
     fun setTextColor(view: SearchBarView, color: Int?) {
         view.textColor = color

android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt

@@ -27,6 +27,7 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
     var shouldOverrideBackButton: Boolean = true
     var autoFocus: Boolean = false
     var shouldShowHintSearchIcon: Boolean = true
+    var shouldClearOnSubmit: Boolean = false
 
     private var mSearchViewFormatter: SearchViewFormatter? = null
 
@@ -63,7 +64,7 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
             mSearchViewFormatter?.setHeaderIconColor(headerIconColor)
             mSearchViewFormatter?.setHintTextColor(hintTextColor)
             mSearchViewFormatter?.setPlaceholder(placeholder, shouldShowHintSearchIcon)
-            searchView.overrideBackAction = shouldOverrideBackButton
+            searchView?.overrideBackAction = shouldOverrideBackButton
         }
     }
 
@@ -124,6 +125,9 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
 
     private fun handleTextSubmit(newText: String?) {
         sendEvent(SearchBarSearchButtonPressEvent(surfaceId, id, newText))
+        if (shouldClearOnSubmit) {
+            mSearchViewFormatter?.clearText()
+        }
     }
 
     private fun sendEvent(event: Event<*>) {

android/src/main/java/com/swmansion/rnscreens/SearchViewFormatter.kt

@@ -10,6 +10,7 @@ import androidx.appcompat.widget.SearchView
 class SearchViewFormatter(var searchView: SearchView) {
     private var mDefaultTextColor: Int? = null
     private var mDefaultTintBackground: Drawable? = null
+    private var mDefaultText: String = ""
 
     private val searchEditText
         get() = searchView.findViewById<View>(R.id.search_src_text) as? EditText
@@ -64,4 +65,8 @@ class SearchViewFormatter(var searchView: SearchView) {
             searchEditText?.hint = placeholder
         }
     }
+
+    fun clearText() {
+        searchEditText?.setText(mDefaultText)
+    }
 }

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -391,6 +391,7 @@ To render a search bar use `ScreenStackHeaderSearchBarView` with `<SearchBar>` c
 - `hintTextColor` - The search hint text color. (Android only)
 - `headerIconColor` - The search and close icon color shown in the header. (Android only)
 - `shouldShowHintSearchIcon` - Show the search hint icon when search bar is focused. (Android only)
+- `shouldClearOnSubmit` - Clear the search input when the search button is pressed. (Android only) Defaults to `false`. (Android only)
 - `ref` - A React ref to imperatively modify search bar.
 
 Allowed imperative actions on search bar are:

native-stack/README.md

@@ -607,6 +607,12 @@ The search and close icon color shown in the header. (Android only)
 
 Show the search hint icon when search bar is focused. (Android only)
 
+#### `shouldClearOnSubmit`
+
+Clear the search input when the search button is pressed. (Android only)
+
+Defaults to false.
+
 #### `ref`
 
 A React ref to imperatively modify search bar. Supported actions:

src/types.tsx

@@ -684,4 +684,11 @@ export interface SearchBarProps {
    * @default true
    */
   shouldShowHintSearchIcon?: boolean;
+  /**
+   * Clear the search input when search button is pressed.
+   *
+   * @plaform android
+   * @default false
+   */
+  shouldClearOnSubmit?: boolean;
 }