Nativescript IoS Listview Dynamic Height Elements - ios

Question

I'm building a nativescript angular app with a tabstrip and one of the pages has a search bar and results shown in a ListView. The results returned can vary in length, so thus the height of each item can be different. Everything displays fine when the search results come back, however if I go to another 'page' via the tab strip and return, iOS redraws all the listview items as the same height, causing some results to be cut off, and others to have a ton of white space.
If I start scrolling up and down in the listview and different items become visible, they start fixing themselves, thus causing the results to jerk down/up as heights change. This is not an issue on Android. What am I doing wrong?
<GridLayout rows="auto *" class="p-20">
<GridLayout row="0" rows="*">
<StackLayout row="0" class="input-field">
<SearchBar #searchField hint="Search ..." class="input" (submit)="startSearch($event)" (clear)="startSearch($event)"></SearchBar>
</StackLayout>
</GridLayout>
<GridLayout row="1">
<ActivityIndicator [busy]="isSearchingKJ"></ActivityIndicator>
<ListView *ngIf="kjResults?.length > 0" [items]="kjResults" (itemTap)="select($event)">
<ng-template let-item="item" let-i="index">
<StackLayout>
<Label class="search" [text]="item.book + ' ' + item.chapter + ':' + item.verse"></Label>
<Label class="search-results" textWrap="true" (loaded)="displaySearchResult($event, item)"></Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
</GridLayout>
Here is the code generating the formatted text for each item:
displaySearchResult(args, result) {
const container = <Label>args.object;
const formattedStringLabel = new FormattedString();
for (const fragment of result.text) {
const span = new Span();
span.text = fragment.text;
if (fragment.highlight) {
span.fontWeight = '800';
}
formattedStringLabel.spans.push(span);
}
container.formattedText = formattedStringLabel;
}
Example of iOS graphical glitches: