NathanWalker

/**
 * {N} 7 uses es2017 targeting
 * @NativeClass decorator transforms native class extensions to work with iOS/Android runtimes
 * When used in a single file by itself, the transformation modifies the esm export syntax
 * Without any other esm exports in the file, you will want to export the symbol at bottom explicitly
 * This will ensure a proper esm export of your extended native class symbol will work as expected.
 */

@NativeClass()
class MyNativeClassExt extends NSObject {

NathanWalker

1. Install the latest NativeScript cli (7.x.x)

npm i -g nativescript

2. Choose A or B depending on your use case:

A) Starting a new Angular web project and adding {N} to it afterwards:

NathanWalker

// pseudo code using angular flavor as example

@Injectable({ providedIn: 'root' })
export class SomeHttpInterceptor implements HttpInterceptor {
  _mobileOffline = new MobileOffline();

  constructor(private mobileStorage: MobileAPIStorageService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this._mobileOffline.isOnline) {

NathanWalker

package io.nstudio.ui

import android.animation.ValueAnimator
import android.animation.ValueAnimator.AnimatorUpdateListener
import android.annotation.TargetApi
import android.content.Context
import android.content.res.TypedArray
import android.graphics.Color
import android.graphics.RectF
import android.graphics.Canvas

NathanWalker

import {
 platformNativeScript,
 runNativeScriptAngularApp,
} from "@nativescript/angular";
import { AppModule } from "./app/app.module";
 
// runs the NativeScript application, nothing is bootstrapped yet, as we're only setting up the platform and callbacks
runNativeScriptAngularApp({
 // this function will be called when we need to display the application UI
 // a major difference from the web is that this module may be destroyed when the user leaves the application and recreated when the user opens it again

NathanWalker

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
 
// locate the app-root and bootstrap the component in it's place
platformBrowserDynamic()
 .bootstrapModule(AppModule)
 .catch((err) => console.error(err));

NathanWalker

@NgModule({
 imports: [NativeScriptModule],
})
export class BackgroundModule {
 ngDoBootstrap() {
   // do nothing, this is not an UI module
 }
}
 
const moduleRefPromise = platformNativeScript().bootstrapModule(AppModule);

NathanWalker

import { Component } from "@angular/core";
import { NativeScriptCommonModule } from "@nativescript/angular";
 
@Component({
 standalone: true,
 selector: "hello-standalone",
 imports: [NativeScriptCommonModule],
 template: `<Label text="Hello, I'm a standalone component"></Label>`,
 schemas: [NO_ERRORS_SCHEMA],
})

NathanWalker

import { Directive, ElementRef, inject } from "@angular/core";
 
@Directive({
 selector: "[appHighlight]",
})
export class HighlightDirective {
   private el = inject(ElementRef);
 
   constructor() {
       this.el.nativeElement.style.backgroundColor = "yellow";

NathanWalker

<Label appHighlight text="Attribute Directive"></Label>