Placeholder

The Placeholder allows you to add any native widget to your application. To do that, you need to put a Placeholder somewhere in the UI hierarchy and then create and configure the native widget that you want to appear there. Finally, pass your native widget to the event arguments of the creatingView event.

const placeholderModule = require("tns-core-modules/ui/placeholder");

import { Placeholder } from "tns-core-modules/ui/placeholder";

Basics

The example shows, how to create native view and display it via Placeholder using creatingView event.

<StackLayout>
    <Placeholder creatingView="creatingView" />
</StackLayout>

function creatingView(args) {
    let nativeView;
    if (platformModule.isIOS) {
        nativeView = UITextView.new();
        nativeView.text = "Native View (iOS)";
    } else if (platformModule.isAndroid) {
        nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
        nativeView.setText("Native View (Android)");
    }

    args.view = nativeView;
}
exports.creatingView = creatingView;

export function creatingView(args) {
    let nativeView;
    if (isIOS) {
        nativeView = UITextView.new();
        nativeView.text = "Native View (iOS)";
    } else if (isAndroid) {
        nativeView = new android.widget.TextView(ad.getApplicationContext());
        nativeView.setText("Native View (Android)");
    }

    args.view = nativeView;
}

Code Behind

The example shows, how to create native view and display it with Placeholder using creatingView event via code-behind.

<StackLayout loaded="onLayoutLoaded">
</StackLayout>

function onLayoutLoaded (ltargs) {
    const layout = ltargs.object;
    const placeholder = new placeholderModule.Placeholder();
    placeholder.on("creatingView", (args) => {
        let nativeView;
        if (platformModule.isIOS) {
            nativeView = UITextView.new();
            nativeView.text = "Native View (iOS)";
        } else if (platformModule.isAndroid) {
            nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
            nativeView.setText("Native View (Android)");
        }

        args.view = nativeView;
    });
    layout.addChild(placeholder);
}
exports.onLayoutLoaded = onLayoutLoaded;

export function onLayoutLoaded (ltargs) {
    let layout: StackLayout = ltargs.object;
    let placeholder = new Placeholder();
    placeholder.on("creatingView", (args) => {
        let nativeView;
        if (isIOS) {
            nativeView = UITextView.new();
            nativeView.text = "Native View (iOS)";
        } else if (isAndroid) {
            nativeView = new android.widget.TextView(ad.getApplicationContext());
            nativeView.setText("Native View (Android)");
        }

        args.view = nativeView;
    });
    layout.addChild(placeholder);
}

Platform Files

The example shows how to define the native widget via Placeholder, while using platform-specific JavaScript files.

<StackLayout>
    <Placeholder creatingView="creatingView"/>
</StackLayout>

• .android.js

function creatingView(args) {
    const nativeView = new android.widget.TextView(args.context);
    nativeView.setSingleLine(true);
    nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
    nativeView.setText("Native View - Android");
    args.view = nativeView;
}
exports.creatingView = creatingView;

export function creatingView(args) {
    const nativeView = new android.widget.TextView(args.context);
    nativeView.setSingleLine(true);
    nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
    nativeView.setText("Native View - Android");
    args.view = nativeView;
}

• .ios.js

function creatingView(args) {
    const nativeView = new UILabel();
    nativeView.text = "Native View - iOS";
    args.view = nativeView;
}
exports.creatingView = creatingView;

export function creatingView(args) {
    const nativeView = UILabel.new();
    nativeView.text = "Native View - iOS app";
    args.view = nativeView;
}

Note: Using the native API in NativeScript TypeScript project requires adding tns-platform-declarations plugin in the project. The plugin contains type information about the native platforms as exposed by the NativeScript framework.

API Reference for the Placeholder Class