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

@@ -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>
-  )
+  );
 }

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')}

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

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")
         }
     }

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
     }

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:

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

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

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', {});

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(

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>;