Native Layout Inspection with Android Emulators and Devices


So you have an awesome layout in your app and some of your view components aren’t aligned correctly or seem to have weird margins. We’ve all been there, and while this tip is not going to let you fix that really quick. It will help you to visualize how the layout has been drawn using the native views. This is applicable to any UI built on Android, including: NativeScript, ReactNative, Xamarin, etc. Anything that renders native UI.

Continue reading “Native Layout Inspection with Android Emulators and Devices”


Force commits to pass TSLint


I was recently working on a project and multiple collaborators started to contribute to. All seemed fine until one day, I synced up with the master branch and had 100 warnings pop up in VSCode. I thought about buying my hot dog cart and moving to a beach area finally.



Being totally honest, that cart near the beach looks way more fun than sitting behind a desk staring at a beam of light sucking my soul away sometimes, but that’s just me. You are different and still love programming, because you’re young and full of energy. You’ll mature once you realize you attend meetings that could have been emails for years.

At any rate, lets get back to the issue.

So here I was staring at 100+ warnings all related to TSLint. At first, I thought, “Damn, I’m gonna Macho Man Randy Savage elbow drop someone.”


I then started thinking “how could they commit with these warnings?”, it turned out I had the TSLint extension for VSCode installed and they did not, so they never seen the warnings as they worked on the project. Worse yet, nothing was in place to warn them or prevent the code from being committed.

The Solution

We already use a precommit hook that runs Prettier against files so it was a simple step to add tslint to run during the precommit hook we have in our project.

"lint-staged": {
    "*.ts": [
      "prettier --write",
      "git add"

The above basically runs on all the TypeScript files and runs `tslint` then `prettier` and last `git add`.

As for how this gets executed I have a brief write up on adding a precommit hook for Prettier. Which outlines the dependencies on `husky` and `lint-staged`. If you don’t want to look at that, then add the following as a script in your package.json `scripts` section:

    "precommit": "lint-staged",

Be sure to add the dependencies to your project as well under the `devDependencies`: `lint-staged` and `husky`.

Now when someone tries to commit files to the repo their files will be ran against `tslint` (at this point I shouldn’t have to tell you that you need it inside your project). If all the tslint checks pass then the commit works, if not you’ll have errors with your git logs.

Use Camera Plus in a NativeScript Project


What is Camera Plus?

Camera Plus is a NativeScript plugin recently open sourced from the team at nStudio. Prior to being open sourced the plugin was developed privately with the support of LiveShopper. This plugin allows you to embed a UI component into your layouts. So you can create applications with custom camera layouts. The plugin provides a lot of functionality out of the box. For this guide we’ll stick to the core functionality of installing and using the plugin to take a picture.

Continue reading “Use Camera Plus in a NativeScript Project”

Add Prettier to TypeScript Projects with PreCommit Hook

Where you been?

If you haven’t heard of Prettier you are missing out on one of the best tools for the javascript community. I’ve been hanging around on the outskirts of adopting Prettier because I’m very focused on TypeScript projects and initially there was no support for TypeScript. That was until 12 days ago when 1.4.0 was published. So now I’m diving head in on all projects to default with Prettier support. I’ll keep this brief, so let’s dive in.

The Steps

First, we need to add a few packages to our project as dev dependencies. Run the following from your terminal:

npm install prettier lint-staged husky --save-dev

You can use yarn if you’d like instead of npm to install the dev dependencies.

Second, open your project’s package.json and add the following script and object for lint-staged

"scripts": {
  "precommit": "lint-staged"
"lint-staged": {
  "*.ts": [
  "prettier --write",
  "git add"

That’s basically all you need to do. Pretty simple, our precommit script will run lint-staged which will run the prettier command on the .ts files being committed.

Dismiss the Android SoftKeyboard Programmatically in a NativeScript App

Be Gone You Damn KeyBoard

If you’re like me you get really frustrated with apps that leave the soft keyboard open when you’ve completed some action that should have closed it. Maybe you completed a form and tapped a ‘Submit’ button, well that keyboard is pointless now so hide the thing please. There are some use cases where you don’t want to but oh well I’m going to tell you how to get rid of it when you want to in your code.

import * as app from 'application';

import { isAndroid } from 'platform';

* Hide the keyboard with a conditional Android platform check.
private hideKeyboard() {

   if (isAndroid) {
      try {
         let activity =;
         let Context =;
         let inputManager = Context.getSystemService(android.content.Context.INPUT_METHOD_SERVICE);
    inputManager.hideSoftInputFromWindow(activity.getCurrentFocus().getWindowToken(), android.view.inputmethod.InputMethodManager.HIDE_NOT_ALWAYS);
      } catch (err) {

The code is pretty simple and just uses the Android InputMethodManager service and calls the hideSoftInputFromWindow() method. Has worked great in my apps and hopefully it helps you out if you ever need to get rid of the keyboard in your Android NativeScript app.