<Placeholder> allows adding native views directly in your markup without creating a full View wrapper for it. When NativeScript is constructing the UI and encounters a Placeholder element, it emits a creatingView event, allowing you to pass in any native view to be rendered by assigning it to the args.view parameter.

xml
<Placeholder creatingView="creatingView" />
ts
import { Utils } from '@nativescript/core'

export function creatingView(args) {
  let nativeView
  if (global.isIOS) {
    // Example with UITextView on iOS
    nativeView = UITextView.new()
    nativeView.text = 'Native View (iOS)'
  } else if (global.isAndroid) {
    // Example with TextView on Android
    nativeView = new android.widget.TextView(
      Utils.android.getApplicationContext()
    )
    nativeView.setText('Native View (Android)')
  }

  // assign it to args.view so NativeScript can place it into the UI
  args.view = nativeView
}
html
<Placeholder (creatingView)="creatingView($event)" />
ts
import { Utils } from '@nativescript/core'

import { Component, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptCommonModule } from '@nativescript/angular';

@Component({
  selector: 'ns-placeholder',
  templateUrl: './component.html',
  imports: [NativeScriptCommonModule],
  schemas: [NO_ERRORS_SCHEMA]
})
export class PlaceholderComponent { 

  creatingView(args) {
    let nativeView
    if (global.isIOS) {
      // Example with UITextView on iOS
      nativeView = UITextView.new()
      nativeView.text = 'Native View (iOS)'
    } else if (global.isAndroid) {
      // Example with TextView on Android
      nativeView = new android.widget.TextView(
        Utils.android.getApplicationContext()
      )
      nativeView.setText('Native View (Android)')
    }
  
    // assign it to args.view so NativeScript can place it into the UI
    args.view = nativeView
  }
}
tsx
<placeholder onCreatingView={creatingView} />
tsx
<placeholder on:creatingView={creatingView}></placeholder>
svelte
<placeholder on:creatingView={creatingView}></placeholder>
vue
<Placeholder @creatingView="creatingView" />

Props ​

...Inherited ​

For additional inherited properties, refer to the API Reference.

Events ​

creatingView ​

ts
on('creatingView', (args: CreateViewEventData) => {
  const placeholder = args.object as Placeholder
  args.view = someNativeView
})

Emitted when building the UI, the event args allow passing a native view instance back via args.view.

See CreateViewEventData

Previous
ListView
Next
Progress