SearchBar rendering defect on iOS

[sserdyuk]

When I styled background on SearchBar to avoid default grey background fill, it started rendering two thin lines above and under. Setting background-color triggers the issue. I am seeing this issue across all devices in the emulator.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  <StackLayout id="searchArea" class="p-20">
    <Label text="Hello!" textWrap="true" />
    <SearchBar id="searchBar" hint="Search" text="" />
  </StackLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';

export function navigatingTo(args: EventData) {
}

app.css

#searchArea {
    color: white;
    background-color: #0e88a0;
}   
#searchBar {
    background-color: #0e88a0;
}

@import 'nativescript-theme-core/css/core.light.css';

$ tns --version
3.0.3

$ cat package.json 
{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.SearchBarStylingBug",
    "tns-ios": {
      "version": "3.0.1"
    }
  },
  "dependencies": {
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "~3.0.0"
  },
  "devDependencies": {
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

[NickIliev]

@sserdyuk These lines comes with the default styling applied via UISearchBarStyle.

The top and bottom lines can not be removed via CSS, however, you can implement a native solution to change the default search bar style and apply UISearchBarStyleMinimal

e.g.

export function onSearchLoaded(args) {
    sb = <SearchBar>args.object;

    // if ios app...
    sb.ios.searchBarStyle = UISearchBarStyle.Minimal;
}

using the loaded event for the Searchbar component

<SearchBar id="searchBar" hint="Search" text="" loaded="onSearchLoaded"/>

Full sample project here

[sserdyuk]

For the record, setting style to "minimal" makes the search bar semi-transparent, so I lost and was unable to set the white background on the bar. The following did the trick:

            this.ios.searchBarStyle = UISearchBarStyle.Prominent;
            this.ios.backgroundImage = UIImage.new();

[lin-brian-l]

Sorry for bumping such an old thread, but I'm having an issue implementing @sserdyuk's solution to remove the default search bar borders; as he pointed out, UISearchBarStyle.Minimal makes the search bar semi-transparent, but for me, UISearchBarStyle.Prominent doesn't affect the search bar. I've also tried looking into changing the background color of the search bar to be transparent using RGBA values, but that didn't work either. Are there any other ways to remove the borders?

EDIT: I'm using Angular with this project, I'm not sure if that would affect anything though.

[gummibjorn]

@lin-brian-l
the default style is UISearchBarStyle.Prominent, thats why setting it again probably doesn't 'affect' your search bar.

in order to remove the lines when using UISearchBarStyle.Prominent try:

this.ios.backgroundImage = UIImage.new();

[lin-brian-l]

@gummibjorn Sorry for the delayed response - thanks for the help, the issue ended up being that I didn't nest my SearchBar element in a StackLayout in my HTML. The rest of the Typescript code worked fine after that.

[lin-brian-l]

Someone had requested that I post my solution, here's what I did.

HTML:

<StackLayout ios:opacity="1" col="1" class="searchbar-container" style="width: 73%;">          
  <SearchBar 
    #searchBar
    textFieldBackgroundColor="white" 
    hint="Search"
    (submit)="onSubmit($event)" 
    (clear)="onClear($event)" 
    (loaded)="searchBarLoaded($event)"
    style="width: 97%; font-size: 14;"
  >
  </SearchBar>
</StackLayout>

.ts:

import { SearchBar } from "ui/search-bar";
import { isIOS } from 'platform';
declare var UISearchBarStyle: any;
declare var UIImage: any;

export class YourClass {
  @ViewChild("searchBar") searchBar: ElementRef;

  ...  

  public searchBarLoaded(args) {
    let searchBar = <SearchBar>args.object
    if (isIOS) {
      var nativeSearchBar = searchBar.nativeView;
      nativeSearchBar.searchBarStyle = UISearchBarStyle.Prominent;
      nativeSearchBar.backgroundImage = UIImage.new();
    }
  }

}
  

[n19htz]

How this gonna look for VueJS?

[lin-brian-l]

@n19htz sorry, I've never used Vue before.

[keithgulbro]

If you're using Nativescript-Vue here is the solution:

<SearchBar @loaded="searchBarLoaded($event)" />

export default {
  methods: {
    searchBarLoaded(args) {
      let sb = args.object;

      sb.ios.searchBarStyle = UISearchBarStyle.Prominent;
      sb.ios.backgroundImage = UIImage.new();
    }
  }
}