Skip to content
✨ v8 is here - SPM-first iOS, zero-touch Android

NativeScript for Capacitor

The platform at your fingertips.

Isolated NativeScript environment

Use NativeScript within your existing Capacitor app.

./src/nativescript/modal.ts
ts
import { iosRootViewController } from '@nativescript/capacitor/bridge';

native.openNativeModalView = () => {
  if (native.isAndroid) {
    const builder = new android.app.AlertDialog.Builder(
      native.androidCapacitorActivity
    );
    builder.setTitle('Hello from NativeScript 🚀');
    builder.setPositiveButton('Close', null);
    builder.show();
    return;
  }
  const vc = UIViewController.alloc().init();
  vc.view.backgroundColor = UIColor.systemIndigoColor;
  iosRootViewController().presentViewControllerAnimatedCompletion(
    vc, true, () => console.log('presented!')
  );
};
./src/app/explore-container.component.ts
ts
import { native } from '@nativescript/capacitor';

export class ExploreContainerComponent {
  async showNative() {
    // any platform API, directly from your web code
    const version = native.isAndroid
      ? await native.android.os.Build.MODEL.get
      : await native.UIDevice.currentDevice.systemVersion.get;
    console.log('running on', version);

    // or your own native helpers, written in TypeScript
    native.openNativeModalView();
  }
}

Use anywhere in your Ionic codebase

Completely inactive with zero impact on your web environment. It is only active when Capacitor is running.