feat(ios): add searchBar bookmark button and handler

apps/src/screens/SearchBar.tsx

@@ -43,6 +43,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
     useState(true);
   const [hideWhenScrolling, setHideWhenScrolling] = useState(false);
   const [obscureBackground, setObscureBackground] = useState(false);
+  const [showBookmarkButton, setShowBookmarkButton] = useState(false);
   const [hideNavigationBar, setHideNavigationBar] = useState(false);
   const [autoCapitalize, setAutoCapitalize] =
     useState<AutoCapitalize>('sentences');
@@ -59,6 +60,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
         shouldShowHintSearchIcon,
         hideWhenScrolling,
         obscureBackground,
+        showBookmarkButton,
         hideNavigationBar,
         autoCapitalize,
         placeholder,
@@ -69,6 +71,11 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
             message: '[iOS] Cancel button pressed',
             backgroundColor: 'orange',
           }),
+        onBookmarkButtonPress: () =>
+          toast.push({
+            message: '[iOS] Bookmark button pressed',
+            backgroundColor: 'orange',
+          }),
         onClose: () =>
           toast.push({
             message: '[Android] Closing',
@@ -106,6 +113,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
     shouldShowHintSearchIcon,
     hideWhenScrolling,
     obscureBackground,
+    showBookmarkButton,
     hideNavigationBar,
     autoCapitalize,
     inputType,
@@ -149,6 +157,11 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
         value={hideWhenScrolling}
         onValueChange={setHideWhenScrolling}
       />
+      <SettingsSwitch
+        label="Show Bookmark Button"
+        value={showBookmarkButton}
+        onValueChange={setShowBookmarkButton}
+      />
       <ThemedText style={styles.heading}>Android only</ThemedText>
       <SettingsPicker<InputType>
         label="Input type"

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -449,9 +449,11 @@ To render a search bar use `ScreenStackHeaderSearchBarView` with `<SearchBar>` c
 - `hideWhenScrolling` - Boolean indicating whether to hide the search bar when scrolling. Defaults to `true`. (iOS only)
 - `inputType` - Specifies type of input and keyboard for search bar. Can be one of `'text'`, `'phone'`, `'number'`, `'email'`. Defaults to `'text'`. (Android only)
 - `obscureBackground` - Boolean indicating whether to obscure the underlying content with semi-transparent overlay. Defaults to `true`. (iOS only)
+- `showBookmarkButton` - Boolean indicating whether the search bar should display a bookmark button. Defaults to `false`. (iOS only)
 - `onBlur` - A callback that gets called when search bar has lost focus.
 - `onChangeText` - A callback that gets called when the text changes. It receives the current text value of the search bar.
 - `onCancelButtonPress` - A callback that gets called when the cancel button is pressed.
+- `onBookmarkButtonPress` - A callback that gets called when the bookmark button is pressed.
 - `onClose` - A callback that gets called when search bar is closing. (Android only)
 - `onFocus` - A callback that gets called when search bar has received focus.
 - `onOpen` - A callback that gets called when search bar is expanding. (Android only)

ios/RNSSearchBar.h

@@ -31,6 +31,7 @@
 #else
 @property (nonatomic, copy) RCTDirectEventBlock onChangeText;
 @property (nonatomic, copy) RCTDirectEventBlock onCancelButtonPress;
+@property (nonatomic, copy) RCTDirectEventBlock onBookmarkButtonPress;
 @property (nonatomic, copy) RCTDirectEventBlock onSearchButtonPress;
 @property (nonatomic, copy) RCTDirectEventBlock onSearchFocus;
 @property (nonatomic, copy) RCTDirectEventBlock onSearchBlur;

ios/RNSSearchBar.mm

@@ -127,6 +127,20 @@ - (void)emitOnCancelButtonPressEvent
   }
 #endif
 }
+- (void)emitOnBookmarkButtonPressEvent
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  if (_eventEmitter != nullptr) {
+    std::dynamic_pointer_cast<const react::RNSSearchBarEventEmitter>(_eventEmitter)
+        ->onBookmarkButtonPress(react::RNSSearchBarEventEmitter::onBookmarkButtonPress{});
+  }
+#else
+  if (self.onBookmarkButtonPress) {
+    self.onBookmarkButtonPress(@{});
+  }
+#endif
+}
+
 
 - (void)emitOnChangeTextEventWithText:(NSString *)text
 {
@@ -151,6 +165,12 @@ - (void)setObscureBackground:(BOOL)obscureBackground
   }
 }
 
