Add types for native search bar

Author: tboba

src/components/SearchBar.tsx

@@ -3,18 +3,30 @@ import {
   isSearchBarAvailableForCurrentPlatform,
   SearchBarCommands,
   SearchBarProps,
-  RenamedSearchBarProps,
+  SearchBarEvents,
 } from 'react-native-screens';
-import { View } from 'react-native';
+import { View, NativeSyntheticEvent, TargetedEvent } from 'react-native';
 
 // Native components
 import SearchBarNativeComponent, {
   Commands as SearchBarNativeCommands,
+  SearchBarNativeProps,
 } from '../fabric/SearchBarNativeComponent';
 
-export const NativeSearchBar: React.ComponentType<RenamedSearchBarProps> &
+// Remove all events from SearchBar native component, since they differ from types in SearchBarEvents
+// and add ref object for commands.
+type SearchBarNativeType = Omit<
+  SearchBarNativeProps,
+  keyof SearchBarEvents | 'onSearchFocus' | 'onSearchBlur'
+> & {
+  ref?: React.RefObject<SearchBarCommands>;
+  onSearchFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  onSearchBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+};
+
+export const NativeSearchBar: React.ComponentType<SearchBarNativeType> &
   typeof NativeSearchBarCommands =
-  SearchBarNativeComponent as unknown as React.ComponentType<RenamedSearchBarProps> &
+  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeType> &
     SearchBarCommandsType;
 export const NativeSearchBarCommands: SearchBarCommandsType =
   SearchBarNativeCommands as SearchBarCommandsType;
@@ -30,7 +42,10 @@ type SearchBarCommandsType = {
   cancelSearch: (viewRef: NativeSearchBarRef) => void;
 };
 
