Skip to content

Instantly share code, notes, and snippets.

@hshristov
hshristov / Plugins 3.0
Created May 23, 2017 10:09
How to create plugins for NativeScript 3.0
# Writing UI plugins for NativeScript
This article will guide you through the process of creating UI plugin and will try to explain new concepts on the way. All the code is in TypeScript and assume you are using NativeScript 3.0 or newer.
In this article you’ll create a simple button plugin to get an idea of how to build your own NativeScript UI plugins.
Before we start we need to create 4 files: my-button.d.ts, my-button-base.ts, my-button.android.ts and my-button.ios.ts.
@hshristov
hshristov / Plugins3.0.md
Created May 23, 2017 10:11
Create UI plugin for NativeScript 3.0

Writing UI plugins for NativeScript

This article will guide you through the process of creating UI plugin and will try to explain new concepts on the way. All the code is in TypeScript and assume you are using NativeScript 3.0 or newer.

In this article you’ll create a simple button plugin to get an idea of how to build your own NativeScript UI plugins.

Before we start we need to create 4 files: my-button.d.ts, my-button-base.ts, my-button.android.ts and my-button.ios.ts.

One of the main goals of [email protected] is to enable more flexible composition of UI. Let's start with some history. Before 4.0 we create Frame control for you (check application.ios.ts and frame.android.ts). Frame control allows you to do navigation forward or backward. While this is convenient it introduce other issues that can't be workaround easliy. For example if you want to have TabView in all pages you have to include it in the xml and set its selectedIndex so that once you navigate to different page a correct TabViewItem is selected. This leads to several problems:

  • parse more xml
  • increase memory usage
  • increase loading time

Same issues apply if you want to have SideDrawer control as a root component.

So in order to resolve these starting with 4.0 applicat