Use NativeScript Native APIs to Create a Gradient Text Effect
This post will show you how to add a gradient effect to a text using NativeScript and the native APIs. The implementation will cover both iOS and Android platforms.
The thing that I really enjoy about NativeScript, is the ability to access the native APIs without limit. This enables us to use the platform specific features and come up with apps with the same benefits we would have using the respective native platform implementations.
You are re going to need the TypeScript platform declarations package. Go ahead and type:
Then, edit the references.d.ts file and add the following line:
We’re not going to use the iOS declaration as it won’t work unless you use a dirty TypeScript configuration workaround (more info here).
Create the Native Gradient Processing Function
Let’s create a new file to host the code responsible for the native gradient processing. We’ll start with the Android implementation:
Our main function accepts a label, as well as an array of color codes. We use some helper functions to get the native Android color objects, and then create a
LinearGradient, before assigning it to the Paint.
The signature we’re using is described here.
In this case, we use x0 = 0.0, y0 = 0.0, x1 = textWidth, y1 = 0.0 which will create an horizontal gradient.
Let’s now use it in a Component, for instance, in the
This should provide the following output on an Android platform:
Let’s now tackle the iOS implementation. using the iOS native API on NativeScript is a bit more painful than the Android one, and not being able to access the Type definitions properly doesn’t help… But we’re still able to reach the full potential of the platform, so let’s get to work:
Ok, there is a bit of boilerplate here. Let’s ignore the declarations, cause we aren’t supposed to need them anyway.
In order to get the text width, iOS also needs to access the font size, which is done through:
To apply the gradient, we also use a line going through the text from left to right, like the Android implementation. This time though, the line has to finish on the top right instead of the bottom right for the gradient to be visible:
The last ‘0’ simply indicates that we don’t use any specific option.
Go ahead and try this. We should now have a working implementation for both platforms 🙂
Wrapping the Implementation into a Directive
Let’s make this a bit more reusable, the Angular way. For this, we’re going to create a new Directive:
Next, declare the Directive within the Module in which you’d like to use it. For our example, we’ll do it in the AppComponentModule:
Now we’re able to modify our previous example to make use of the Directive:
A cool thing to do also, is to use the Directive on top of Nathan Walker’s nativescript-ng2-fonticon package.
Before we do this, we need to change the Directive logic in order to deal with the dynamic nature of a Label processed with the TNSFontIconService. We’ll change add a propertyChangeEvent handler to catch any change, and call the applyGradient() if the Label text is not undefined:
This is important because as we’ve seen, the applyGradient() function includes a calculation of the text width, which is not yet available as the hosting Component view is initialised.
Let’s edit the hosting Component to use a font icon:
That’s it ! I hope this has been useful.
Don’t hesitate to write a comment in case of any trouble.