-function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
+function SearchBar(
+  props: SearchBarProps & SearchBarEvents,
+  ref: React.Ref<SearchBarCommands>
+) {
   const searchBarRef = React.useRef<SearchBarCommands | null>(null);
 
   React.useImperativeHandle(ref, () => ({
@@ -87,4 +102,7 @@ function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
   );
 }
 
-export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);
+export default React.forwardRef<
+  SearchBarCommands,
+  SearchBarProps & SearchBarEvents
+>(SearchBar);

src/fabric/SearchBarNativeComponent.ts

@@ -21,7 +21,7 @@ type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 
 type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
 
-interface NativeProps extends ViewProps {
+export interface SearchBarNativeProps extends ViewProps {
   onSearchFocus?: DirectEventHandler<SearchBarEvent> | null;
   onSearchBlur?: DirectEventHandler<SearchBarEvent> | null;
   onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
@@ -50,9 +50,9 @@ interface NativeProps extends ViewProps {
   shouldShowHintSearchIcon?: WithDefault<boolean, true>;
 }
 
-type ComponentType = HostComponent<NativeProps>;
+type ComponentType = HostComponent<SearchBarNativeProps>;
 
-interface NativeCommands {
+interface SearchBarNativeCommands {
   blur: (viewRef: React.ElementRef<ComponentType>) => void;
   focus: (viewRef: React.ElementRef<ComponentType>) => void;
   clearText: (viewRef: React.ElementRef<ComponentType>) => void;
@@ -64,15 +64,16 @@ interface NativeCommands {
   cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: [
-    'blur',
-    'focus',
-    'clearText',
-    'toggleCancelButton',
-    'setText',
-    'cancelSearch',
-  ],
-});
+export const Commands: SearchBarNativeCommands =
+  codegenNativeCommands<SearchBarNativeCommands>({
+    supportedCommands: [
+      'blur',
+      'focus',
+      'clearText',
+      'toggleCancelButton',
+      'setText',
+      'cancelSearch',
+    ],
+  });
 
-export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});
+export default codegenNativeComponent<SearchBarNativeProps>('RNSSearchBar', {});

src/native-stack/types.tsx

@@ -22,6 +22,7 @@ import {
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
+  SearchBarEvents,
   SheetDetentTypes,
 } from 'react-native-screens';
 
@@ -334,7 +335,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Object in which you should pass props in order to render native iOS searchBar.
    */
-  searchBar?: SearchBarProps;
+  searchBar?: SearchBarProps & SearchBarEvents;
   /**
    * Describes heights where a sheet can rest.
    * Works only when `stackPresentation` is set to `formSheet`.

src/native-stack/views/HeaderConfig.tsx

@@ -9,7 +9,7 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
-  SearchBarProps,
+  SearchBarEvents,
   isSearchBarAvailableForCurrentPlatform,
   executeNativeBackPress,
 } from 'react-native-screens';
@@ -84,11 +84,11 @@ export default function HeaderConfig({
       searchBar &&
       !searchBar.disableBackButtonOverride
     ) {
-      const onFocus: SearchBarProps['onFocus'] = (...args) => {
+      const onFocus: SearchBarEvents['onFocus'] = (...args) => {
         createSubscription();
         searchBar.onFocus?.(...args);
       };
-      const onClose: SearchBarProps['onClose'] = (...args) => {
+      const onClose: SearchBarEvents['onClose'] = (...args) => {
         clearSubscription();
         searchBar.onClose?.(...args);
       };

src/types.tsx

@@ -633,44 +633,6 @@ export interface SearchBarProps {
    * Indicates whether to obscure the underlying content
    */
   obscureBackground?: boolean;
-  /**
-   * A callback that gets called when search bar has lost focus
-   */
-  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  /**
-   * A callback that gets called when the cancel button is pressed
-   *
-   * @platform ios
-   */
-  onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-
-  /**
-   * A callback that gets called when the text changes. It receives the current text value of the search bar.
-   */
-  onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-
-  /**
-   * A callback that gets called when search bar is closed
-   *
-   * @platform android
-   */
-  onClose?: () => void;
-  /**
-   * A callback that gets called when search bar has received focus
-   */
-  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  /**
-   * A callback that gets called when search bar is opened
-   *
-   * @platform android
-   */
-  onOpen?: () => void;
-  /**
-   * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
-   */
-  onSearchButtonPress?: (
-    e: NativeSyntheticEvent<TextInputFocusEventData>
-  ) => void;
   /**
    * Text displayed when search field is empty
    */
@@ -714,23 +676,42 @@ export interface SearchBarProps {
   shouldShowHintSearchIcon?: boolean;
 }
 
-/**
- * Since the search bar is a component that is extended from View on iOS,
- * we can't use onFocus and onBlur events directly there (as of the event naming conflicts).
- * To omit any breaking changes, we're handling this type to rename onFocus and onBlur events
- * to onSearchFocus and onSearchBlur inside the native component of the search bar.
- */
-export type RenamedSearchBarProps = Rename<
-  SearchBarProps,
-  { onFocus: 'onSearchFocus'; onBlur: 'onSearchBlur' }
->;
+export interface SearchBarEvents {
+  /**
+   * A callback that gets called when search bar has received focus
+   */
+  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when search bar has lost focus
+   */
+  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
+   */
+  onSearchButtonPress?: (
+    e: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void;
+  /**
+   * A callback that gets called when the cancel button is pressed
+   *
+   * @platform ios
+   */
+  onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
 
-/**
- * Helper type, used to rename certain keys in the interface, given from object.
- */
-type Rename<
-  T,
-  R extends {
-    [K in keyof R]: K extends keyof T ? PropertyKey : 'Error: key not in T';
-  }
-> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] };
+  /**
+   * A callback that gets called when the text changes. It receives the current text value of the search bar.
+   */
+  onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  /**
+   * A callback that gets called when search bar is opened
+   *
+   * @platform android
+   */
+  onOpen?: () => void;
+  /**
+   * A callback that gets called when search bar is closed
+   *
+   * @platform android
+   */
+  onClose?: () => void;
+}