8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more

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

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