NativeScript: Framework Integrations, Plugins & Platform Code

Angular / Vue Integration

// NativeScript for Angular -- same component/template concepts as
// Angular web, but the template renders to NATIVE views, not the DOM
import { Component } from '@angular/core';

@Component({
  selector: 'ns-items',
  template: `
    <ActionBar title="Items"></ActionBar>
    <ListView [items]="items">
      <ng-template let-item="item">
        <Label [text]="item.name" class="list-item"></Label>
      </ng-template>
    </ListView>
  `,
})
export class ItemsComponent {
  items = [{ name: 'Apple' }, { name: 'Banana' }];
}

// nativescript-vue -- same Vue single-file-component pattern, rendering
// to native views instead of the DOM
// <template>
//   <Page><ActionBar title="Items" />
//     <ListView for="item in items">
//       <v-template><Label :text="item.name" /></v-template>
//     </ListView>
//   </Page>
// </template>

Plugins & Native Code Fallback

// Plugins wrap native SDK functionality behind a JS-friendly API --
// no manual bridging code needed for common capabilities
import { Camera } from '@nativescript/camera';

const imageAsset = await Camera.takePicture({ width: 300, height: 300 });

// For custom native UI or functionality the reflected bridge doesn't
// cover, native code plugins let you drop into real Swift/Kotlin
// source (in designated platform folders) that gets compiled into
// the app and exposed back to the JS/TS layer.

Platform-Specific Code

// File-suffix convention -- resolved automatically per target platform
// utils.ios.ts / utils.android.ts

// Or runtime checks for smaller in-line branches
import { isIOS, isAndroid, Application } from '@nativescript/core';

if (isIOS) {
  const statusBarStyle = UIStatusBarStyle.LightContent;
} else if (isAndroid) {
  const window = Application.android.startActivity.getWindow();
}

CLI Workflow

# Build + deploy to a connected device/emulator with LiveSync (hot reload)
ns run android
ns run ios

# nativescript.config.ts declares project-level config (app ID,
# platforms, bundler settings) -- read by the CLI when building/running

# platforms/ios and platforms/android are generated build artifacts,
# regenerated from the shared source + config -- typically gitignored,
# not hand-edited as a source of truth