Adding a NativeScript plugin to our application

NativeScript plugins are npm packages with some added Native functionality. Therefore, finding, installing, and removing NativeScript plugins works a lot like working with the npm packages you might use in your Node.js or frontend web development. You can find all the available NativeScript plugins at the NativeScript Marketplace: https://market.nativescript.org/.

Let's go ahead and add a NativeScript plugin to our application. The plugin we will be adding is called snackbar. We can add the plugin to our application by using the following code:

> npm i nativescript-snackbar

To use our snackbar plugin, we will initialize the Snackbar in our HomeComponent and call it on the setLanguage method:

import { SnackBar } from 'nativescript-snackbar';

export class HomeComponent {
...
setLanguage() {
const selectedIndex = e.object.selectedIndex;
const snackbar = new SnackBar();

this.appService.language = this.languages[selectedIndex];
this.translate.setDefaultLang(
LANGUAGE_MAPPER[this.languages[selectedIndex]]
);

this.translate.get('LANG_UPDATED').subscribe(val => {
snackbar.simple(val, 'red', '#067ab4', 3, false);
});
}
}

Now, we should be able to see a Snackbar every time we set a language. 

NativeScript plugins do not run on NativeScript playground app, as it does not include the native packages. You need to run the application in the emulator using npx -p nativescript tns run <platform>. The platform could be either iOS or Android. If the emulator is not setup on your machine, the command will let you configure for local builds, which will take you to a step by step installation process to be able to run the application on the emulator.

This completes our NativeScript application's implementation. In the next chapter, we will be creating a Reusable Component library and publish it to npm and wrap a Angular Component as a Web Component using Angular Element.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset