From 840dd3e957e997600028d9d57cd1883d8ccf7662 Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Mon, 10 Jun 2024 16:04:20 +0200
Subject: [PATCH] Fix issues with types in SearchBar.tsx

---
 src/components/SearchBar.tsx            | 14 ++++++++------
 src/fabric/SearchBarNativeComponent.ts  |  6 +++---
 src/native-stack/views/HeaderConfig.tsx |  1 +
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 0454343ac3..619f019df2 100644
--- a/src/components/SearchBar.tsx
+++ b/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}
     />
   );
 }
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 79ec1c64ca..96dec5f7d0 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/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', {});
diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
index 1725e4bae6..0be5f1d58b 100644
--- a/src/native-stack/views/HeaderConfig.tsx
+++ b/src/native-stack/views/HeaderConfig.tsx
@@ -9,6 +9,7 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
+  SearchBarProps,
   isSearchBarAvailableForCurrentPlatform,
   executeNativeBackPress,
 } from 'react-native-screens';