From 28e4b9a04786089f4dc086cb83f98b843e439fa2 Mon Sep 17 00:00:00 2001
From: Jasonzza <jason925645402@gmail.com>
Date: Wed, 27 Dec 2023 22:11:31 +0800
Subject: [PATCH] feat: add cancelSearch command on SearchBar (#1987)

## Description

Add cancelSearch native command to SearchBar imperative API.
The command provides a way for developers to programmatically cancel an
ongoing search operation and clear the search input.

## Changes

- Added JS impl
- Added Native impl (both Android & iOS)
  - RNSSearchBar.mm
  - CustomSearchView.kt
  - SearchBarManager.kt
  - SearchBarView.kt
- Updated JS types
- Updated docs

## Test code and steps to reproduce

Test1097 in both FabricTestExample & TestsExample

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
---
 Example/src/screens/SearchBar.tsx                |  6 +++++-
 FabricTestExample/src/Test1097.tsx               |  4 ++++
 TestsExample/src/Test1097.tsx                    |  4 ++++
 .../com/swmansion/rnscreens/CustomSearchView.kt  |  5 +++++
 .../com/swmansion/rnscreens/SearchBarManager.kt  |  1 +
 .../com/swmansion/rnscreens/SearchBarView.kt     |  4 ++++
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md              |  1 +
 ios/RNSSearchBar.mm                              | 16 ++++++++++++++++
 native-stack/README.md                           |  1 +
 src/fabric/SearchBarNativeComponent.ts           |  2 ++
 src/index.native.tsx                             | 13 +++++++++++--
 src/types.tsx                                    |  2 ++
 12 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/Example/src/screens/SearchBar.tsx b/Example/src/screens/SearchBar.tsx
index 37ddd7380c..e7968e6b9c 100644
--- a/Example/src/screens/SearchBar.tsx
+++ b/Example/src/screens/SearchBar.tsx
@@ -177,7 +177,7 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
       <Button onPress={() => searchBarRef.current?.focus()} title="Focus" />
       <Button
         onPress={() => searchBarRef.current?.clearText()}
-        title="Clear Text"
+        title="Clear text"
       />
       <Button
         onPress={() => searchBarRef.current?.toggleCancelButton(true)}
@@ -187,6 +187,10 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         onPress={() => searchBarRef.current?.toggleCancelButton(false)}
         title="Hide cancel"
       />
+      <Button
+        onPress={() => searchBarRef.current?.cancelSearch()}
+        title="Cancel search"
+      />
       <Text style={styles.heading}>Other</Text>
       <Button
         onPress={() => navigation.navigate('Search')}
diff --git a/FabricTestExample/src/Test1097.tsx b/FabricTestExample/src/Test1097.tsx
index 6b9b1ced70..7e5adf3a02 100644
--- a/FabricTestExample/src/Test1097.tsx
+++ b/FabricTestExample/src/Test1097.tsx
@@ -190,6 +190,10 @@ function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
         title="Set 'sometext' text"
         onPress={() => searchBarRef.current?.setText('sometext')}
       />
+      <Button
+        title="Cancel search"
+        onPress={() => searchBarRef.current?.cancelSearch()}
+      />
       <Button
         title="Tap me for the first screen"
         onPress={() => navigation.navigate('First')}
diff --git a/TestsExample/src/Test1097.tsx b/TestsExample/src/Test1097.tsx
index 4bf114aa29..6e48f70625 100644
--- a/TestsExample/src/Test1097.tsx
+++ b/TestsExample/src/Test1097.tsx
@@ -191,6 +191,10 @@ function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
         title="Set 'sometext' text"
         onPress={() => searchBarRef.current?.setText('sometext')}
       />
+      <Button
+        title="Cancel search"
+        onPress={() => searchBarRef.current?.cancelSearch()}
+      />
       <Button
         title="Tap me for the first screen"
         onPress={() => navigation.navigate('First')}
diff --git a/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt b/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt
index 6984b10d48..ea35872c2a 100644
--- a/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt
@@ -40,6 +40,11 @@ class CustomSearchView(context: Context, fragment: Fragment) : SearchView(contex
 
     fun setText(text: String) = setQuery(text, false)
 
+    fun cancelSearch() {
+        clearText()
+        setIconified(true)
+    }
+
     override fun setOnCloseListener(listener: OnCloseListener?) {
         mCustomOnCloseListener = listener
     }
diff --git a/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt b/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
index ff15db8fec..d28563e10c 100644
--- a/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
@@ -106,6 +106,7 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
             "clearText" -> root.handleClearTextJsRequest()
             "toggleCancelButton" -> root.handleToggleCancelButtonJsRequest(false) // just a dummy argument
             "setText" -> root.handleSetTextJsRequest(args?.getString(0))
+            "cancelSearch" -> root.handleCancelSearchJsRequest()
             else -> throw JSApplicationIllegalArgumentException("Unsupported native command received: $commandId")
         }
     }
