92 posts tagged with NativeScript

  • Using NativeScript with Azure Mobile Services

    NativeScript is a shiny new cross-platform mobile development framework that I'm exploring and comparing to existing frameworks. One common task that we have to do as developers is to connect mobile apps to far away data storage. These days Backend…

  • NativeScript - Changing the iOS Simulator Device

    Have you been trying to run a NativeScript app in an iOS simulator other than iPhone 4s? There is a sorely missed parameter on the run and emulate commands that specifies what device to simulate. While the NativeScript team is busy working on more…

  • Using Native Libraries in Your NativeScript Apps

    When developing a NativeScript app, you might run into a situation where you really need to use a native library that's you've already written, or a library that someone else has already made available as an open source project, for example. Should…

  • NativeScript Apps with Azure Mobile Services – Part 2

    In this continuation of the topic of using NativeScript with Azure Mobile Services, I show how you can use the open sourced iOS library that the Azure team has put together in your NativeScript apps to access the full gamut of functionality that the…

  • Using All the Pixels on iPhone 6 and iPhone 6 Plus in NativeScript

    So you've got your NativeScript app up and running and noticed that it looks a bit strange on the iPhone 6 and iPhone 6 Plus. What's going on? Why is the iPhone scaling my app up and not showing it in fully iPhone 6 glory? When you deploy your…

  • Observing Observables in NativeScript

    If you are coming from the web world, you'll find that NativeScript observables are a little different than the ES6 observables and observables found in pre ES6 day libraries like Knockout. The big difference is that instead of observing a property…

  • Creating a Scalable Label in NativeScript

    There are a few basic UI modules that come with NativeScript. Some of them, like the Label, offer a few simple features like styling and text wrapping, while the native iOS label allows you to do much more. Did you know that you could extend the…

  • Fonts in NativeScript – Yes You Can

    Did you know that you could use your own fonts in NativeScript? You're not stuck with the default Helvetica that you see every label and button use out of the box. This post show you how to see what fonts are available on iOS devices, how to use…

  • Four Methods for Dynamic Backgrounds in NativeScript

    You might be thinking that backgrounds are a pretty simple thing to set on your views, and you're right! NativeScript provides methods for us to set background images as element attributes in the XML as well as set backgrounds though CSS. However…

  • NativeScript.org Blog Post on Calcu{N}ator

    I wanted to build a little calculator app in NativeScript and make it resemble the iOS calculator. Not that we need another calculator out in the world, but I thought it would be a great way to show off some of NativeScript's less known abilities (at…

  • It's Finally Here! NativeScript Animated Side Menu

    A navigation pattern for mobile apps that is still pretty hot at the time of this writing is a side drawer that playfully slides out like the one in the Telerik NEXT app. Or a navigation page that gets revealed as main content slides out of the way…

  • Debugging NativeScript Apps in iOS Simulator

    Let's face it, deploying to a device just to have the ability to debug your NativeScript app is so 4 months ago. I just wanted to write a quick entry on debugging a NativeScript app while running it on the iOS simulator. So hopefully searching for…

  • Get Rid of Clutter while Developing in NativeScript

    Here is a quick tip and a video on how to easily clean up you workspace while writing your NativeScript applications in Visual Studio Code. Related Resources Clutter Free NativeScript Development Video Tutorial It’s really easy to hide all those…

  • NativeScript Code Organization

    Larger projects will require you to keep your code well organized. Proper module referencing is key to moving files and folders around in your NativeScript apps. This post includes a video tutorial on common organization tasks you can perform to move…

  • Look Ma, No Templates!

    or: How I learned to stop worrying and love writing NativeScript apps from scratch Our baby is all grown up and s/he wants to write nativescript apps without using the template! How does our baby do that and where does s/he start? Read on… Versions…

  • How to make the NativeScript ListView scrollToIndex Animated on iOS

    If we want to jump directly to a row in our ListView, there is a handy function in NativeScript called scrollToIndex. Sometimes we want a more natural scroll that animated the scrolling motion, this keeps our human brains more in tune with the list…

  • How to make the NativeScript ListView Editable on iOS

    If you use or develop for iOS, you are very familiar with the swipe-to-delete move. Several built in iOS applications have this including email, notes, and reminders. The NativeScript ListView uses the iOS UITableView in the background, but it doesn…

  • Building Cross Platform Native Mobile Applications with NativeScript Pluralsight Course

    If you’re just starting out with NativeScript and you love learning by watching videos, Alex Ziskind has course on Pluralsight to get you started. You can find the course here Course Introduction Course Description Want to learn how to build native…

  • Calling dispatch_async in NativeScript

    Those of us that have been looking for a way to call in iOS environments while developing with JavaScript in the NativeScript framework have been SOL for a while. However, I am pleased to present a short and sweet solution here that saved my behind…

  • Running the Next NativeScript Version

    NativeScript is an open source project that keeps evolving with releases happening every couple of months. Perhaps you want to try out what's coming up in the next release, or perhaps you saw some way you can contribute to the project. Either way, I…

  • Changing the default template in NativeScript

    Has this ever happened to you? You create a new NativeScript project and then realize that you wanted to use TypeScript? Your options are: Delete the project and recreate it using the TypeScript flag. Delete all JavaScript files, add TypeScript to…

  • Using OAuth with NativeScript

    OAuth has been adopted my many organizations, large and small, as the (current) best standard for authenticating and authorizing their users. OAuth 2.0 being the latest iteration of the standard and it’s used to offload the burdensome security…

  • Announcing the Release of the NativeScript OAuth Plugin

    We’ve been hard at work getting the NativeScript OAuth 2 Plugin ready to work with Microsoft and Facebook accounts for a workflow that’s as streamlined as possible. The goal was to remove confusion and with the version 1.0 release, we’ve done just…

  • Upgrading the NativeScript CLI and Projects

    The latest version of NativeScript is version 2.2.1. Do you have the latest version of the CLI installed and your project upgraded? If not, then don’t worry, it’s not that difficult. Here is a video tutorial that shows you how to do just that…

  • NativeScript Live Debugging

    You may ask, “What is live debugging?” For a long time NativeScript developers had to make a hard choice while developing applications. We had to choose between debugging or using LiveSync. We couldn’t do both. With the latest release, we now don’t…

  • Facebook Login with NativeScript OAuth

    Using Facebook login is pretty common in mobile apps today. There are many other third party authentication providers, but Facebook is extremely prevalent. With the nativescript-oauth plugin recently being updated, and the fact that I haven’t created…

  • How to build your very own pure JavaScript and CSS FAB in Nativescript and Angular (with videos!)

    What’s a FAB? This is a Floating Action Button that has been popularized by the Material Design paradigm. It’s a button that hovers over your content and provides a quickly accessible single function, and it’s no longer only for Android apps. Many…

  • My experience with upgrading NativeScript and project to 2.5 (video)

    NativeScript 2.5 just dropped and it has really awesome features like Chrome debugging and an improved run command. So I couldn’t wait to upgrade my existing installation. I’ve already written a post on upgrading and a video about the same, but I…

  • NativeScript Animations Course on Pluralsight

    If you’re ready to take your animations in NativeScript to the next level, Alex Ziskind has just release another course on Pluralsight specifically for NativeScript and Angular animations. You can find the course here Course Introduction Course…

  • New NativeScript Training Platform Launched

    Folks learning NativeScript have historically had three places to get their learning – the docs section of NativeScript.org, community blog posts like this one, and big publishing houses, this includes printed books and video courses. NativeScript…

  • Why use third party native libraries in NativeScript?

    …and how is that related to plugins? When you create a native mobile application involving anything more advanced than just your standard out of the box user interface controls, you inevitably run into challenges around extending your app to handle…

  • Is it possible to animate height and width in NativeScript? Yes!

    TL;DR Yes! but… For a long time, NativeScript developers have been begging for the ability to animate height and width using standard animation techniques that are well documented. I’ll show you examples of how to achieve this right now, and tell you…

  • Don't Lose Your Hair Over NativeScript ListView Bindings that Don't Cooperate

    “Why is my ListView template binding not working?!!” You’re frustrated and you’re tearing your hair out. “It works on the web, but it doesn’t work here, in my NativeScript app! Why? I’ve gone over it with a fine-tooth comb, but still nothing!” If you…

  • My NativeScript .gitignore File

    This is a quick post just for anyone who’s looking for a .gitignore file to add to their NativeScript projects that they version using Git. At this point, none of the NativeScript out of the box templates generate a .gitignore file. This may be…

  • Are you Being a Good Code Recycler?

    This may sound familiar to you. You've built an Angular web application for the browser, and then had to create a mobile application that has pretty much the same features. So you start from scratch, and maybe, just maybe, you can use some of the…

  • NativeScript Observable Magic String Property Name, Be Gone!

    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…

  • Update to NativeScript with @ngrx Course

    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…

  • Getting Platform Specific in NativeScript

    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…

  • The NativeScript Modal Dialog Checklist

    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…

  • NativeScript with Angular Styling Course Released

    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…

  • NativeScript Font Icon Plugin Checklist

    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…

  • NativeScript Enterprise Auth Course Released

    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…

  • NativeScript Hands-on UI Course

    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…

  • NativeScript CSS Gradients Welcomed

    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…

  • New 'Method' to Measure Views

    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…

  • Cordova to NativeScript Course is Out!

    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…

  • A Video Tip About NativeScript Snippets

    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…

  • Bind to Array with Variable Index in NativeScript

    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…

  • How Many If Statements do You Really Need to Check for Null?

    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…

  • How to TypeScriptify a Purely JavaScript NativeScript Project

    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…

  • Easy NativeScript Network Spy Using a Custom Interceptor

    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…

  • Progress Bar: Plain to Animated

    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…

  • NativeScript-Vue Introduction Course Released

    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…

  • Easy Dev Backend for NativeScript Apps

    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…

  • NativeScript Core XML Comment Blocks

    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…

  • NativeScript Fetch to HttpClient Conversion and Gotchas

    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…

  • Is Your NativeScript App Secure?

    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…

  • Async/Await in NativeScript

    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…

  • TypeScript and Class Components in NativeScript-Vue

    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…

  • NativeScript-Vue Class Components Examined

    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…

  • NativeScript Vue and Vuex

    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…

  • When Should You Use Observable Arrays in NativeScript Core, Angular, and Vue?

    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 to Update NativeScript RadDataForm Programmatically

    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…

  • How to Create an Animated Material Design Ripple in NativeScript

    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 Typings

    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…

  • Force Component Destroy by Using Page Life Cycle in NativeScript Angular

    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…

  • How to Insert a Line Break Using a FormattedString in NativeScript

    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…

  • How to Vertically Center Label Text in NativeScript Android

    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…

  • How to Get Rid of the TextField Border on Android in NativeScript

    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…

  • Custom Events in NativeScript

    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…

  • Animated Bottom Sheet in NativeScript

    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…

  • Cradle Tab Bar Animation in NativeScript

    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…

  • Create a Color Line Shadow in NativeScript

    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…

  • 2 Methods for Creating Shapes in NativeScript

    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…

  • Custom FAB with CSS in NativeScript

    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…

  • Google Login with OAuth2 in NativeScript

    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…

  • How to Add Shadows in iOS

    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…

  • MVVM and Clean Architecture for NativeScript Core Apps

    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…

  • Sliding Colors Tab Bar Animation in NativeScript

    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…

  • NativeScript Testing with Azure Pipelines

    Hey Everybody! Today I’m going to show you how to do some automated unit testing with NativeScript using Azure Pipelines. Notes: This post assumes you are using Azure DevOps to host your repository, but if you are hosting on Bitbucket, GitHub…

  • 7 Things to Know When Learning NativeScript

    Are you already learning NativeScript or about to join the community and start learning this framework that lets you build native iOS and Android app with JavaScript? Here are some seven useful things you should know. TL;DR Here's a video version of…

  • npx Gotcha

    Hey Everybody! Have you been using to run multiple versions of NativeScript? Have you been running out of disk space? Well today I’m going to show you something interesting I found if you use to run multiple versions of NativeScript as seen in this…

  • CI/CD for NativeScript apps with Fastlane and GitHub Actions

    A few months ago I wrote the blog post Automatic NativeScript App Deployments with fastlane showing how to set up fastlane for NativeScript apps. Now, this article takes it a step forward: running the fastlane build process in a GitHub action. Here…

  • iOS Testing with Azure Pipelines

    Hey Everybody! I recently wrote a post on automated unit testing with NativeScript using Azure Pipelines. After some requests I am now writing a more detailed iOS post. :) This post will be specifically for iOS. If you'd like to see how to setup…

  • Using Angular Animations in NativeScript

    Here is another way you could implement animations in your NativeScript applications. If you are using NativeScript Angular, you have the ability to use Angular's animation system in your app. This should be identical to the one you would use in a…

  • NativeScript Back Navigation Gotcha

    Recently I ran into a gotcha with using 'routerExtensions.back()' in a project and wanted to share the problem with you all as well as the solution I used. The Problem In my app I have a detail page, and an edit page. So I need to navigate to the…

  • How to Display Protected Images Using an Angular Pipe

    Displaying images that are behind a protected API is a very common use case when building web and mobile applications, thus creating the need for a clean and easy way to be able to display these types of images using Nativescript's component. The…

  • How to Debounce Search Input in NativeScript

    Do you have a large list of data in your mobile app with search functionality? Are you using a debounce function? You should! Let me show you how! 😁 The Problem Have you ever been typing in a search bar and had a typo so you immediately hit…

  • Passing Data Between Routed Components In NativeScript Applications

    In this article, I want to discuss some ways of passing complex data between routed components in NativeScript applications based on the Angular framework. There are several ways to pass data in Angular applications and I just want to go through some…

  • Add RTL Support to Your NativeScript App Using FlexboxLayout

    RTL (right-to-left) and LTR (left-to-right) layout support is pretty common for apps catering to an international audience that supports multiple languages. However, building layouts that supports both orientation can be a challenge without the right…

  • Helpful Angular Directives for NativeScript #1

    A while ago I finished one more project with NativeScript. During the period of work with this framework I've accumulated some amount of solutions which are quite steadily used in almost every project I had worked on. Each of them allows to quickly…

  • Add Custom Sounds to your Push Notifications

    In mobile app development, one of the most effective engagement tools is notifications. Notifications allow you to increase app retention and improve user experience. Notifications might even be a core requirement for apps such as social media and…

All tags