The all new "tns preview" feature in NativeScript 5.0 is very useful for testing small local projects and/or for new developers who want to try out NativeScript without installing all the build tools.
However, the preview app has some limitations, some of them can be worked around. The first is that you must have working internet as the link between the CLI to the preview app on the device is via cloud servers. Your app is transmitted via the internet to your device; and the device creates another channel that is transmitted back to the CLI the console so you can see any errors that occurred.
If your company has an issue with your app source code being transmitted out to the cloud; then make sure you don't use this feature.
The second limitation is that only the plugins that come with the preview app can currently be used. These are the only compiled plugins you can use:
- Progress-nativechat
- Kinvey
- ns-accelerometer
- ns-background-http
- ns-camera
- ns-fresco
- ns-geolocation
- ns-imagepicker
- ns-intl
- ns-iqkeyboardmanager
- ns-permissions
- ns-socialshare
- ns-sqlite
- ns-ui-core, ns-ui-listview, etc (the rest of the ns-ui suite)
Now, this is a decent list; but we currently have over 800 plugins available to NativeScript. A number of these additional plugins can be used in the preview app. There is two ways to work around the built in limitations of the Preview app. However, only if the plugin is 100% pure javascript source (*). If the plugin has no compiled code; then you can work around it easily by doing the following:
- npm i --save-dev nativescript-dev-webpack
- tns plugin add <plugin_name>
- tns preview --bundle
By using the --bundle command, it will use webpack to webpack your source code and then those 100% pure JS plugins will be transmitted to the app in one of the two bundles.
The second way (if you don't want to use webpack, or webpack is breaking something) is to basically install the plugins into a different folder that will be synced via the preview function.
- Change to your "app/" directory (main directory that contains the app.js/app.ts file)
- npm i <plugin_name> --save
- In your source code do 'var X = require("~/node_modules/plugin_name");' (or you can use the import statement, you still have to use "~/node_modules/" to allow the javascript engine to be able to figure out where the plugin actually resides, since it isn't in the normal location.
Again this technique will ONLY allow any 100% JavaScript plugins(*) to be used in NativeScript, anything that has a cocoapod, gradle, or jar/aar file won't work. Everything inside the "app" directory is synced to the device, so these 100% JavaScript plugins will also be synced and then be usable.
(*) - It is possible that a 100% JS plugin won't work on Android. Any plugins that actually requires the SBG (Static Binding Generator) to generate compiled Java code from the JS code can't work; as the Preview app has no ability to use any additional compiled code.