From 6dacf11c2e4bab5e99cbc371155014a91f33a9d7 Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Tue, 21 May 2024 17:26:10 +0200
Subject: [PATCH 1/8] Change name of focus and blur events to searchFocus and
 searchBlur

---
 .../swmansion/rnscreens/SearchBarManager.kt   |  4 ++--
 .../rnscreens/events/SearchBarBlurEvent.kt    |  2 +-
 .../rnscreens/events/SearchBarFocusEvent.kt   |  2 +-
 ios/RNSSearchBar.h                            | 10 ++++-----
 ios/RNSSearchBar.mm                           | 22 +++++++++----------
 src/components/SearchBar.tsx                  | 14 +++++++++---
 src/fabric/SearchBarNativeComponent.ts        |  4 ++--
 src/types.tsx                                 | 21 ++++++++++++++++++
 8 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt b/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
index d28563e10c..d0d2bd6b0c 100644
--- a/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt
@@ -114,13 +114,13 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.of(
             SearchBarBlurEvent.EVENT_NAME,
-            MapBuilder.of("registrationName", "onBlur"),
+            MapBuilder.of("registrationName", "onSearchBlur"),
             SearchBarChangeTextEvent.EVENT_NAME,
             MapBuilder.of("registrationName", "onChangeText"),
             SearchBarCloseEvent.EVENT_NAME,
             MapBuilder.of("registrationName", "onClose"),
             SearchBarFocusEvent.EVENT_NAME,
-            MapBuilder.of("registrationName", "onFocus"),
+            MapBuilder.of("registrationName", "onSearchFocus"),
             SearchBarOpenEvent.EVENT_NAME,
             MapBuilder.of("registrationName", "onOpen"),
             SearchBarSearchButtonPressEvent.EVENT_NAME,
diff --git a/android/src/main/java/com/swmansion/rnscreens/events/SearchBarBlurEvent.kt b/android/src/main/java/com/swmansion/rnscreens/events/SearchBarBlurEvent.kt
index dbe1424a99..2a73f90e30 100644
--- a/android/src/main/java/com/swmansion/rnscreens/events/SearchBarBlurEvent.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/events/SearchBarBlurEvent.kt
@@ -13,6 +13,6 @@ class SearchBarBlurEvent(surfaceId: Int, viewId: Int) : Event<SearchBarBlurEvent
     override fun getEventData(): WritableMap? = Arguments.createMap()
 
     companion object {
-        const val EVENT_NAME = "topBlur"
+        const val EVENT_NAME = "topSearchBlur"
     }
 }
diff --git a/android/src/main/java/com/swmansion/rnscreens/events/SearchBarFocusEvent.kt b/android/src/main/java/com/swmansion/rnscreens/events/SearchBarFocusEvent.kt
index 99ef941111..fda5180fb7 100644
--- a/android/src/main/java/com/swmansion/rnscreens/events/SearchBarFocusEvent.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/events/SearchBarFocusEvent.kt
@@ -13,6 +13,6 @@ class SearchBarFocusEvent(surfaceId: Int, viewId: Int) : Event<SearchBarFocusEve
     override fun getEventData(): WritableMap? = Arguments.createMap()
 
     companion object {
-        const val EVENT_NAME = "topFocus"
+        const val EVENT_NAME = "topSearchFocus"
     }
 }
diff --git a/ios/RNSSearchBar.h b/ios/RNSSearchBar.h
index 9ac04c0ba2..872ccc73fd 100644
--- a/ios/RNSSearchBar.h
+++ b/ios/RNSSearchBar.h
@@ -29,11 +29,11 @@
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #else
-@property (nonatomic, copy) RCTBubblingEventBlock onChangeText;
-@property (nonatomic, copy) RCTBubblingEventBlock onCancelButtonPress;
-@property (nonatomic, copy) RCTBubblingEventBlock onSearchButtonPress;
-@property (nonatomic, copy) RCTBubblingEventBlock onFocus;
-@property (nonatomic, copy) RCTBubblingEventBlock onBlur;
+@property (nonatomic, copy) RCTDirectEventBlock onChangeText;
+@property (nonatomic, copy) RCTDirectEventBlock onCancelButtonPress;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchButtonPress;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchFocus;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchBlur;
 #endif
 
 @end
