After some time since NativeScript 8.7 was released, NativeScript 8.8 is finally now available, featuring many interesting updates that we’ve been eagerly awaiting. For me, I was sold when I saw the ns native command—it’s super useful. While there are many more exciting updates, let’s dive into them one by one.
CLI Updates
ns embed
If you have an existing platform project in Swift, Objective-C, Kotlin, or Java, you can now easily embed NativeScript screens, flows, and utilities with a single command.
ns embed ios
# or ...
ns embed androidThis command allows developers to integrate NativeScript functionalities directly into their native projects, streamlining the development process and enhancing the user experience by leveraging NativeScript’s powerful capabilities.
ns native
Now my favorite part about this update, we can now easily generate platform language classes or utilities, using CLI:
ns native add swift AwesomeClass
# Swift file 'nativescript-project/App_Resources/iOS/src/AwesomeClass.swift' generated successfully.
ns native add objective-c OtherAwesomeClass
# Module map 'nativescript-project/App_Resources/iOS/src/module.modulemap' has been updated with the header 'OtherAwesomeClass.h'.
ns native add kotlin com.company.AwesomeClass
# Kotlin file 'nativescript-project/App_Resources/Android/src/main/java/com/company/AwesomeClass.kt' generated successfully.
ns native add java com.company.OtherAwesomeClass
# Java file 'nativescript-project/App_Resources/Android/src/main/java/com/company/OtherAwesomeClass.java' generated successfully.These platform files will be automatically built into your project, allowing you to generate TypeScript interfaces for easy usage in your NativeScript application, thus facilitating seamless integration between platform-specific code and your NativeScript codebase.
Core Enhancements
CSS Media Query Support
Thanks to contributor Dimitris-Rafail Katsampas for submitting the pull request, you can now use media queries as you’d expect to handle a range of form factor requirements.
@media only screen and (orientation: landscape) {
Label {
color: yellow;
font-size: 24;
}
}
@media only screen and (prefers-color-scheme: dark) {
Label {
background-color: #fff;
color: #000;
}
}
@media only screen and (max-width: 400) {
Label {
font-size: 10;
}
}
@media only screen and (min-height: 800) {
Page {
background-color: red;
}
}This update enhances the responsiveness of NativeScript applications, allowing developers to optimize their app’s appearance and usability across different devices and orientations effectively.
Additional CSS Level 4 Support
The release of NativeScript 8.8 includes added support for more CSS Level 4 features such as :not(), :is(), :where(), and subsequent sibling combinator handling via ~. This support expands the styling possibilities, empowering developers to create more dynamic and responsive UI designs.
SF Symbols with Effects
SF Symbols is a comprehensive library of over 6,000 symbol icons designed to work seamlessly with Apple’s San Francisco font system, which is the default system font for iOS, macOS, watchOS, and tvOS. Introduced by Apple, SF Symbols provides designers and developers with a collection of consistent and versatile icons that can be utilized in their applications.
And, good news is NativeScript 8.8 supports SF Symbols through any Image component by using the sys:// prefix.
<GridLayout rows="auto,auto" columns="*,*">
<Image src="sys://photo.on.rectangle.angled" width="100" tintColor="green" [iosSymbolEffect]="symbolBounceEffect" />
<Image col="1" src="sys://photo.on.rectangle.angled" width="100" tintColor="green" [iosSymbolEffect]="symbolBounceEffect" iosSymbolScale="small" />
<Image row="1" src="sys://photo.on.rectangle.angled" width="100" tintColor="green" [iosSymbolEffect]="symbolBounceEffect" iosSymbolScale="medium" />
<Image row="1" col="1" src="sys://photo.on.rectangle.angled" width="100" tintColor="green" [iosSymbolEffect]="symbolBounceEffect" iosSymbolScale="large" />
</GridLayout>You can define the symbol effect in your TypeScript code:
import { ImageSymbolEffects } from '@nativescript/core';
const symbolBounceEffect = ImageSymbolEffects.Bounce;For more details, watch the Youtube video demonstrating these new functionalities.
WinterCG Compliance – Part 2
With NativeScript 8.8, compliance with WinterCG continues, incorporating support for crypto functions, as well as btoa and atob for base64 encoding and decoding. This improvement ensures that developers can create more secure applications while easily handling base64 data.
Android Enhancements
In version 8.8, the engine now enables Kotlin 2 with Gradle 8 as the official default. This update encourages developers to utilize the latest features of Kotlin while preparing NativeScript projects for the upcoming minimum SDK of API Level 34, ensuring compatibility with future Android updates.
iOS Improvements
With version 8.8, the engine now provides platform type deprecation and version info annotations for the first time. This feature significantly enhances the development experience, allowing developers to see when APIs were introduced or if they are deprecated. This information helps facilitate efficient project development cycles as developers can plan to switch to newer APIs as needed.
Conclusion
The release of NativeScript 8.8 brings a treasure trove of new features and improvements that empower developers to create robust, modern mobile applications. From simplified integration with native projects to enhanced support for CSS, SF Symbols, and improved platform compliance, NativeScript 8.8 enables a seamless and efficient development experience. Whether you are an experienced developer or new to the NativeScript ecosystem, the updates in this version will undoubtedly help you build better applications with greater ease. Embrace the power of NativeScript 8.8 to enhance your development processes today!