Declare the app startup fully programmatically

[shirakaba]

Having troubles understanding NativeScript's UI architecture.

Disregarding the React renderer for the moment, I need to understand how one starts up an app and starts building the UI (I normally do this via the more magical XML route). In this minimal example, the background goes green (the colour of the Page), but I'd expect a purple ContentView to fill the page, too.

Do my components have to be in a Layout container of some sort (note: I did try a variation on this without any more success)? And is there anything further I'm missing?

import { on, run, launchEvent } from "tns-core-modules/application";
import { Frame } from "tns-core-modules/ui/frame/frame";
import { ContentView } from "tns-core-modules/ui/content-view/content-view";
import { TextBase } from "tns-core-modules/ui/text-base/text-base";
import { Page } from "tns-core-modules/ui/page/page";

on(launchEvent, (data) => {
    const frame = new Frame();
    const page = new Page();
    page.backgroundColor = "green";

    const contentView = new ContentView();
    const textBase = new TextBase();
    contentView.height = 100;
    contentView.width = 100;
    contentView.backgroundColor = "purple";
    textBase.text = "Hello, world!";
    contentView._addView(textBase);
    page.bindingContext = contentView;

    frame.navigate({ create: () => page });

    data.root = frame; // Incidentally, should this be the frame or the page?
});

run();

[shirakaba]

Solved by https://stackoverflow.com/questions/55347693/how-do-i-initialise-a-nativescript-app-fully-programmatically-without-xml/55351086!