NativeScript Gradient 🎨

PSA: With NativeScript 4.1 this plugin is no longer needed, because linear gradient support is now built-in. Here, have a Tweet about it: https://twitter.com/tjvantoll/status/1004735792474935296. I'm using those in my plugins demo app.

Those are screenshots of the Angular and plain XML demo apps.

Installation

tns plugin add nativescript-gradient

Usage

Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

In addition to any properties you can already set on a StackLayout you should add:

• colors: Pass a minimum number of two. Just use the value that you would otherwise pass to NativeScript's new Color("value"). So red, #FF0000, rgb(255, 0, 0), and even rgba(255, 0, 0, 0.5) (transparency!) will all work.
• direction: One of "to bottom", "to top", "to right", "to left", "to bottom left", "to top left", "to bottom right", "to top right".

Angular

Add this to app.module.ts so you can use a Gradient tag in the view:

import { registerElement } from "nativescript-angular";
registerElement("Gradient", () => require("nativescript-gradient").Gradient);

These colors are also used in the screenshots above.

<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
  <Label class="p-20 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></Label>
  <Label class="p-10 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
</Gradient>

Plain XML

Import the Gradient namespace in the Page tag and enjoy the colors!

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Gradient="nativescript-gradient" loaded="pageLoaded">

  <Gradient:Gradient direction="to right" colors="#FF0077, red, #FF00FF">
    <Label text="Such a fancy gradient :)" horizontalAlignment="center"/>
  </Gradient:Gradient>

Q & A

Does this plugin use any third party libraries?

Nope, it's as light as a feather!

What kind of element is the Gradient tag?

It's a StackLayout, so you can use all the regular StackLayout properties (like orientation="horizontal" and borderRadius="5") - and you can use the Gradient tag in any spot where you would otherwise use a StackLayout.

How many colors can we pass to the plugin?

Knock yourself out, but the minimum is two.