diff --git a/ios/RNSSearchBar.mm b/ios/RNSSearchBar.mm
index 6ca1f36263..73a44edbd8 100644
--- a/ios/RNSSearchBar.mm
+++ b/ios/RNSSearchBar.mm
@@ -67,11 +67,11 @@ - (void)emitOnFocusEvent
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_eventEmitter != nullptr) {
     std::dynamic_pointer_cast<const react::RNSSearchBarEventEmitter>(_eventEmitter)
-        ->onFocus(react::RNSSearchBarEventEmitter::OnFocus{});
+        ->onSearchFocus(react::RNSSearchBarEventEmitter::OnSearchFocus{});
   }
 #else
-  if (self.onFocus) {
-    self.onFocus(@{});
+  if (self.onSearchFocus) {
+    self.onSearchFocus(@{});
   }
 #endif
 }
@@ -81,11 +81,11 @@ - (void)emitOnBlurEvent
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_eventEmitter != nullptr) {
     std::dynamic_pointer_cast<const react::RNSSearchBarEventEmitter>(_eventEmitter)
-        ->onBlur(react::RNSSearchBarEventEmitter::OnBlur{});
+        ->onSearchBlur(react::RNSSearchBarEventEmitter::OnSearchBlur{});
   }
 #else
-  if (self.onBlur) {
-    self.onBlur(@{});
+  if (self.onSearchBlur) {
+    self.onSearchBlur(@{});
   }
 #endif
 }
@@ -414,11 +414,11 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(cancelButtonText, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placement, RNSSearchBarPlacement)
 
-RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onSearchButtonPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchButtonPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchFocus, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchBlur, RCTDirectEventBlock)
 
 #ifndef RCT_NEW_ARCH_ENABLED
 
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index d313a14c5e..104428d19d 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -3,6 +3,7 @@ import {
   isSearchBarAvailableForCurrentPlatform,
   SearchBarCommands,
   SearchBarProps,
+  RenamedSearchBarProps,
 } from 'react-native-screens';
 import { View } from 'react-native';
 
@@ -11,9 +12,9 @@ import SearchBarNativeComponent, {
   Commands as SearchBarNativeCommands,
 } from '../fabric/SearchBarNativeComponent';
 
-export const NativeSearchBar: React.ComponentType<SearchBarProps> &
+export const NativeSearchBar: React.ComponentType<RenamedSearchBarProps> &
   typeof NativeSearchBarCommands =
-  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarProps> &
+  SearchBarNativeComponent as unknown as React.ComponentType<RenamedSearchBarProps> &
     SearchBarCommandsType;
 export const NativeSearchBarCommands: SearchBarCommandsType =
   SearchBarNativeCommands as SearchBarCommandsType;
@@ -76,7 +77,14 @@ function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
     return View as unknown as React.ReactNode;
   }
 
