From 4d685c3d73e4af640e86d2b7e65c3ecf22714b28 Mon Sep 17 00:00:00 2001 From: kl2400030727 Date: Sun, 19 Oct 2025 20:11:13 +0530 Subject: [PATCH 1/5] Add clear button color support to SearchBar --- packages/core/ui/search-bar/index.android.ts | 27 ++++++++++++++++--- packages/core/ui/search-bar/index.ios.ts | 12 ++++++++- .../core/ui/search-bar/search-bar-common.ts | 9 +++++++ 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts index 4db8b09284..6931fba1a0 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,7 +33,9 @@ function initializeNativeClasses(): void { constructor(private owner: SearchBar) { super(); - return global.__native(this); + // @ts-ignore +return global.__native(this); + } onQueryTextChange(newText: string): boolean { @@ -70,7 +72,8 @@ function initializeNativeClasses(): void { constructor(private owner: SearchBar) { super(); - return global.__native(this); + // @ts-ignore +return global.__native(this); } onClose(): boolean { @@ -272,6 +275,24 @@ export class SearchBar extends SearchBarBase { const color = value instanceof Color ? value.android : value; textView.setHintTextColor(color); } + [clearButtonColorProperty.setNative](value: Color) { + if (!this.nativeViewProtected) { + 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; + + if (closeButton && value) { + closeButton.setColorFilter(value.android); + } +} 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.ios.ts b/packages/core/ui/search-bar/index.ios.ts index 2cfd6bb704..29b8ae9aa9 100644 --- a/packages/core/ui/search-bar/index.ios.ts +++ b/packages/core/ui/search-bar/index.ios.ts @@ -1,10 +1,11 @@ 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'; import { SDK_VERSION } from '../../utils/constants'; + export * from './search-bar-common'; @NativeClass @@ -220,4 +221,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(); + // Check if clear button is available in the text field + if (textField && textField.valueForKey('clearButton')) { + const button = textField.valueForKey('clearButton'); + const color = value instanceof Color ? value.ios : value; + button.tintColor = color; + } + } } diff --git a/packages/core/ui/search-bar/search-bar-common.ts b/packages/core/ui/search-bar/search-bar-common.ts index 5fed56d4d4..c76a7eed98 100644 --- a/packages/core/ui/search-bar/search-bar-common.ts +++ b/packages/core/ui/search-bar/search-bar-common.ts @@ -44,3 +44,12 @@ 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); + From bbd0cbe5445ba86138c5073e0116357922b29e95 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Wed, 29 Oct 2025 15:35:45 -0700 Subject: [PATCH 2/5] chore: formatting Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/core/ui/search-bar/index.ios.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/search-bar/index.ios.ts b/packages/core/ui/search-bar/index.ios.ts index 29b8ae9aa9..5556186b60 100644 --- a/packages/core/ui/search-bar/index.ios.ts +++ b/packages/core/ui/search-bar/index.ios.ts @@ -221,7 +221,7 @@ export class SearchBar extends SearchBarBase { const attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(stringValue, attributes); this._getTextField().attributedPlaceholder = attributedPlaceholder; } - [clearButtonColorProperty.setNative](value: Color | UIColor) { + [clearButtonColorProperty.setNative](value: Color | UIColor) { const textField = this._getTextField(); // Check if clear button is available in the text field if (textField && textField.valueForKey('clearButton')) { From a087b9a770fb3f601ca57369dfc480c2f21c0881 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Wed, 29 Oct 2025 15:35:56 -0700 Subject: [PATCH 3/5] chore: formatting Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/core/ui/search-bar/index.android.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts index 6931fba1a0..a2095fb50a 100644 --- a/packages/core/ui/search-bar/index.android.ts +++ b/packages/core/ui/search-bar/index.android.ts @@ -73,7 +73,7 @@ return global.__native(this); super(); // @ts-ignore -return global.__native(this); + return global.__native(this); } onClose(): boolean { From d3bdb6440f3d8556dd3d9eb5a03edc7ecd74f184 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Thu, 30 Oct 2025 13:29:39 -0700 Subject: [PATCH 4/5] chore: formatting --- packages/core/ui/search-bar/index.android.ts | 36 +++++++++---------- packages/core/ui/search-bar/index.ios.ts | 3 +- .../core/ui/search-bar/search-bar-common.ts | 1 - 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts index a2095fb50a..0771ed42a9 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 , clearButtonColorProperty } 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'; @@ -34,8 +34,7 @@ function initializeNativeClasses(): void { super(); // @ts-ignore -return global.__native(this); - + return global.__native(this); } onQueryTextChange(newText: string): boolean { @@ -276,23 +275,22 @@ export class SearchBar extends SearchBarBase { textView.setHintTextColor(color); } [clearButtonColorProperty.setNative](value: Color) { - if (!this.nativeViewProtected) { - 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; - - if (closeButton && value) { - closeButton.setColorFilter(value.android); - } -} catch (err) { - console.log('Error setting clear button color:', err); -} + if (!this.nativeViewProtected) { + 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; + + if (closeButton && value) { + closeButton.setColorFilter(value.android); + } + } 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.ios.ts b/packages/core/ui/search-bar/index.ios.ts index 5556186b60..2017f731df 100644 --- a/packages/core/ui/search-bar/index.ios.ts +++ b/packages/core/ui/search-bar/index.ios.ts @@ -1,11 +1,10 @@ import { Font } from '../styling/font'; -import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty , clearButtonColorProperty } 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'; import { SDK_VERSION } from '../../utils/constants'; - export * from './search-bar-common'; @NativeClass diff --git a/packages/core/ui/search-bar/search-bar-common.ts b/packages/core/ui/search-bar/search-bar-common.ts index c76a7eed98..f929b227ea 100644 --- a/packages/core/ui/search-bar/search-bar-common.ts +++ b/packages/core/ui/search-bar/search-bar-common.ts @@ -52,4 +52,3 @@ export const clearButtonColorProperty = new Property({ valueConverter: (v) => new Color(v), }); clearButtonColorProperty.register(SearchBarBase); - From 8bb0dc2ef288baba30178555da580cc6737fe407 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Sat, 1 Nov 2025 08:32:16 -0700 Subject: [PATCH 5/5] chore: cleanup --- packages/core/ui/search-bar/index.android.ts | 8 +++++--- packages/core/ui/search-bar/index.d.ts | 7 +++++++ packages/core/ui/search-bar/index.ios.ts | 10 +++++----- packages/core/ui/search-bar/search-bar-common.ts | 1 + 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts index 0771ed42a9..ae6979a20c 100644 --- a/packages/core/ui/search-bar/index.android.ts +++ b/packages/core/ui/search-bar/index.android.ts @@ -275,7 +275,7 @@ export class SearchBar extends SearchBarBase { textView.setHintTextColor(color); } [clearButtonColorProperty.setNative](value: Color) { - if (!this.nativeViewProtected) { + if (!this.nativeViewProtected || !value) { return; } @@ -284,8 +284,10 @@ export class SearchBar extends SearchBarBase { const closeButtonId = this.nativeViewProtected.getContext().getResources().getIdentifier('android:id/search_close_btn', null, null); const closeButton = this.nativeViewProtected.findViewById(closeButtonId) as android.widget.ImageView; - if (closeButton && value) { - closeButton.setColorFilter(value.android); + 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); diff --git a/packages/core/ui/search-bar/index.d.ts b/packages/core/ui/search-bar/index.d.ts index ddcb728b2f..d299bb52a9 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 2017f731df..bf02ac310f 100644 --- a/packages/core/ui/search-bar/index.ios.ts +++ b/packages/core/ui/search-bar/index.ios.ts @@ -222,11 +222,11 @@ export class SearchBar extends SearchBarBase { } [clearButtonColorProperty.setNative](value: Color | UIColor) { const textField = this._getTextField(); + if (!textField) return; // Check if clear button is available in the text field - if (textField && textField.valueForKey('clearButton')) { - const button = textField.valueForKey('clearButton'); - const color = value instanceof Color ? value.ios : value; - button.tintColor = color; - } + 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 f929b227ea..9cf5508a27 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(); }