diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts index 4db8b0928..ae6979a20 100644 --- 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 index ddcb728b2..d299bb52a 100644 --- 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 index 2cfd6bb70..bf02ac310 100644 --- 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 index 5fed56d4d..9cf5508a2 100644 --- 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 new Color(v), }); textFieldBackgroundColorProperty.register(SearchBarBase); + +// --- Added property for clear button color --- +export const clearButtonColorProperty = new Property({ + name: 'clearButtonColor', + equalityComparer: Color.equals, + valueConverter: (v) => new Color(v), +}); +clearButtonColorProperty.register(SearchBarBase);