A popular approach in JavaScript APIs these days is to pass a string that matches a property name as a parameter to some function. These are sometimes called ‘magic strings’ and they are very code smelly. In this article and video we will fix this…
Do you manage your application state using the Flux pattern (now better knows as Redux, I suppose)? Well you should check it out since it will make your application state handling life much easier. @ngrx is a Redux inspired set of libraries for…
Have you ever written platform specific code in NativeScript, whether it was JavaScript or CSS? Did it look like a giant -- statement? Or maybe you even separated out your platform specific code into separate functions, but you still needed…
Close your eyes for a moment and imagine yourself creating a modal dialog for a web application. Ok, I know, there are more exciting things to imagine, but roll with it for a moment. Got it? Now imagine creating a modal dialog in a NativeScript…
Working on a team that has given me the experience to create production NativeScript and Angular applications, I’ve been in the trenches and have seen real world scenarios that someone might come across while building an app. Hi, I’m Sean Perkins…
By this time, you likely have already had the experience of adding font icons to your web or mobile application. You can add nice graphics to spice up your interfaces and you can style the graphics with CSS, since they are just fonts. Libraries like…
How do we secure our enterprise mobile applications? We’re happy to announce that we now have a video course that shows how to do just that. Securing enterprise applications has always been a challenge, and single sign-on used to be the holy grail…
We’re ready to create our new NativeScript app, but we just need to know how to do it. Many people that are coming to NativeScript after being web developers or from other frameworks like Cordova are initially just trying to be as productive as…
This video tutorial walks you through using a brand new feature in NativeScript version 4.1 - css gradients! CSS gradients have been on the NativeScript styling wish list for quite some time, and they have finally arrived! In this tutorial, I'll show…
This is another video tutorial in the series that looks into amazing new features in NativeScript version 4.1. This time I'm digging into the new event and trying it out in Core and Angular. Tired of having to use to get native UI element…
Mobile apps! They are ubiquitous in today’s world. JavaScript developers have been successfully using hybrid approaches to creating mobile apps for years. But the pace of mobile UX and the performance demands have skyrocketed, and hybrid apps, built…
This is another time-saving tip for NativeScript developers. If you aren't using NativeScript Core and NativeScript Angular snippets in Visual Studio Code, then you are missing out. In this short video tutorial on snippets, I show you which…
Let's say you are in a situation where you want to show the user the corresponding image when the user selects a particular SegmentedBar option in NativeScript Core. We'll use the widget to display the image, and to display the options. The…
JavaScript developers have a dirty secret: how we handle null and undefined variables in nested objects. It's no secret that as JavaScript developers we work with objects that often contain other nested objects and even arrays and primitive types…
You've been building your NativeScript app using pure JavaScript. Maybe ES2015 or ES2017, then you're transpiling to ES5 at build time. And now, after hearing about how amazing TypeScript is, and "everybody's doing it", you're finally ready to take…
What's a simple thing all developers really want from complex, network-bound mobile app? We want to find network related actions and errors as quickly as possible, without all the headaches of setting up proxies and certificates to sniff our HTTP…
In this series of written and video tutorials, I'll progressively improve the progress bar (see what I did there?) by adding JavaScript animation to its movement, and then using RxJS to animate it. TJ VanToll wrote an excellent post on building a…
After over a year of planning and waiting for a super stable version, it’s my pleasure to announce that together with the stable version 2 release of NativeScript-Vue, we've released a beginner level video course called NativeScript-Vue Introduction…
This just happened to me and I was seriously confused. I'm used to getting a hold of the frame or injecting the into an Angular component constructor, but this time, they were missing! While working on an Angular demo for the new NativeScript…
During development, I prefer using a local backend that I quickly spin up along with my NativeScript apps. Why? It's easy, it's offline, it gives me more control, and it allows me to reason about my app in a more realistic way during development…
Here I was trying to comment out a large block of XML markup in my NativeScript UI code, but I had another comment right in the middle of the code I was trying to comment. Here's how I was able to do it. Note: This technique can't be used in html…
Converting fetch to HttpClient to make API calls is pretty straightforward. But sometimes it's not done correctly, especially when abusing the async pipe. It may be beneficial to use HttpClient instead of the good old global fetch API that lives in…
You've built a mobile app. But is it secure? There are many resources out there for learning how to do great things with NativeScript, whether it's UI, or animations, or performance. These are all important things to know. There is one are that's…
The mysterious async/await combination has been permeating JavaScriptland the for a bit now. You can use it in NativeScript too, but you need this little trick to get it working. Async/await works for either NativeScript Core, NativeScript with…
The time that we've all been waiting for has finally come. Ok, maybe the time that I've been waiting for... Big News NativeScript-Vue finally got TypeScript support! Here is the pull request by Manuel Saelices that made it possible. This news is…
Using class components in NativeScript-Vue with TypeScript? You need to know these five things. Warning: strong personal opinions follow, but there is no swearing ;) Right Direction Class Component Scaffolding Five Things About Class Components in…
I'm excited to announce my latest project over at NativeScripting – NativeScript Vue and Vuex! This course provides an overvue of Vuex and looks at how we can apply it to our NativeScript Vue projects. What's Inside Throughout the course, we'll look…
Typically we bind the ListView and Repeater components to a JavaScript array in NativeScript, but it's not always clear when you should use a regular JavaScript array or ObservableArray. What is so observable about it anyway? That's what we're going…
How do you update a value field when using the RadDataForm in NativeScript? At the time of writing, you can't do it using any JavaScript API. In this short NativeScript tutorial, I'll show you a workaround. TL;DR If you prefer video, I cover how to…
In this NativeScript tutorial, we'll create an animated material design type of ripple effect on your buttons using JavaScript and CSS, and no external iOS or Android libraries needed. We use buttons for the demo, but you can apply the effect on…
NativeScript Vue Manual Routing Function Typing This tutorial will show you how to avoid TypeScript compilation errors when using NativeScript-Vue routing functions along with your TypeScript class-based components. TL;DR If you prefer a video…
NativeScript Angular keeps navigated components alive on a stack. This is great for performance since the framework doesn't have to work as hard to recreate the components that you might return to. However, sometimes you might need manual control…
The Vue wrapper component 'transition' is one of my favorite features in Vue. It allows us to animate showing and hiding components with 'v-show' or 'v-if' in an easy and declarative way. Basically, we can do to do something like: where will refer…
Whether you're using NativeScript Core, NativeScript Vue, or NativeScript Angular, some core widget tricks are the same, including using a to separate out the sections of text in your Labels and Buttons. In this short NativeScript tutorial, we'll…
The verticalAlignment property doesn't work with Label text in Android in your NativeScript apps. So how do you vertically center text in a NativeScript Label on Android? This short tutorial will show you a workaround that will accomplish this. TL;DR…
Want to make your TextFields look more or less the same on iOS and Android? This tutorial will show you how to get rid of the bottom border of a TextField in a NativeScript Android application. TL;DR Here's a video for you if you prefer watching the…
In this tutorial, you'll learn how to use multiple nested frames to separate your UI, enabling you to navigate one part of the screen while keeping another part of the screen always showing. TL;DR If you'd rather watch a video of the tutorial, here…
Besides all the different events that you can listen for in NativeScript views, did you know that you can also create custom events? That's what we'll be doing in this tutorial! TL;DR Here's a video for you if you prefer a more visual tutorial…
By popular demand, in this tutorial, we'll be creating an animated bottom sheet that works on iOS and Android. TL;DR If you prefer watching a video of the tutorial, then here you go: Introduction This article is the third part in a series of…
In this NativeScript tutorial, we'll show you how to replace the 'ActivityIndicator' that comes with the iOS and Android platforms with a more flexible one that we'll design ourselves. We'll create one that resembles the Android built-in activity…
In this tutorial, you'll learn how to create a bottom navigation bar with a cradle like effect that can be either dragged or clicked. The final result will look something like this.. Cradle Tab Bar Getting Started To start with, we begin with a…
In this tutorial, I'll show you how to get those clean line shadows that you can fully control in intensity, size, and color, just by using CSS. And they will look pretty much the same on iOS and Android. TL;DR If you prefer going through a video…
Have you always dreamed of being able to create shapes in NativeScript UIs? In this NativeScript tutorial, you'll learn 2 ways of creating shapes in NativeScript applications. TL;DR Here's a video for you if you prefer watching the tutorial…
In this article, we'll cover how to create a custom stepper component that can be incremented/decremented using both a touch and a pan gesture. This tutorial not only teaches how to create a fancy UI component using NativeScript provided widgets (no…
In this tutorial, we'll be creating a Floating Action Button (FAB) in a NativeScript Core application using just CSS and no third-party libraries. TL;DR Check out the video below if you prefer a more visual way of learning. Introduction About two…
Today, we'll be animating from a Floating Action Button (FAB) into a Modal Dialog. TL;DR Here's a video for you if you prefer a more visual tutorial: Introduction In the last tutorial, we created a Floating Action Button (FAB) using just the…
Do you need to include social authentication in your mobile apps? In this NativeScript tutorial, we're using OAuth2 and adding Google login to a simple app. TL;DR Here's a video version of this tutorial on my YouTube channel. You can find a lot more…
In this NativeScript tutorial, I'll show you five native iOS properties you can alter to create any kind of shadow in your iOS NativeScript apps. TL;DR If you prefer a video of the tutorial, here it is: Introduction In NativeScript 6, elevation for…
In this tutorial, you will learn how to create a large collapsible animated title on iOS — a native platform effect introduced in iOS 11. If you prefer a video tutorial, here's one for you: Introduction When iOS 11 came out, some of the apps that…
In this NativeScript tutorial, we are going to recreate the play/pause animation used in the iOS podcast app. Other than the animation, we'll also see how to add a shadow to an image that takes up the color of the image. If you prefer watching a…
In this NativeScript tutorial, we'll show you how to add a collapsible Search Bar to your iOS app's Navigation Bar. Here's a video of the tutorial if you prefer a more visual medium: Introduction In a previous article, we showed you how to add large…
When it comes to writing code for your NativeScript application, there are different software architectures or design patterns that you can use to structure the code. In this article, we'll look at two of these: MVVM (Model-View-ViewModel) and Clean…
Today I’m going to show you show to do some cool things with Google maps in NativeScript using the nativescript-google-maps-sdk plugin. Here's what we're covering today How to center the map Place a marker on the map Draw a polyline on the map How to…
In this tutorial, you'll learn how to create a bottom navigation bar with a sliding color animation. This tutorial will be focused more on creating the custom tab bar rather than how to use the component. Result Getting Started Lets begin with a…
In this NativeScript tutorial, I'll share with you a technique on getting a beautiful, dark translucent tab bar in iOS in your NativeScript apps. TL;DR If you prefer watching a video of the tutorial, then here you go: Introduction If you take a look…