📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

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


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