nativescriptnativescript-vue

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


Solution

  • 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;
      }
    
    }