feat: add cancel button text

TestsExample/src/Test758.tsx

@@ -45,6 +45,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
+    cancelButtonText: 'Some text',
     onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),

createNativeStackNavigator/README.md

@@ -391,6 +391,10 @@ The search field background color.
 
 By default bar tint color is translucent.
 
+#### `cancelButtonText`
+
+The text to be used instead of default `Cancel` button text.
+
 #### `hideNavigationBar`
 
 Boolean indicating whether to hide the navigation bar during searching.

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -242,6 +242,7 @@ To render a search bar use `ScreenStackHeaderSearchBarView` with `<SearchBar>` c
 
 - `autoCapitalize` - Controls whether the text is automatically auto-capitalized as it is entered by the user. Can be one of these: `none`, `words`, `sentences`, `characters`. Defaults to `sentences`.
 - `barTintColor` - The search field background color. By default bar tint color is translucent.
+- `cancelButtonText` - The text to be used instead of default `Cancel` button text.
 - `hideNavigationBar` - Boolean indicating whether to hide the navigation bar during searching. Defaults to `true`.
 - `hideWhenScrolling` - Boolean indicating whether to hide the search bar when scrolling. Defaults to `true`.
 - `obscureBackground` - Boolean indicating whether to obscure the underlying content with semi-transparent overlay. Defaults to `true`.

ios/RNSSearchBar.m

@@ -73,6 +73,11 @@ - (void)setTextColor:(UIColor *)textColor
 #endif
 }
 
+- (void)setCancelButtonText:(NSString *)text
+{
+  [_controller.searchBar setValue:text forKey:@"cancelButtonText"];
+}
+
 - (void)hideCancelButton
 {
 #if !TARGET_OS_TV
@@ -182,6 +187,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(textColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(cancelButtonText, NSString)
 
 RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTBubblingEventBlock)

native-stack/README.md

@@ -384,6 +384,10 @@ The search field background color.
 
 By default bar tint color is translucent.
 
+#### `cancelButtonText`
+
+The text to be used instead of default `Cancel` button text.
+
 #### `hideNavigationBar`
 
 Boolean indicating whether to hide the navigation bar during searching.

src/types.tsx

@@ -350,9 +350,18 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
 
 export interface SearchBarProps {
   /**
-   * Indicates whether to to obscure the underlying content
+   * The auto-capitalization behavior
    */
-  obscureBackground?: boolean;
+  autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+  /**
+   * The search field background color
+   */
+  barTintColor?: string;
+  /**
+   * The text to be used instead of default `Cancel` button text
+   */
+  cancelButtonText?: string;
+
   /**
    * Indicates whether to hide the navigation bar
    */
@@ -361,40 +370,39 @@ export interface SearchBarProps {
    * Indicates whether to hide the search bar when scrolling
    */
   hideWhenScrolling?: boolean;
+
   /**
-   * The auto-capitalization behavior
+   * Indicates whether to to obscure the underlying content
    */
-  autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+  obscureBackground?: boolean;
   /**
-   * Text displayed when search field is empty
+   * A callback that gets called when search bar has lost focus
    */
-  placeholder?: string;
+  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
   /**
-   * The search field background color
+   * A callback that gets called when the cancel button is pressed
    */
-  barTintColor?: string;
+  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 the cancel button is pressed
+   * A callback that gets called when search bar has received focus
    */
-  onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  onFocus?: (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 search bar has received focus
-   */
-  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  /**
-   * A callback that gets called when search bar has lost focus
+   * Text displayed when search field is empty
    */
-  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  placeholder?: string;
   /**
    * The search field text color
    */