Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 6 commits into from
Nov 1, 2025
+48 −2
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4d685c3
Add clear button color support to SearchBar
kl2400030727 Oct 19, 2025
1a46dcc
Merge branch 'main' into feature/clear-button-color
NathanWalker Oct 29, 2025
bbd0cbe
chore: formatting
NathanWalker Oct 29, 2025
a087b9a
chore: formatting
NathanWalker Oct 29, 2025
d3bdb64
chore: formatting
NathanWalker Oct 30, 2025
8bb0dc2
chore: cleanup
NathanWalker Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion packages/core/ui/search-bar/index.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -33,6 +33,7 @@ function initializeNativeClasses(): void {
constructor(private owner: SearchBar) {
super();

// @ts-ignore
return global.__native(this);
}

Expand Down Expand Up @@ -70,6 +71,7 @@ function initializeNativeClasses(): void {
constructor(private owner: SearchBar) {
super();

// @ts-ignore
return global.__native(this);
}

Expand Down Expand Up @@ -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) {
Expand Down
7 changes: 7 additions & 0 deletions packages/core/ui/search-bar/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
11 changes: 10 additions & 1 deletion packages/core/ui/search-bar/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
}
}
9 changes: 9 additions & 0 deletions packages/core/ui/search-bar/search-bar-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down Expand Up @@ -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);