feat: add imperative API for search bar

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 { SearchBarCommands, SearchBarProps } from 'react-native-screens';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -46,10 +46,12 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   const [autoCapitalize, setAutoCapitalize] =
     useState<AutoCapitalize>('sentences');
   const [inputType, setInputType] = useState<InputType>('text');
+  const searchBarRef = useRef<SearchBarCommands>(null);
 
   useLayoutEffect(() => {
     navigation.setOptions({
       searchBar: {
+        ref: searchBarRef,
         barTintColor,
         hintTextColor,
         headerIconColor,
@@ -170,6 +172,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')}

FabricTestExample/App.js

@@ -58,6 +58,7 @@ import Test1072 from './src/Test1072';
 import Test1084 from './src/Test1084';
 import Test1091 from './src/Test1091';
 import Test1096 from './src/Test1096';
+import Test1097 from './src/Test1097';
 import Test1153 from './src/Test1153';
 import Test1157 from './src/Test1157';
 import Test1162 from './src/Test1162';

FabricTestExample/src/Test1097.tsx

@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+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, SearchBarCommands} 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.Screen name="Third" component={Third} />
+      </AppStack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+  const searchBarRef = React.useRef<SearchBarCommands>();
+
+  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 third screen"
+        onPress={() => navigation.navigate('Third')}
+      />
+      <Button
+        title="Tap me for ref"
+        onPress={() => searchBarRef.current?.focus()}
+      />
+      {items
+        .filter(
+          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
+        )
+        .map((item) => (
+          <Button
+            title={item}
+            key={item}
+            onPress={() => {
+              console.warn(`${item} clicked`);
+            }}
+          />
+        ))}
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
+      <Button
+        title="Tap me for third screen"
+        onPress={() => navigation.navigate('Third')}
+      />
+      <Button
+        title="Tap me for ref"
+        onPress={() => searchBarRef.current?.focus()}
+      />
+    </ScrollView>
+  );
+}
+
+function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
+      <Button
+        title="Tap me for third screen"
+        onPress={() => navigation.navigate('Third')}
+      />
+    </ScrollView>
+  );
+}
+
+function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+  const searchBarRef = React.useRef<SearchBarCommands>();
+
+  const searchBarProps: SearchBarProps = {
+    // @ts-ignore
+    ref: searchBarRef,
+    barTintColor: 'powderblue',
+    hideWhenScrolling: true,
+    obscureBackground: false,
+    hideNavigationBar: false,
+    autoCapitalize: 'sentences',
+    placeholder: 'Some 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
+    })
+  }, [navigation]);
+
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      keyboardDismissMode="on-drag">
+      <Button
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
+      <Button
+        title="Focus search bar"
+        onPress={() => searchBarRef.current?.focus()}
+      />
+      <Button 
+        title="Remove focus from search bar"
+        onPress={() => searchBarRef.current?.blur()}
+      />
+      <Button
+        title="Clear text in search bar"
+        onPress={() => searchBarRef.current?.clearText()}
+      />
+      <Button
+        title="Show cancel button"
+        onPress={() => searchBarRef.current?.toggleCancelButton(true)}
+      />
+      <Button
+        title="Hide cancel button"
+        onPress={() => searchBarRef.current?.toggleCancelButton(false)}
+      />
+      <Button
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
+      <Button
+        title="Focus search bar"
+        onPress={() => searchBarRef.current?.focus()}
+      />
+    </ScrollView>
+  )
+}

TestsExample/App.js

@@ -58,6 +58,7 @@ import Test1072 from './src/Test1072';
 import Test1084 from './src/Test1084';
 import Test1091 from './src/Test1091';
 import Test1096 from './src/Test1096';
+import Test1097 from './src/Test1097';
 import Test1153 from './src/Test1153';
 import Test1157 from './src/Test1157';
 import Test1162 from './src/Test1162';