Changing list element font size

Question

I'm building a NativeScript application that displays rows of text in a ListView. Each row is (for now) a couple of Label fields, one to display an optional row label and one to display text. I want the font size to scale automatically with the actual width of the row. I'm having a hard time getting it to work correctly. I have three major problems, described below. Here's what I have so far:

The row layout:

<GridLayout columns="*,25">
    <Label #text [text]="row.full.join(' ')" col="0" class="pointed tikkuntext"></Label>
    <Label #label col="1" class="tikkunlabel" *ngIf="row.label">
        <FormattedString>
            <Span #chapter *ngIf="row.label.chapter" [text]="row.label.chapter + ' '" fontSize="11" fontAtttributes="Bold"></Span>
            <Span #verse [text]="row.label.verse.join(',')"></Span>
        </FormattedString>
    </Label>
</GridLayout>

This is encapsulated in a custom component for each row:

import { Component, ElementRef, Input, AfterViewInit, ViewChild } from '@angular/core';
import { Page } from "ui/page";
import { Label } from "ui/label";
import { Span } from "text/span";

@Component({
    moduleId: module.id,
    selector: "tikkun-row",
    styleUrls: ["tikkun-row.css"],
    templateUrl: "tikkun-row.component.html"
})
export class TikkunRow implements AfterViewInit {
    @Input() row: any;
    @ViewChild("text") textField: ElementRef;
    @ViewChild("label") labelField: ElementRef;
    @ViewChild("chapter") chapterSpan: ElementRef;

    constructor(private page: Page) {}

    ngAfterViewInit() {
        let width = this.page.frame.getActualSize().width;
        width /= 375; // magic number!
        if (width > 0) {
            let textSize = 14 * width; // more magic numbers!
            let verseSize = 9 * width;
            let chapterSize = 11 * width;

            let textField = <Label>this.textField.nativeElement;
            textField.style.fontSize = textSize;
            if (this.labelField) {
                let labelField = <Label>this.labelField.nativeElement;
                labelField.style.fontSize = verseSize;
                if (this.chapterSpan) {
                    let span = <Span>this.chapterSpan.nativeElement
                    span.fontSize = chapterSize;
                }
            }
        }
    }
}

It's the ngAfterViewInit() method where I need some help.

Problem 1

My first problem is that the text scaling doesn't always work for the first line of the list in Android:

This seems to be intermittent; every once in a while the first line displays correctly, but most of the time it's like shown above. I can't figure out a pattern to it. Oddly, if I log the width each time ngAfterViewInit() is called, I get a single console output line in iOS and eight output lines in Android (of which the first is 0 and the others are the same positive value). This despite the list having seven rows!

EDIT I've managed to almost (but not quite) eliminate this problem by modifying how I probe for the width. Instead of a one-shot call to getActualSize(), I do it in a timed loop. Here's the relevant code change:

ngAfterViewInit() {
    let width = this.page.frame.getActualSize().width;
    let wait = () => {
        if (width > 0) {
            // the same stuff as before
        } else {
            width = this.page.frame.getActualSize().width;
            setTimeout(wait, 10);
        }
    };
    wait();
}

With this change, the intermittent lack of font scaling has almost entirely disappeared. However, once in a rare while it still shows up. Perhaps significantly, when it does show up it's not always on the first row of the list. And it's not always the entire row; sometimes it's just the right-side label. Perhaps it's more of a rendering issue?

Problem 2

On iOS, the two <Label> elements of each row are nicely aligned vertically on their text baselines, like this:

On Android, I can't get that to happen. What's in the first picture above is the effects of using vertical-align: center, which is the closest I can get. Unfortunately, NativeScript only supports top, center, bottom, and stretch, none of which look right. Is there a way (perhaps by dropping down into native) to force baseline alignment across a GridLayout row in Android?

Problem 3

It seems that ngAfterViewInit() isn't the right lifecycle method to override. It gets called at the beginning (once for iOS, once for each row [+1 extra!] for Android), but doesn't get called if I change the device orientation between landscape and portrait, in either iOS or Android. I've tried all the Angular lifecycle hooks and nothing seems to work right. Is there a way to detect when the row's actual width changes so I can update the text (and label) size? Is there some useful event somewhere that I can subscribe to, to do this?