From 9112700a2a080f57dcc7e6f005458adeaaa466e2 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Thu, 16 Mar 2023 10:50:03 +0100
Subject: [PATCH] feat: add `setText` command on SearchBar (#1739)

## Description

Add `setText` native command to SearchBar imperative API.

## Changes

Added the JS impl, native impl (both Android & iOS, Fabric & Paper),
updated JS types & codegen specs.


## 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
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes
---
 FabricTestExample/src/Test1097.tsx             | 18 +++++++++++-------
 TestsExample/src/Test1097.tsx                  |  4 ++++
 .../swmansion/rnscreens/CustomSearchView.kt    |  6 +++---
 .../swmansion/rnscreens/SearchBarManager.kt    |  1 +
 .../com/swmansion/rnscreens/SearchBarView.kt   |  4 ++++
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md            |  1 +
 ios/RNSSearchBar.mm                            | 13 +++++++++++++
 native-stack/README.md                         |  1 +
 src/fabric/SearchBarNativeComponent.ts         |  9 ++++++++-
 src/index.native.tsx                           | 10 ++++++++++
 src/types.tsx                                  |  2 ++
 11 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/FabricTestExample/src/Test1097.tsx b/FabricTestExample/src/Test1097.tsx
index 41ee101fa5..8c5a737932 100644
--- a/FabricTestExample/src/Test1097.tsx
+++ b/FabricTestExample/src/Test1097.tsx
@@ -146,20 +146,20 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) => console.warn(`Text changed to ${e.nativeEvent.text}`),
+    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+      console.warn(`Text changed to ${e.nativeEvent.text}`),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
     onFocus: () => console.warn('onFocus event'),
     onBlur: () => console.warn('onBlur event'),
-  }
+  };
 
   React.useEffect(() => {
     navigation.setOptions({
-      searchBar: searchBarProps
-    })
+      searchBar: searchBarProps,
+    });
   }, [navigation]);
 
-
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
@@ -172,7 +172,7 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         title="Focus search bar"
         onPress={() => searchBarRef.current?.focus()}
       />
-      <Button 
+      <Button
         title="Remove focus from search bar"
         onPress={() => searchBarRef.current?.blur()}
       />
@@ -188,6 +188,10 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         title="Hide cancel button"
         onPress={() => searchBarRef.current?.toggleCancelButton(false)}
       />
+      <Button
+        title="Set 'sometext' text"
+        onPress={() => searchBarRef.current?.setText('sometext')}
+      />
       <Button
         title="Tap me for the first screen"
         onPress={() => navigation.navigate('First')}
@@ -197,5 +201,5 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         onPress={() => searchBarRef.current?.focus()}
       />
     </ScrollView>
-  )
+  );
 }
diff --git a/TestsExample/src/Test1097.tsx b/TestsExample/src/Test1097.tsx
index 41ee101fa5..799235897d 100644
--- a/TestsExample/src/Test1097.tsx
+++ b/TestsExample/src/Test1097.tsx
@@ -188,6 +188,10 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         title="Hide cancel button"
         onPress={() => searchBarRef.current?.toggleCancelButton(false)}
       />
+      <Button
+        title="Set 'sometext' text"
+        onPress={() => searchBarRef.current?.setText('sometext')}
+      />
       <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 b92301a9ac..6984b10d48 100644
--- a/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt
@@ -36,9 +36,9 @@ class CustomSearchView(context: Context, fragment: Fragment) : SearchView(contex
         requestFocusFromTouch()
     }
 
-    fun clearText() {
-        setQuery("", false)
-    }
+    fun clearText() = setQuery("", false)
+
+    fun setText(text: String) = setQuery(text, false)
 
     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 ae170f8dba..616dcf2871 100644
--- a/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
@@ -97,6 +97,7 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
             "blur" -> root.handleBlurJsRequest()
             "clearText" -> root.handleClearTextJsRequest()
             "toggleCancelButton" -> root.handleToggleCancelButtonJsRequest(false) // just a dummy argument