diff --git a/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt b/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
index ea78e6d035..f768c43517 100644
--- a/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
@@ -150,6 +150,10 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
         text?.let { screenStackFragment?.searchView?.setText(it) }
     }
 
+    fun handleCancelSearchJsRequest() {
+       screenStackFragment?.searchView?.cancelSearch() 
+    }
+
     private fun setToolbarElementsVisibility(visibility: Int) {
         for (i in 0..(headerConfig?.configSubviewsCount?.minus(1) ?: 0)) {
             val subview = headerConfig?.getConfigSubview(i)
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index a71c85b37c..35645d6da1 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -400,6 +400,7 @@ Allowed imperative actions on search bar are:
 - `blur` - Function to remove focus from search bar.
 - `clearText` - Function to clear text in search bar.
 - `setText` - Function to set search bar's text to given value.
+- `cancelSearch` - Function to cancel search in search bar.
 - `toggleCancelButton` - Function toggle cancel button display near search bar. (iOS only)
 
 Below is a list of properties that can be set with `ScreenStackHeaderConfig` component:
diff --git a/ios/RNSSearchBar.mm b/ios/RNSSearchBar.mm
index 94475b7d34..20a4603802 100644
--- a/ios/RNSSearchBar.mm
+++ b/ios/RNSSearchBar.mm
@@ -304,6 +304,14 @@ - (void)setText:(NSString *)text
   [_controller.searchBar setText:text];
 }
 
+- (void)cancelSearch
+{
+#if !TARGET_OS_TV
+  [self searchBarCancelButtonClicked:_controller.searchBar];
+  _controller.active = NO;
+#endif
+}
+
 #pragma mark-- Fabric specific
 
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -446,6 +454,14 @@ - (UIView *)view
   }];
 }
 
+RCT_EXPORT_METHOD(cancelSearch : (NSNumber *_Nonnull)reactTag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    [searchBar cancelSearch];
+  }];
+}
+
 #endif /* !RCT_NEW_ARCH_ENABLED */
 
 @end
diff --git a/native-stack/README.md b/native-stack/README.md
index 947201fae2..e90430a1e0 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -616,6 +616,7 @@ A React ref to imperatively modify search bar. Supported actions:
 *  `blur` - remove focus from search bar
 *  `clearText` - clear text in search bar
 *  `setText` - set search bar's content to given string
+*  `cancelSearch` - cancel search in search bar.
 *  `toggleCancelButton` (iOS only) - toggle cancel button display near search bar.
 
 ### Events
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 2f22048b9b..15d33f5e54 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -61,6 +61,7 @@ interface NativeCommands {
     flag: boolean
   ) => void;
   setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+  cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -70,6 +71,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'clearText',
     'toggleCancelButton',
     'setText',
+    'cancelSearch',
   ],
 });
 
diff --git a/src/index.native.tsx b/src/index.native.tsx
index 8e00ebb1f1..0e648e2771 100644
--- a/src/index.native.tsx
+++ b/src/index.native.tsx
@@ -94,6 +94,9 @@ type SearchBarCommandsType = {
     viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>,
     text: string
   ) => void;
+  cancelSearch: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>
+  ) => void;
 };
 
 // We initialize these lazily so that importing the module doesn't throw error when not linked
@@ -200,8 +203,8 @@ function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
     });
     return () => {
       clearImmediate(id);
-    }
-  }, [freeze])
+    };
+  }, [freeze]);
 
   return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
 }
@@ -483,6 +486,12 @@ class SearchBar extends React.Component<SearchBarProps> {
     );
   }
 
+  cancelSearch() {
+    this._callMethodWithRef(ref =>
+      ScreensNativeModules.NativeSearchBarCommands.cancelSearch(ref)
+    );
+  }
+
   render() {
     if (!isSearchBarAvailableForCurrentPlatform) {
       console.warn(
diff --git a/src/types.tsx b/src/types.tsx
index 46e633b61f..438b0d1d7f 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -14,6 +14,7 @@ export type SearchBarCommands = {
   clearText: () => void;
   toggleCancelButton: (show: boolean) => void;
   setText: (text: string) => void;
+  cancelSearch: () => void;
 };
 
 export type StackPresentationTypes =
@@ -552,6 +553,7 @@ export interface SearchBarProps {
    * * `blur` - removes focus from the search bar
    * * `clearText` - removes any text present in the search bar input field
    * * `setText` - sets the search bar's content to given value
+   * * `cancelSearch` - cancel search in search bar.
    * * `toggleCancelButton` - depending on passed boolean value, hides or shows cancel button (iOS only)
    */
   ref?: React.RefObject<SearchBarCommands>;