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.

Basics

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

XML
JavaScript
TypeScript

<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;
}

Improve this document

Demo Source

Code Behind

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

XML
JavaScript
TypeScript

<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);
}

Improve this document

Demo Source

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

JavaScript
TypeScript

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

JavaScript
TypeScript

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;
}

Improve this document

Demo Source

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

NativeScript Core

Placeholder

Basics

Code Behind

Platform Files