+            "setText" -> root.handleSetTextJsRequest(args?.getString(0))
             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 6035377107..b1ae1013bd 100644
--- a/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
@@ -137,6 +137,10 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
 
     fun handleToggleCancelButtonJsRequest(flag: Boolean) = Unit
 
+    fun handleSetTextJsRequest(text: String?) {
+        text?.let { screenStackFragment?.searchView?.setText(it) }
+    }
+
     enum class SearchBarAutoCapitalize {
         NONE, WORDS, SENTENCES, CHARACTERS
     }
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index e5aebab8b2..7323612eab 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -397,6 +397,7 @@ Allowed imperative actions on search bar are:
 - `focus` - Function to focus on search bar.
 - `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.
 - `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 1280738f7f..9919a2f21d 100644
--- a/ios/RNSSearchBar.mm
+++ b/ios/RNSSearchBar.mm
@@ -278,6 +278,11 @@ - (void)toggleCancelButton:(BOOL)flag
 #endif
 }
 
+- (void)setText:(NSString *)text
+{
+  [_controller.searchBar setText:text];
+}
+
 #pragma mark-- Fabric specific
 
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -408,6 +413,14 @@ - (UIView *)view
   }];
 }
 
+RCT_EXPORT_METHOD(setText : (NSNumber *_Nonnull)reactTag text : (NSString *)text)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    [searchBar setText:text];
+  }];
+}
+
 #endif /* !RCT_NEW_ARCH_ENABLED */
 
 @end
diff --git a/native-stack/README.md b/native-stack/README.md
index ef6120b7f0..91efa240d8 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -603,6 +603,7 @@ A React ref to imperatively modify search bar. Supported actions:
 *  `focus` - focus on search bar
 *  `blur` - remove focus from search bar
 *  `clearText` - clear text in search bar
+*  `setText` - set search bar's content to given string
 *  `toggleCancelButton` (iOS only) - toggle cancel button display near search bar.
 
 ### Events
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 744d85aac8..2140759b33 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -57,10 +57,17 @@ interface NativeCommands {
     viewRef: React.ElementRef<ComponentType>,
     flag: boolean
   ) => void;
+  setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['blur', 'focus', 'clearText', 'toggleCancelButton'],
+  supportedCommands: [
+    'blur',
+    'focus',
+    'clearText',
+    'toggleCancelButton',
+    'setText',
+  ],
 });
 
 export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});
diff --git a/src/index.native.tsx b/src/index.native.tsx
index 7d721a15fe..24c81394bc 100644
--- a/src/index.native.tsx
+++ b/src/index.native.tsx
@@ -90,6 +90,10 @@ type SearchBarCommandsType = {
     viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>,
     flag: boolean
   ) => void;
+  setText: (
+    viewRef: React.ElementRef<typeof ScreensNativeModules.NativeSearchBar>,
+    text: string
+  ) => void;
 };
 
 // We initialize these lazily so that importing the module doesn't throw error when not linked
@@ -451,6 +455,12 @@ class SearchBar extends React.Component<SearchBarProps> {
     );
   }
 
+  setText(text: string) {
+    this._callMethodWithRef((ref) =>
+      ScreensNativeModules.NativeSearchBarCommands.setText(ref, text)
+    );
+  }
+
   render() {
     if (!isSearchBarAvailableForCurrentPlatform) {
       console.warn(
diff --git a/src/types.tsx b/src/types.tsx
index 84c4dd82d1..a0819c44ba 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -12,6 +12,7 @@ export type SearchBarCommands = {
   blur: () => void;
   clearText: () => void;
   toggleCancelButton: (show: boolean) => void;
+  setText: (text: string) => void;
 };
 
 export type StackPresentationTypes =
@@ -526,6 +527,7 @@ export interface SearchBarProps {
    * * `focus` - focuses the search bar
    * * `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
    * * `toggleCancelButton` - depending on passed boolean value, hides or shows cancel button (iOS only)
    */
   ref?: React.RefObject<SearchBarCommands>;