Skip to content

Instantly share code, notes, and snippets.


Nathan Walker NathanWalker

View GitHub Profile
NathanWalker /
Last active Dec 1, 2020
@nativescript/schematics with NativeScript 7.x.x and Angular 10.1.x - 11.x.x
  1. Install the latest NativeScript cli (7.x.x)
npm i -g nativescript
  1. Choose A or B depending on your use case:

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

NathanWalker / native-class.ios.ts
Last active Oct 28, 2020
Example of using a single file containing a single @nativeclass decorated class with NativeScript 7
View native-class.ios.ts
* {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.
class MyNativeClassExt extends NSObject {
NathanWalker / webpack.config.js
Last active Jun 28, 2020
webpack to work with @nativescript/core and alias tns-core-modules
View webpack.config.js
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 {
} = require('nativescript-dev-webpack/transformers/ns-replace-bootstrap');
const {
NathanWalker / core.module.ts
Last active Jun 6, 2020
xplat storage service which uses localStorage on the web and ApplicationSettings on mobile.
View core.module.ts
// /xplat/nativescript/core/core.module.ts
import { MobileStorageService } from './services/mobile-storage.service';
// Add this to providers, for example:
imports: [
NathanWalker / fixAndroidScrollMomentum
Created Apr 21, 2020
Invert NativeScript ListView trick to feed chat items in from bottom up (Android workaround for proper momentum scroll on API level 28)
View fixAndroidScrollMomentum
export function fixAndroidScrollMomentum(listview: ListView) {
if (android.os.Build.VERSION.SDK_INT !== 28) {
// suppress the default momentum behaviour;
// stores the last 5 move events in this array
let lastMoveEvents = [];
(<any>listview).on(GestureTypes.touch, (args, b) => {
if (args.action === 'up') {
NathanWalker / platform.ts
Created Mar 21, 2018
NativeScript utility: isIPhoneX detection
View platform.ts
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);
NathanWalker / animate.directive.ts
Last active Jan 21, 2019
NativeScript for Angular animate directive for silky smooth mobile (iOS/Android) animations anytime, anywhere and on anything.
View animate.directive.ts
* Add this to your app's SharedModule declarations
import { Directive, ElementRef, Input } from '@angular/core';
// nativescript
import { View } from 'tns-core-modules/ui/core/view';
import { Animation, AnimationDefinition } from 'tns-core-modules/ui/animation';
NathanWalker / listview-directives.js
Last active Jun 1, 2018
Use nativescript-telerik-ui with Angular rc.6: After `npm i` in your project, replace `node_modules/nativescript-telerik-ui/listview/angular/listview-directives.js` and `node_modules/nativescript-telerik-ui/sidedrawer/angular/side-drawer-directives.js` with the following...
View listview-directives.js
var core_1 = require('@angular/core');
var elementRegistry = require('nativescript-angular/element-registry');
var _1 = require('./../');
var layout_base_1 = require('ui/layouts/layout-base');
var observable_array_1 = require('data/observable-array');
var ListItemContext = (function (_super) {
__extends(ListItemContext, _super);
function ListItemContext($implicit, item, index, even, odd) {, item);
this.$implicit = $implicit;
NathanWalker / base.component.ts
Created Aug 30, 2016
An Angular 2 custom Component decorator which sets ViewEncapsulation.None to all components that use it.
View base.component.ts
// angular
import {Component, ViewEncapsulation} from '@angular/core';
declare var Reflect: any;
const _reflect: any = Reflect;
// Usage:
// @BaseComponent({ etc... })
export function BaseComponent(metadata: any = {}) {
NathanWalker / app.component.ts
Last active Dec 13, 2017
NativeScript: Wire up RadSideDrawer from 'nativescript-telerik-ui' with Angular2 taking full advantage of Router
View app.component.ts
// angular
import {Component} from '@angular/core';
selector: 'app',
template: `
You can’t perform that action at this time.