Skip to content

Instantly share code, notes, and snippets.

Avatar

Nathan Walker NathanWalker

View GitHub Profile
@NathanWalker
NathanWalker / usage-intructions.md
Last active Dec 1, 2020
@nativescript/schematics with NativeScript 7.x.x and Angular 10.1.x - 11.x.x
View usage-intructions.md
  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
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.
*/
@NativeClass()
class MyNativeClassExt extends NSObject {
@NathanWalker
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 {
nsReplaceBootstrap
} = require('nativescript-dev-webpack/transformers/ns-replace-bootstrap');
const {
nsReplaceLazyLoader
@NathanWalker
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:
@NgModule({
imports: [
NativeScriptModule,
...
CoreModule.forRoot([
@NathanWalker
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) {
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') {
@NathanWalker
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
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
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) {
_super.call(this, item);
this.$implicit = $implicit;
@NathanWalker
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
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';
@Component({
moduleId: module.id,
selector: 'app',
template: `
<StackLayout>
<page-router-outlet></page-router-outlet>
</StackLayout>
You can’t perform that action at this time.