- Install the latest NativeScript cli (7.x.x)
npm i -g nativescript
- Choose A or B depending on your use case:
A) Starting a new Angular web project and adding {N} to it afterwards:
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)); |
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 |
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 |
// 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) { |
npm i -g nativescript
A) Starting a new Angular web project and adding {N} to it afterwards:
/** | |
* {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 { |
const { join, relative, resolve, sep, dirname } = require('path'); | |
const webpack = require('webpack'); | |
const nsWebpack = require('nativescript-dev-webpack'); | |
const nativescriptTarget = require('nativescript-dev-webpack/nativescript-target'); | |
const { | |
nsReplaceBootstrap | |
} = require('nativescript-dev-webpack/transformers/ns-replace-bootstrap'); | |
const { | |
nsReplaceLazyLoader |
// /xplat/nativescript/core/core.module.ts | |
import { MobileStorageService } from './services/mobile-storage.service'; | |
// Add this to providers, for example: | |
@NgModule({ | |
imports: [ | |
NativeScriptModule, | |
... | |
CoreModule.forRoot([ |
export function fixAndroidScrollMomentum(listview: ListView) { | |
if (android.os.Build.VERSION.SDK_INT !== 28) { | |
return; | |
} | |
// suppress the default momentum behaviour | |
listview.android.setVelocityScale(0); | |
// stores the last 5 move events in this array | |
let lastMoveEvents = []; | |
(<any>listview).on(GestureTypes.touch, (args, b) => { | |
if (args.action === 'up') { |
import { isIOS } from 'tns-core-modules/platform'; | |
let iPhoneX; | |
export function isIPhoneX() { | |
if (isIOS) { | |
if (typeof iPhoneX === 'undefined') { | |
const _SYS_NAMELEN: number = 256; | |
const buffer: any = interop.alloc(5 * _SYS_NAMELEN); |