CODEWITHSUNDEEP
nativescriptnativescript-vue
IskDev
IskDev

Reputation: 3

How to change icon color in SearchBar component Nativescript + Vue?

(https://i.sstatic.net/f8DyP.jpg)

<SearchBar
    class="w-full rounded-full"
    textFieldHintColor="#fff"
    color="#fff"
    textProperty="#fff"
    backgroundImage="none"
    v-model="search"
    hint="Search..."
    @submit="fetchData"/>

The documentation doesn't say anything about icons

Upvotes: 0

Views: 185

Answers (1)

Eduardo Speroni
Eduardo Speroni

Reputation: 341

There isn't any API to change the Icon color currently, as it's styled by the styles.xml from App_Resources.

Android uses SearchView, so you can style it like you'd do natively: https://stackoverflow.com/a/57735080

iOS uses UISearchBar, which can also be styled natively: How to change the color of the UISearchBar Icon?

searchViewLoaded(event) {
  if(isAndroid) {
    const searchIcon event.object.android.findViewById(androidx.appcompat.R.id.search_mag_icon);
    searchIcon.setColorFilter(new Color('#ffffff').android, android.graphics.PorterDuff.Mode.SRC_IN);
  } else {
    // UISearchBar
    event.object.ios.searchTextField.leftView?.tintColor = new Color('#ffffff').ios;
  }

}

Upvotes: 0

Related Questions