Fix issues with types in SearchBar.tsx

Author: tboba

src/components/SearchBar.tsx

@@ -4,19 +4,21 @@ import {
   SearchBarCommands,
   SearchBarProps,
 } from 'react-native-screens';
-import { View, NativeSyntheticEvent, TargetedEvent, TextInputFocusEventData } from 'react-native';
+import { View } from 'react-native';
 
 // Native components
 import SearchBarNativeComponent, {
   Commands as SearchBarNativeCommands,
-  SearchBarNativeProps,
+  NativeProps as SearchBarNativeProps,
   SearchBarEvent,
   SearchButtonPressedEvent,
   ChangeTextEvent,
 } from '../fabric/SearchBarNativeComponent';
 import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
-export const NativeSearchBar: React.ComponentType<SearchBarNativeProps> &
+export const NativeSearchBar: React.ComponentType<
+  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
+> &
   typeof NativeSearchBarCommands =
   SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
     SearchBarCommandsType;
@@ -83,17 +85,17 @@ function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
 
   return (
     <NativeSearchBar
+      ref={searchBarRef}
+      {...props}
       onSearchFocus={props.onFocus as DirectEventHandler<SearchBarEvent>}
       onSearchBlur={props.onBlur as DirectEventHandler<SearchBarEvent>}
       onSearchButtonPress={
-        props.onSearchButtonPress as DirectEventHandler<TextInputFocusEventData>
+        props.onSearchButtonPress as DirectEventHandler<SearchButtonPressedEvent>
       }
       onCancelButtonPress={
         props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
       }
       onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
-      {...props}
-      ref={searchBarRef}
     />
   );
 }

src/fabric/SearchBarNativeComponent.ts

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

src/native-stack/views/HeaderConfig.tsx

@@ -9,6 +9,7 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
+  SearchBarProps,
   isSearchBarAvailableForCurrentPlatform,
   executeNativeBackPress,
 } from 'react-native-screens';