🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

NativeScript Core

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

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.

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

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