Awesome Open Source
Awesome Open Source

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: I'm using those in my plugins demo app.

Build Status NPM version Downloads Twitter Follow

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


tns plugin add nativescript-gradient


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".


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>

Plain XML

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

    xmlns:Gradient="nativescript-gradient" loaded="pageLoaded">

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

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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,877
Gradient (427
Nativescript (426
Nativescript Plugin (132
Related Projects