Nativescript - Search Bar does not display correctly within action bar (IOS)

Question

Am creating a nativescript angular app. Noticed some very strange behavior when creating a search bar for my app. While the search bar display perfectly within the action bar in Android in IOS the search bar does not show at all initially. However if I change the device orientation repeatedly slowly The search bar slowly starts to show within the action bar with it width increasing gradually each time I change the device orientation!!

My code is as follows

app.component.html

<StackLayout sdkToggleNavButton>
    <ActionBar title="" backgroundColor="#f82462">
         <StackLayout>
        <app-search-bar></app-search-bar>
        </StackLayout>
</ActionBar>

Within app.component I am calling the search bar as a separate component.

searchbarComponent.ts

import { Component } from "@angular/core";
import searchBarModule = require("ui/search-bar");

@Component({
selector: "app-search-bar",
template: `
<SearchBar class ="sb" #sb hint="Enter topic to get questions" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>   `
})
export class SearchBarComponent { }

Using Nativescript 2.5

Any advice on whats happening here.

Answer 1

This issue and a workaround is mentioned here. Setting the stretch attribute in the parent StackLayout worked for me.

Answer 2

I'm using search component on my Nativescript project and it is functioning well. You can refer my code.

search.component.html

<ActionBar title="Search"> 
         <NavigationButton android.systemIcon="ic_menu_back" text=" " pageTransition="fade"></NavigationButton>
    </ActionBar>
<StackLayout toggleNavButton>
    <StackLayout>
        <!-- >> basic-search-bar-html -->
        <SearchBar #sb hint="SEARCH FOR INSPIRATION"  [(ngModel)]="category" [text]="searchPhrase" (submit)="onSearchTap()"></SearchBar>
        <!-- << basic-search-bar-html -->
    </StackLayout>

    <!-- >> Search result listing here -->
     <GridLayout rows="auto, *">
        <ListView [items]="category" row="1">

search.componet.ts

import { Component } from "@angular/core";
import { Observable } from 'rxjs/Observable';  
import { searchService } from '../../shared/search/search.service';

@Component({
    selector: 'search',
    templateUrl: "pages/search/search.component.html",
    styleUrls: ["pages/search/search.component.css"],
    providers: [searchService]
})

export class SearchBarComponent {