+- (void)setShowBookmarkButton:(BOOL)showBookmarkButton
+{
+  [_controller.searchBar setShowsBookmarkButton:showBookmarkButton];
+}
+
+
 - (void)setHideNavigationBar:(BOOL)hideNavigationBar
 {
   [_controller setHidesNavigationBarDuringPresentation:hideNavigationBar];
@@ -290,6 +310,13 @@ - (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
 }
 #endif // !TARGET_OS_TV
 
+#if !TARGET_OS_TV
+- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar
+{
+  [self emitOnBookmarkButtonPressEvent];
+}
+#endif // !TARGET_OS_TV
+
 - (void)blur
 {
   [_controller.searchBar resignFirstResponder];
@@ -334,6 +361,8 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
   const auto &newScreenProps = *std::static_pointer_cast<const react::RNSSearchBarProps>(props);
 
   [self setHideWhenScrolling:newScreenProps.hideWhenScrolling];
+
+  [self setShowBookmarkButton:newScreenProps.showBookmarkButton];
 
   if (oldScreenProps.cancelButtonText != newScreenProps.cancelButtonText) {
     [self setCancelButtonText:RCTNSStringFromStringNilIfEmpty(newScreenProps.cancelButtonText)];
@@ -411,6 +440,7 @@ - (UIView *)view
 #endif
 
 RCT_EXPORT_VIEW_PROPERTY(obscureBackground, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showBookmarkButton, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideNavigationBar, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideWhenScrolling, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(autoCapitalize, UITextAutocapitalizationType)
@@ -423,6 +453,7 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onBookmarkButtonPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSearchButtonPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSearchFocus, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSearchBlur, RCTDirectEventBlock)

native-stack/README.md

@@ -589,6 +589,12 @@ Boolean indicating whether to obscure the underlying content with semi-transpare
 
 Defaults to `true`.
 
+#### `showBookmarkButton` (iOS only)
+
+Boolean indicates whether the search bar should display a bookmark button.
+
+Defaults to `false`.
+
 #### `onBlur`
 
 A callback that gets called when search bar has lost focus.
@@ -597,6 +603,10 @@ A callback that gets called when search bar has lost focus.
 
 A callback that gets called when the cancel button is pressed.
 
+#### `onBookmarkButtonPress`
+
+A callback that gets called when the bookmark button is pressed.
+
 #### `onChangeText`
 
 A callback that gets called when the text changes. It receives the current text value of the search bar.

src/components/SearchBar.tsx

@@ -94,6 +94,9 @@ function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
       onCancelButtonPress={
         props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
       }
+      onBookmarkButtonPress={
+        props.onBookmarkButtonPress as DirectEventHandler<SearchBarEvent>
+      }
       onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
     />
   );

src/fabric/SearchBarNativeComponent.ts

@@ -28,12 +28,14 @@ export interface NativeProps extends ViewProps {
   onSearchBlur?: DirectEventHandler<SearchBarEvent> | null;
   onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
   onCancelButtonPress?: DirectEventHandler<SearchBarEvent> | null;
+  onBookmarkButtonPress?: DirectEventHandler<SearchBarEvent> | null;
   onChangeText?: DirectEventHandler<ChangeTextEvent> | null;
   hideWhenScrolling?: boolean;
   autoCapitalize?: WithDefault<AutoCapitalizeType, 'none'>;
   placeholder?: string;
   placement?: WithDefault<SearchBarPlacement, 'stacked'>;
   obscureBackground?: boolean;
+  showBookmarkButton?: boolean;
   hideNavigationBar?: boolean;
   cancelButtonText?: string;
   // TODO: implement these on iOS

src/types.tsx

@@ -722,6 +722,12 @@ export interface SearchBarProps {
    * Indicates whether to obscure the underlying content
    */
   obscureBackground?: boolean;
+  /**
+   * Indicates whether the search bar should display a bookmark button.
+   *
+   * @platform iOS
+   */
+  showBookmarkButton?: boolean;
   /**
    * A callback that gets called when search bar has lost focus
    */
@@ -733,6 +739,13 @@ export interface SearchBarProps {
    */
   onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
 
+  /**
+   * A callback that gets called when the bookmark button is pressed.
+   *
+   * @platform iOS
+   */
+  onBookmarkButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+
   /**
    * A callback that gets called when the text changes. It receives the current text value of the search bar.
    */