feat(search-bar): clear button color support (#10903)

snehitha-30727 · web-flow · commit 3be20a33ffec · 2025-11-01T11:26:20.000-07:00
diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts
@@ -1,5 +1,5 @@
 import { Font } from '../styling/font';
-import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty } from './search-bar-common';
+import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty, clearButtonColorProperty } from './search-bar-common';
 import { isUserInteractionEnabledProperty, isEnabledProperty } from '../core/view';
 import { ad } from '../../utils';
 import { Color } from '../../color';
@@ -33,6 +33,7 @@ function initializeNativeClasses(): void {
 		constructor(private owner: SearchBar) {
 			super();
 
+			// @ts-ignore
 			return global.__native(this);
 		}
 
@@ -70,6 +71,7 @@ function initializeNativeClasses(): void {
 		constructor(private owner: SearchBar) {
 			super();
 
+			// @ts-ignore
 			return global.__native(this);
 		}
 
@@ -272,6 +274,25 @@ export class SearchBar extends SearchBarBase {
 		const color = value instanceof Color ? value.android : value;
 		textView.setHintTextColor(color);
 	}
+	[clearButtonColorProperty.setNative](value: Color) {
+		if (!this.nativeViewProtected || !value) {
+			return;
+		}
+
+		try {
+			// The close (clear) button inside the SearchView can be found by its resource ID
+			const closeButtonId = this.nativeViewProtected.getContext().getResources().getIdentifier('android:id/search_close_btn', null, null);
+			const closeButton = this.nativeViewProtected.findViewById(closeButtonId) as android.widget.ImageView;
+
+			const color = value instanceof Color ? value.android : new Color(value).android;
+
+			if (closeButton) {
+				closeButton.setColorFilter(color);
+			}
+		} catch (err) {
+			console.log('Error setting clear button color:', err);
+		}
+	}
 
 	private _getTextView(): android.widget.TextView {
 		if (!this._searchTextView) {
diff --git a/packages/core/ui/search-bar/index.d.ts b/packages/core/ui/search-bar/index.d.ts
@@ -61,6 +61,13 @@ export class SearchBar extends View {
 	 */
 	textFieldHintColor: Color;
 
+	/**
+	 * Gets or sets the Clear Button color of the SearchBar component.
+	 *
+	 * @nsProperty
+	 */
+	clearButtonColor: Color | string;
+
 	/**
 	 * Adds a listener for the specified event name.
 	 *
diff --git a/packages/core/ui/search-bar/index.ios.ts b/packages/core/ui/search-bar/index.ios.ts
@@ -1,5 +1,5 @@
 import { Font } from '../styling/font';
-import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty } from './search-bar-common';
+import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty, clearButtonColorProperty } from './search-bar-common';
 import { isEnabledProperty } from '../core/view';
 import { Color } from '../../color';
 import { colorProperty, backgroundColorProperty, backgroundInternalProperty, fontInternalProperty } from '../styling/style-properties';
@@ -220,4 +220,13 @@ export class SearchBar extends SearchBarBase {
 		const attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(stringValue, attributes);
 		this._getTextField().attributedPlaceholder = attributedPlaceholder;
 	}
+	[clearButtonColorProperty.setNative](value: Color | UIColor) {
+		const textField = this._getTextField();
+		if (!textField) return;
+		// Check if clear button is available in the text field
+		const clearButton = textField.valueForKey('clearButton');
+		if (!clearButton) return;
+
+		clearButton.tintColor = value instanceof Color ? value.ios : value;
+	}
 }
diff --git a/packages/core/ui/search-bar/search-bar-common.ts b/packages/core/ui/search-bar/search-bar-common.ts
@@ -12,6 +12,7 @@ export abstract class SearchBarBase extends View implements SearchBarDefinition
 	public hint: string;
 	public textFieldBackgroundColor: Color;
 	public textFieldHintColor: Color;
+	public clearButtonColor: Color | string;
 
 	public abstract dismissSoftInput();
 }
@@ -44,3 +45,11 @@ export const textFieldBackgroundColorProperty = new Property<SearchBarBase, Colo
 	valueConverter: (v) => new Color(v),
 });
 textFieldBackgroundColorProperty.register(SearchBarBase);
+
+// --- Added property for clear button color ---
+export const clearButtonColorProperty = new Property<SearchBarBase, Color>({
+	name: 'clearButtonColor',
+	equalityComparer: Color.equals,
+	valueConverter: (v) => new Color(v),
+});
+clearButtonColorProperty.register(SearchBarBase);
