Add API for imperative actions on RNSSearchBar

Example/src/screens/SearchBar.tsx

@@ -1,6 +1,6 @@
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { I18nManager, ScrollView, Text, StyleSheet } from 'react-native';
-import { SearchBarProps } from 'react-native-screens';
+import { SearchBarRef, SearchBarProps } from 'react-native-screens';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -49,10 +49,12 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     'sentences'
   );
   const [inputType, setInputType] = useState<InputType>('text');
+  const searchBarRef = useRef<SearchBarRef>(null);
 
   useLayoutEffect(() => {
     navigation.setOptions({
       searchBar: {
+        ref: searchBarRef,
         barTintColor,
         hintTextColor,
         headerIconColor,
@@ -173,6 +175,21 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         value={shouldShowHintSearchIcon}
         onValueChange={setShouldShowHintSearchIcon}
       />
+      <Text style={styles.heading}>Imperative actions</Text>
+      <Button onPress={() => searchBarRef.current?.blur()} title="Blur" />
+      <Button onPress={() => searchBarRef.current?.focus()} title="Focus" />
+      <Button
+        onPress={() => searchBarRef.current?.clearText()}
+        title="Clear Text"
+      />
+      <Button
+        onPress={() => searchBarRef.current?.toggleCancelButton(true)}
+        title="Show cancel"
+      />
+      <Button
+        onPress={() => searchBarRef.current?.toggleCancelButton(false)}
+        title="Hide cancel"
+      />
       <Text style={styles.heading}>Other</Text>
       <Button
         onPress={() => navigation.navigate('Search')}

TestsExample/src/Test1097.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from 'react-native-screens/native-stack';
+import {SearchBarProps} from 'react-native-screens';
+
+const AppStack = createNativeStackNavigator();
+
+export default function App(): JSX.Element {
+  return (
+    <NavigationContainer>
+      <AppStack.Navigator
+        screenOptions={{
+          headerLargeTitle: true,
+          headerTranslucent: true,
+        }}>
+        <AppStack.Screen name="First" component={First} />
+        <AppStack.Screen name="Second" component={Second} />
+      </AppStack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+  const searchBarRef = React.useRef();
+
+  React.useEffect(() => {
+    navigation.setOptions({
+      searchBar: searchBarOptions,
+    });
+  }, [navigation]);
+
+  const [search, setSearch] = React.useState('');
+
+  const searchBarOptions: SearchBarProps = {
+    // @ts-ignore
+    ref: searchBarRef,
+    barTintColor: 'powderblue',
+    hideWhenScrolling: true,
+    obscureBackground: false,
+    hideNavigationBar: false,
+    autoCapitalize: 'sentences',
+    placeholder: 'Some text',
+    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+      setSearch(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'),
+  };
+
+  const items = [
+    'Apples',
+    'Pie',
+    'Juice',
+    'Cake',
+    'Nuggets',
+    'Some',
+    'Other',
+    'Stuff',
+    'To',
+    'Fill',
+    'The',
+    'Scrolling',
+    'Space',
+  ];
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      keyboardDismissMode="on-drag">
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
+      <Button
+        title="Tap me for ref"
+        onPress={() => (searchBarRef.current as any).focus()}
+      />
+      {items
+        .filter(
+          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
+        )
+        .map((item) => (
+          <Button
+            title={item}
+            key={item}
+            onPress={() => {
+              console.warn(`${item} clicked`);
+            }}
+          />
+        ))}
+    </ScrollView>
+  );
+}
+
+function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
+    </ScrollView>
+  );
+}

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -316,6 +316,14 @@ 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)
+- `ref` - A React ref to imperatively modify search bar.
+
+Allowed imperative actions on search bar are:
+
+- `focus` - Function to focus on search bar. (iOS only)
+- `blur` - Function to remove focus from search bar. (iOS only)
+- `clearText` - Function to clear text in search bar. (iOS only)
+- `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

@@ -348,4 +348,40 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
 
+RCT_EXPORT_METHOD(focus : (NSNumber *_Nonnull)reactTag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    UISearchController *searchBarController = searchBar.controller;
+    [searchBarController.searchBar becomeFirstResponder];
+  }];
+}
+
+RCT_EXPORT_METHOD(blur : (NSNumber *_Nonnull)reactTag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    UISearchController *searchBarController = searchBar.controller;
+    [searchBarController.searchBar resignFirstResponder];
+  }];
+}
+
+RCT_EXPORT_METHOD(clearText : (NSNumber *_Nonnull)reactTag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    UISearchController *searchBarController = searchBar.controller;
+    [searchBarController.searchBar setText:@""];
+  }];
+}
+
+RCT_EXPORT_METHOD(toggleCancelButton : (NSNumber *_Nonnull)reactTag flag : (BOOL *)flag)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) {
+    RNSSearchBar *searchBar = viewRegistry[reactTag];
+    UISearchController *searchBarController = searchBar.controller;
+    [searchBarController.searchBar setShowsCancelButton:flag ? YES : NO animated:YES];
+  }];
+}
+
 @end

native-stack/README.md

@@ -542,6 +542,28 @@ The search and close icon color shown in the header. (Android only)
 
 Show the search hint icon when search bar is focused. (Android only)
 
+#### `ref`
+
+A React ref to imperatively modify search bar.
+
+#### Imperative actions
+
+##### `focus` (iOS only)
+
+Focus on search bar.
+
+##### `blur` (iOS only)
+
+Remove focus from search bar.
+
+##### `clearText` (iOS only)
+
+Clear text in search bar.
+
+##### `toggleCancelButton` (iOS only)
+
+Toggle cancel button display near search bar.
+
 ### Events
 
 The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are:

src/index.native.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {
   Animated,
+  findNodeHandle,
+  NativeModules,
   Image,
   ImageProps,
   Platform,
@@ -83,7 +85,12 @@ let NativeScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<
   ViewProps & { type?: HeaderSubviewTypes }
 >>;
 let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
-let NativeSearchBar: React.ComponentType<SearchBarProps>;
+let NativeSearchBar: React.ComponentType<SearchBarProps> & {
+  focus: (reactTag: number | null) => void;
+  blur: (reactTag: number | null) => void;
+  clearText: (reactTag: number | null) => void;
+  toggleCancelButton: (reactTag: number | null, flag: boolean) => void;
+};
 let NativeFullWindowOverlay: React.ComponentType<View>;
 
 const ScreensNativeModules = {
@@ -353,6 +360,38 @@ const ScreenStackHeaderBackButtonImage = (props: ImageProps): JSX.Element => (
   </ScreensNativeModules.NativeScreenStackHeaderSubview>
 );
 
+class SearchBar extends React.Component<SearchBarProps> {
+  blur() {
+    return NativeModules.RNSSearchBarManager.blur(findNodeHandle(this));
+  }
+
+  focus() {
+    return NativeModules.RNSSearchBarManager.focus(findNodeHandle(this));
+  }
+
+  toggleCancelButton(flag: boolean) {
+    return NativeModules.RNSSearchBarManager.toggleCancelButton(
+      findNodeHandle(this),
+      flag
+    );
+  }
+
+  clearText() {
+    return NativeModules.RNSSearchBarManager.clearText(findNodeHandle(this));
+  }
+
+  render() {
+    if (!isSearchBarAvailableForCurrentPlatform) {
+      console.warn(
+        'Importing SearchBar is only valid on iOS and Android devices.'
+      );
+      return View;
+    }
+
+    return <ScreensNativeModules.NativeSearchBar {...this.props} />;
+  }
+}
+
 const ScreenStackHeaderRightView = (
   props: React.PropsWithChildren<ViewProps>
 ): JSX.Element => (
@@ -428,6 +467,7 @@ module.exports = {
   ScreenContext,
   ScreenStack,
   InnerScreen,
+  SearchBar,
 
   get NativeScreen() {
     return ScreensNativeModules.NativeScreen;
@@ -447,16 +487,6 @@ module.exports = {
   get ScreenStackHeaderSubview() {
     return ScreensNativeModules.NativeScreenStackHeaderSubview;
   },
-  get SearchBar() {
-    if (!isSearchBarAvailableForCurrentPlatform) {
-      console.warn(
-        'Importing SearchBar is only valid on iOS and Android devices.'
-      );
-      return View;
-    }
-
-    return ScreensNativeModules.NativeSearchBar;
-  },
   get FullWindowOverlay() {
     if (Platform.OS !== 'ios') {
       console.warn('Importing FullWindowOverlay is only valid on iOS devices.');

src/index.tsx

@@ -97,7 +97,7 @@ export const ScreenStackHeaderCenterView = (
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<SearchBarProps>
+  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>
 ): JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;

src/types.tsx

@@ -7,6 +7,15 @@ import {
   TextInputFocusEventData,
 } from 'react-native';
 
+type SearchBarRefObject = React.RefObject<{
+  focus: () => void;
+  blur: () => void;
+  clearText: () => void;
+  toggleCancelButton: (flag: boolean) => void;
+}>;
+
+export type SearchBarRef = NonNullable<SearchBarRefObject['current']>;
+
 export type StackPresentationTypes =
   | 'push'
   | 'modal'
@@ -430,6 +439,8 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
 }
 
 export interface SearchBarProps {
+  ref?: React.RefObject<SearchBarRef>;
+
   /**
    * The auto-capitalization behavior
    */