NativeScript 8.1 is a bug fix and stabilization release with a few nice long desired additions.
This release comes off the tails of incredible community engagement over the past several months in actively trying out alpha, beta and rc releases which helped identify key issues across a diverse set of production environments. We would like to thank the community for your enduring support and insight.
Our roadmap is available now directly on the homepage. It represents past achievements as well as plans for the future. This Roadmap will be updated on subsequent releases to complete highlighted items as well as adjusted to include additional planned items so you can always refer to it. As always, please consider getting involved in RFC discussions to help influence NativeScript's future.
Updating to any minor or major version of NativeScript typically starts with installing the latest cli so let's do that.
npm i -g nativescript
# then in your projects:
ns migrate
Note: the CLI works with older projects, so it's always recommended to run the latest CLI regardless of project versions.
This will install the latest NativeScript CLI and then run the migrations to update your project.
Here are the dependencies you can expect to be using after a successful migration:
"dependencies": {
"@nativescript/core": "~8.1.1"
},
"devDependencies": {
"@nativescript/android": "~8.1.1",
"@nativescript/ios": "~8.1.0",
"@nativescript/types": "~8.1.0",
"@nativescript/webpack": "~5.0.0"
}
The CLI has been updated to officially support "workspace development". Over the years, several fantastic workspace style (monorepo) tools have become integral parts of scalable software development including but not limited to Lerna, Yarn Workspaces, Nrwl Nx and Microsoft Rush.
Historically the NativeScript CLI had used particular Node APIs which constrained the development styles in which NativeScript could be developed.
As of 8.1, several path resolution changes were made throughout to expand the flexibility in which NativeScript apps can be integrated into some of these popular workspace tools.
Consider a general workspace structure as follows:
apps/
mobile-app-a/
package.json
mobile-app-b/
package.json
package.json
Prior to 8.1, you could use relative file: paths inside each NativeScript app in the workspace to share dependencies around your workspace:
"@nativescript/core": "file:../../node_modules/@nativescript/core",
"another-package": "file:../../node_modules/another-package",
That was a bit awkward and hard to manage. It would also result in longer install times and deeper package.json trees to maintain which could sometimes lead to unexpected results.
With 8.1, you can now properly use things like yarn workspaces to manage dependency trees by setting the CLI package manager:
ns package-manager set yarn
You can even combine Yarn Workspaces with Nrwl Nx to enjoy improved dependency management with NativeScript apps.
For example you can now do the following:
apps/
mobile-app-a/
package.json
{
"dependencies": {
"@nativescript/core": "*"
}
}
mobile-app-b/
package.json
{
"dependencies": {
"@nativescript/core": "*"
}
}
package.json
{
"workspaces": [
"apps/mobile-app-a",
"apps/mobile-app-b"
],
"dependencies": {
"@nativescript/core": "~8.1.0",
"@nativescript/webpack": "~5.0.0"
}
}
Running yarn to install dependencies will allow both mobile-app-a and mobile-app-b to use the @nativescript/core version from the root package inherently in addition to no longer needing to install the package in each app.
Why would each NativeScript app need to specify any dependency at all in this case?
It is common for NativeScript dependencies to bring in additional native dependencies for iOS or Android (for example, CocoaPods, gradle plugins, etc. via NativeScript plugins available on npm). By listing NativeScript dependencies in each app's package.json, you can be explicit which native dependencies are included amidst your root workspace managed package.json. This allows you to share and use different NativeScript plugins across multiple apps in a workspace vs. automatically attaching any native code via NativeScript npm plugins managed at the root.
Rule of thumb 👍: include NativeScript plugins using "*" in each app in the workspace along with the runtime devDependencies they should be using respectively.
To explore what this means hands on, you can play around with two sample workspace setups here:
Previously, generating types on iOS required knowing specific environment level variables to set, and for Android, there was a tool you had to download & run.
In 8.1, We have added a new ns typings command to help generate .d.ts files from native dependencies on demand.
ns typings android [ --jar <Jar1> --jar <Jar2> ] [ --copy-to <Path> ] [ --aar <Aar1> ]
ns typings ios [ --copy-to <Path> ] [ --filter <Filter> ]
Note that the flags are optional. By default the typings will be generated in a typings folder in the directory where you execute the command from, however you can use the --copy-to flag to specify a different folder name or different path altogether.
Note: The --aar and --filter options are not currently implemented, but are planned improvements for a future release.
With 8.1, plugins can now include Kotlin source files inside the platforms/android folder.
// platforms/android/java/org/nativescript/plugins/sample/KotlinWorks.kt
package org.nativescript.plugins.sample
class KotlinWorks {
val hello = "Hello from Kotlin!"
}
const kotlinWorks = new org.nativescript.plugins.sample.KotlinWorks()
console.log(kotlinWorks.hello)
// prints: Hello from Kotlin!
A new environment flag has been added to allow remote adb devices to work:
NATIVESCRIPT_LIVESYNC_ADDRESS="192.168.0.50" ns run android
This allows wireless debugging as documented in the Android Docs.
Another use-case is if you have remote emulators and you run an adb server (for example with adb -a -P 5555 nodaemon server), you can configure your local adb to connect to this server and run apps remotely:
export ANDROID_ADB_SERVER_ADDRESS=192.168.0.50
export ANDROID_ADB_SERVER_PORT=5555
NATIVESCRIPT_LIVESYNC_ADDRESS="192.168.0.50" ns run android
Note: this is just an example, additional configuration may be required for remote adb connections.
--config optionYou can now pass an optional --config option to load a config from a different file than the default nativescript.config.ts.
It's recommended to stick with defaults, but this option allows some flexibility, for example using a different config in production:
ns build android --config=nativescript.config.prod.ts
# will load the values from 'nativescript.config.prod.ts'
Duplicate native dependencies will no longer be built multiple times. Previously, this could happen with plugins that share a common base library like the @nativescript-community/ui-material-* plugins.
There are many more QOL changes included in this release, see full changelog here.
In 8.1, core got some nice bug fixes, features and improvements. Here's a glimpse:
This is just a glimpse of the changes that went into core — see full changelog here.
In 8.1, several memory optimizations have been included, as well as an update of the internal v8 engine to 9.2.230.18.
In particular c string parameter handling has been optimized which will improve memory footprints of applications using SQLite databases.
For a full list of changes, see the full changelog here
In 8.1, several maintenance updates and bug fixes have been included, most notably
In preparation for iOS 15 and Android 12, you will find both new API's included in the latest types:
iOS 15 — see changes in the commit
Android 12 — see changes in the commit
We started with webpack 5 in beta back in April of this year (2021). For several months, we used it with high velocity projects and production deployments allowing us to stabilize many of the new webpack5 APIs with NativeScript projects and we're thrilled to be using it today with much faster builds and a stable 5.0.0 release.
You can catch notes of the release here.
If you are still using @nativescript/webpack ~4.1.0 (or prior), you may see an error like this one 😱
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method getView failed
System.err: ReferenceError: __UI_USE_EXTERNAL_RENDERER__ is not defined
To use 8.1 you will need to modify your webpack.config.js by adjusting the DefinePlugin rules:
new webpack.DefinePlugin({
'global.TNS_WEBPACK': 'true',
'global.isAndroid': platform === 'android',
'global.isIOS': platform === 'ios',
process: 'global.process',
// add these 3 lines
__UI_USE_XML_PARSER__: true,
__UI_USE_EXTERNAL_RENDERER__: false,
__CSS_PARSER__: JSON.stringify('css-tree')
}),
We have released an updated version of @nativescript/tailwind, previously published as nativescript-tailwind that brings support of the fantastic Tailwind CSS to NativeScript. While it was possible to use before, this updated package along with @nativescript/webpack makes it easier than ever:
npm install --save @nativescript/tailwind tailwindcss
Then change your app.css or app.scss file to include tailwind:
@tailwind components;
@tailwind utilities;
And that's it — @nativescript/tailwind will automatically wire everything else up using the new @nativescript/webpack APIs. You can test if everything works by using some tailwind:
<label text="TailwindCSS is awesome!" class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full" />
It is also possible, and even recommended to use the new JIT (just in time) mode of Tailwind by setting it up in the tailwind.config.js. First we'll need to create the config using npx:
npx tailwindcss init
Then change it to enable jit mode:
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
We have brought back the highly requested NativeScript samples which demonstrate several creative layouts, animations and app setups.
We have brought back a NativeScript showcase. We started with a small initial list that we will continue to expand in the coming weeks. We'll soon add more info about how you can submit your own apps. In the meantime, if you would like your app in the showcase, please send the details to [email protected]
All the following nativescript-ui-* plugins have been updated with a major version to include .xcframework compliance for M1 Mac development:
In 12.2, several bug fixes and features have been added.
A new option has been added to reduce unnecessary change detection cycles in your app. It's purely optional but definitely give it a shot!
import { NativeScriptNgZone, platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular'
import { AppModule } from './app/app.module'
runNativeScriptAngularApp({
appModuleBootstrap: () =>
platformNativeScript().bootstrapModule(AppModule, {
ngZone: new NativeScriptNgZone(), // <-- new option
}),
})
Reminder: are you using loadChildren with a "named" page-router-outlet?
When using loadChildren with "named" outlets on your page-router-outlet, be sure your route config contains component: NSEmptyOutletComponent.
This is important due to how Angular under the hood handles named outlets. The absence of NSEmptyOutletComponent will cause the Angular router to create a RouterOutlet outside the scope of @nativescript/angular which can lead to unexpected results.
If your page-router-outlet does not have a name attribute and your route config does not reference an outlet, this does not apply to you.
NSEmptyOutletComponentHere's the changelog for @nativescript/angular:
We will begin official NativeScript Office Hours on the first Monday of each month for one hour starting in October 2021. The time of day (along with the timezone) will be announced soon. The format will be a Zoom meeting that anyone can drop into to ask questions and discuss anything related to NativeScript.
If you are beginning in the field of programming, we invite you to an open minded casual chat with open source maintainers whom are passionate, caring and easy to talk to.
These will be casual AMA (Ask Me Anything) sessions with an opportunity to speak with open source maintainers and professionals covering everything from writing the first line of code to managing open source projects to building in depth user experiences for employers and clients.
Sessions will be scheduled once a month and coordinated between provided timezones.
Resources:
Thank you for investing in a sustainable open source future surrounding JavaScript technologies.
As a closing note, we have been slowly moving the NativeScript community over to Discord, so make sure you join us if you haven't already!
We would like to thank the amazing community for their continuous input, contributions and support. Thanks to those who helped shape the 8.1 release by testing out alpha, beta and rc releases, reporting issues and contributing fixes. ❤️