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


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


<StackLayout sdkToggleNavButton>
    <ActionBar title="" backgroundColor="#f82462">

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


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

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.


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