-  return <NativeSearchBar {...props} ref={searchBarRef} />;
+  return (
+    <NativeSearchBar
+      onSearchFocus={props.onFocus}
+      onSearchBlur={props.onBlur}
+      {...props}
+      ref={searchBarRef}
+    />
+  );
 }
 
 export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 60ad56421a..3dde1654de 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -22,8 +22,8 @@ type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
 
 interface NativeProps extends ViewProps {
-  onFocus?: DirectEventHandler<SearchBarEvent> | null;
-  onBlur?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchFocus?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchBlur?: DirectEventHandler<SearchBarEvent> | null;
   onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
   onCancelButtonPress?: DirectEventHandler<SearchBarEvent> | null;
   onChangeText?: DirectEventHandler<ChangeTextEvent> | null;
diff --git a/src/types.tsx b/src/types.tsx
index b67831f696..e3edb742f8 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -713,3 +713,24 @@ 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' }
+>;
+
+/**
+ * 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] };

From 299ce6a18dae0b04f81b9c49ec5a031ef88e193e Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Wed, 22 May 2024 15:10:53 +0200
Subject: [PATCH 2/8] Add types for native search bar

---
 src/components/SearchBar.tsx            | 30 ++++++--
 src/fabric/SearchBarNativeComponent.ts  | 29 ++++----
 src/native-stack/types.tsx              |  3 +-
 src/native-stack/views/HeaderConfig.tsx |  6 +-
 src/types.tsx                           | 95 ++++++++++---------------
 5 files changed, 82 insertions(+), 81 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 104428d19d..9cdd6026fd 100644
--- a/src/components/SearchBar.tsx
+++ b/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);
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 3dde1654de..050cf0dddd 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';
 
-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', {});
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index f461ed2972..b9e5876c3d 100644
--- a/src/native-stack/types.tsx
+++ b/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`.
diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
index 0be5f1d58b..c1ab68114f 100644
--- a/src/native-stack/views/HeaderConfig.tsx
+++ b/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);
       };
diff --git a/src/types.tsx b/src/types.tsx
index e3edb742f8..dd84c1e5f0 100644
--- a/src/types.tsx
+++ b/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;
+}

From e26330e1871012e63dca4eef35b7cab40148e058 Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Mon, 10 Jun 2024 14:59:49 +0200
Subject: [PATCH 3/8] Revert changes from first approach

---
 react-navigation                        |  2 +-
 src/components/SearchBar.tsx            | 43 ++++++--------
 src/fabric/SearchBarNativeComponent.ts  |  6 +-
 src/native-stack/types.tsx              |  3 +-
 src/native-stack/views/HeaderConfig.tsx |  5 +-
 src/types.tsx                           | 77 ++++++++++++-------------
 6 files changed, 62 insertions(+), 74 deletions(-)

diff --git a/react-navigation b/react-navigation
index d0abdee67f..52a3234b7a 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit d0abdee67f5db8cf39112af535846ffededfb21d
+Subproject commit 52a3234b7aaf4d4fcc9c0155f44f3ea2233f0f40
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 9cdd6026fd..0454343ac3 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -3,30 +3,22 @@ import {
   isSearchBarAvailableForCurrentPlatform,
   SearchBarCommands,
   SearchBarProps,
-  SearchBarEvents,
 } from 'react-native-screens';
-import { View, NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import { View, NativeSyntheticEvent, TargetedEvent, TextInputFocusEventData } from 'react-native';
 
 // Native components
 import SearchBarNativeComponent, {
   Commands as SearchBarNativeCommands,
   SearchBarNativeProps,
+  SearchBarEvent,
+  SearchButtonPressedEvent,
+  ChangeTextEvent,
 } from '../fabric/SearchBarNativeComponent';
+import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
-// 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> &
+export const NativeSearchBar: React.ComponentType<SearchBarNativeProps> &
   typeof NativeSearchBarCommands =
-  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeType> &
+  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
     SearchBarCommandsType;
 export const NativeSearchBarCommands: SearchBarCommandsType =
   SearchBarNativeCommands as SearchBarCommandsType;
@@ -42,10 +34,7 @@ type SearchBarCommandsType = {
   cancelSearch: (viewRef: NativeSearchBarRef) => void;
 };
 
-function SearchBar(
-  props: SearchBarProps & SearchBarEvents,
-  ref: React.Ref<SearchBarCommands>
-) {
+function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
   const searchBarRef = React.useRef<SearchBarCommands | null>(null);
 
   React.useImperativeHandle(ref, () => ({
@@ -94,15 +83,19 @@ function SearchBar(
 
   return (
     <NativeSearchBar
-      onSearchFocus={props.onFocus}
-      onSearchBlur={props.onBlur}
+      onSearchFocus={props.onFocus as DirectEventHandler<SearchBarEvent>}
+      onSearchBlur={props.onBlur as DirectEventHandler<SearchBarEvent>}
+      onSearchButtonPress={
+        props.onSearchButtonPress as DirectEventHandler<TextInputFocusEventData>
+      }
+      onCancelButtonPress={
+        props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
+      }
+      onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
       {...props}
       ref={searchBarRef}
     />
   );
 }
 
-export default React.forwardRef<
-  SearchBarCommands,
-  SearchBarProps & SearchBarEvents
->(SearchBar);
+export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 050cf0dddd..79ec1c64ca 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -7,13 +7,13 @@ import type {
 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
-type SearchBarEvent = Readonly<{}>;
+export type SearchBarEvent = Readonly<{}>;
 
-type SearchButtonPressedEvent = Readonly<{
+export type SearchButtonPressedEvent = Readonly<{
   text?: string;
 }>;
 
-type ChangeTextEvent = Readonly<{
+export type ChangeTextEvent = Readonly<{
   text?: string;
 }>;
 
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 46e1cdad02..8ea55a01d1 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -22,7 +22,6 @@ import {
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
-  SearchBarEvents,
   SheetDetentTypes,
 } from 'react-native-screens';
 
@@ -341,7 +340,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Object in which you should pass props in order to render native iOS searchBar.
    */
-  searchBar?: SearchBarProps & SearchBarEvents;
+  searchBar?: SearchBarProps;
   /**
    * Describes heights where a sheet can rest.
    * Works only when `stackPresentation` is set to `formSheet`.
diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
index c1ab68114f..1725e4bae6 100644
--- a/src/native-stack/views/HeaderConfig.tsx
+++ b/src/native-stack/views/HeaderConfig.tsx
@@ -9,7 +9,6 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
-  SearchBarEvents,
   isSearchBarAvailableForCurrentPlatform,
   executeNativeBackPress,
 } from 'react-native-screens';
@@ -84,11 +83,11 @@ export default function HeaderConfig({
       searchBar &&
       !searchBar.disableBackButtonOverride
     ) {
-      const onFocus: SearchBarEvents['onFocus'] = (...args) => {
+      const onFocus: SearchBarProps['onFocus'] = (...args) => {
         createSubscription();
         searchBar.onFocus?.(...args);
       };
-      const onClose: SearchBarEvents['onClose'] = (...args) => {
+      const onClose: SearchBarProps['onClose'] = (...args) => {
         clearSubscription();
         searchBar.onClose?.(...args);
       };
diff --git a/src/types.tsx b/src/types.tsx
index c1f4345e63..ebd4f1b3f3 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -639,6 +639,43 @@ export interface SearchBarProps {
    * Indicates whether to obscure the underlying content
    */
   obscureBackground?: boolean;
+  /**
+   * 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;
+
+  /**
+   * 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;
   /**
    * Text displayed when search field is empty
    */
@@ -681,43 +718,3 @@ export interface SearchBarProps {
    */
   shouldShowHintSearchIcon?: boolean;
 }
-
-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;
-
-  /**
-   * 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;
-}

From 2ea8296d5c70a12189a69e531bf23dfffccfc9cc Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Mon, 10 Jun 2024 16:06:17 +0200
Subject: [PATCH 4/8] Fix issues with Searchbar.tsx

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
---
 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';

From 922dbfd773c6d83b7eaf8a13914308eb80fa403f Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Tue, 11 Jun 2024 10:29:33 +0200
Subject: [PATCH 5/8] Revert changes from types.tsx

---
 src/types.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/types.tsx b/src/types.tsx
index ebd4f1b3f3..c32dedfada 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -639,43 +639,42 @@ export interface SearchBarProps {
    * Indicates whether to obscure the underlying content
    */
   obscureBackground?: boolean;
-  /**
-   * 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;
-
   /**
    * 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
+   * A callback that gets called when search bar is closed
    *
    * @platform android
    */
-  onOpen?: () => void;
+  onClose?: () => void;
   /**
-   * A callback that gets called when search bar is closed
+   * 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
    */
-  onClose?: () => void;
+  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
    */

From 8bf91c8c4a78e00605d030802220dc00c4818d36 Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Tue, 11 Jun 2024 13:31:31 +0200
Subject: [PATCH 6/8] Revert changes from types.tsx 2

---
 src/types.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types.tsx b/src/types.tsx
index c32dedfada..84cb6670b9 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -649,10 +649,12 @@ export interface SearchBarProps {
    * @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
    *

From 3ac0b6549c317e124d7b27ee5f92e5ff1e5c9a1c Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Tue, 11 Jun 2024 13:33:37 +0200
Subject: [PATCH 7/8] Update main from react-navigation

---
 react-navigation | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-navigation b/react-navigation
index 52a3234b7a..25e834b4f3 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit 52a3234b7aaf4d4fcc9c0155f44f3ea2233f0f40
+Subproject commit 25e834b4f330fb05b4ecdbe81ef7f2f065fd26c8

From 5e2bede366d3a0c0602bea54272f782d8128cf9a Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Tue, 11 Jun 2024 13:34:44 +0200
Subject: [PATCH 8/8] Revert renaming NativeCommands

---
 src/fabric/SearchBarNativeComponent.ts | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index 96dec5f7d0..66f59f82ba 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -52,7 +52,7 @@ export interface NativeProps extends ViewProps {
 
 type ComponentType = HostComponent<NativeProps>;
 
-interface SearchBarNativeCommands {
+interface NativeCommands {
   blur: (viewRef: React.ElementRef<ComponentType>) => void;
   focus: (viewRef: React.ElementRef<ComponentType>) => void;
   clearText: (viewRef: React.ElementRef<ComponentType>) => void;
@@ -64,16 +64,15 @@ interface SearchBarNativeCommands {
   cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
-export const Commands: SearchBarNativeCommands =
-  codegenNativeCommands<SearchBarNativeCommands>({
-    supportedCommands: [
-      'blur',
-      'focus',
-      'clearText',
-      'toggleCancelButton',
-      'setText',
-      'cancelSearch',
-    ],
-  });
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'blur',
+    'focus',
+    'clearText',
+    'toggleCancelButton',
+    'setText',
+    'cancelSearch',
+  ],
+});
 
 export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});