Change name of focus and blur events to searchFocus and searchBlur

Author: tboba

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,

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"
     }
 }

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"
     }
 }

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

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
 

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);

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;

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] };