Bootstrapping a React renderer: how do I get a reference to the root view at app startup?

Question

I'm creating a React renderer for NativeScript (i.e. to allow you to use React as a UI framework for NativeScript).

ReactNativeScript.render() (equivalent to the more well known ReactDOM.render()) needs a root node (A.K.A. container) to render into. Thus, I need to get a reference to the application's root view at startup time (which I'll use as the React root). However, I'm facing difficulties:

/* app.ts */
import { on, run, launchEvent, getRootView } from "tns-core-modules/application";

console.log(getRootView());
// application root view is undefined

on(launchEvent, (data) => {
    console.log(data.root);
    // application launch event's data.root is undefined
});
run();

Clearly I am misunderstanding the application lifecycle here. How can I get a reference to the root view (frame) of the app at startup?

Related bootstrapping processes:

• Nativescript Vue runtime/index.js
• NativeScript Angular platform-common.ts

Answer 1

You're supposed to create the root view yourself https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/index.js#L73

First you create your root view, then you set it to data.root. Something like:

on(launchEvent, (data) => {
    const myComponent = new ReactComponent();
    data.root = myComponent.native;
});