Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 76 commits ahead, 7 commits behind gothinkster:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

RealWorld Example App

NativeScript codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Get it on Google Play iOS GitHub license Twitter

This codebase was created to demonstrate a fully fledged fullstack application built with NativeScript including CRUD operations, authentication, routing, pagination, and more.

See how a clone (called Conduit) is built using NativeScript to connect to any other backend from

For more information on how to this works with other backends, head over to the RealWorld repo.

I've gone to great lengths to adhere to the NativeScript community styleguides & best practices but had to adapt between the RealWorld specification and general mobile layout of

Getting started

It is assumed that you have installed and configured NativeScript properly. If not, head to and validate its correct functionality.

To start the emulator with this repository:

git clone
cd nativescript-realworld-example-app
tns run android or tns run ios


This project has been developed with Visual Studio Code and the NativeScript extension. It has been tested and live-synced with a local Pixel 2 android23 emulator for the most time.

How it works

This app works as a NativeScript real-world showcase and is based on NativeScript 4 Angular/TypeScript style.

Head over to the NativeScript Docs to find out how to get started with NativeScript, Angular and Typescript.


This RealWorld app tries to show the following NativeScript concepts:

  • i18n
  • Custom Component inclusion
  • SideDrawer Menu
  • Services
  • Application Settings
  • Custom ActionBar
  • Lazy-loading
  • Modal Dialogs
  • Navigation
  • Plugins (NativeScript and npm JavaScript)
  • Sass
  • TTF inclusion
  • e2e testing

To show as many concepts as possible the structure is not necessarily consistent but may differ between views. This example app does not claim best-practice or anything similar but just one way of achieving a result.


The project follows the general NativeScript/Angular structure without any specifics. It uses lazy-loaded modules to encapsulate functionality further. It uses frame and router navigation to go back and forth between pages.

The project itself is mainly located in the app/ folder. It follows this general architecture:

  • module/ contains the different views and according logic, split into a general, lazy-loaded module structure resembling the UIs
  • service/ contains shared services used to encapsulated global, view-independent logic, i.e. the backend calls
  • model/ contains shared entity classes used as models throughout the other files
  • fonts/ contains FontAwesome icons used in the app. See nativescript-ngx-fonticon for more information
  • i18n/ contains the translation files. See nativescript-localize for more information


Each component comes in two parts:

  • xyz.component.ts the source
  • xyz.component.html the template

Everything is loaded in their according modules and reached via module-specific routing files:

  • x.module.ts the general module
  • x.routing.ts the routing file
  • x.css according CSS

Not all files are necessarily needed to be encapsulated in such a granularity, but the structure was executed through the source to stay consistent.


This repository orientated on the frontend instructions but adapted to some specifics and based all styling and routing on a mix of the app and the overall RealWorld StarterKit instructions.


The UI is composed based on the app. If information was missing/different between Conduit and a mixed adaptation has been implemented.


Nearly all routes have been adapted one-to-one into the app. Some differences occur such as /home.


Other Backends

Obviously, this RealWorld app is a frontend app. But it can connect to all backends implementing the RealWorld spec and API. To test you own backend implementation just change the URL in the settings dialog.


This example app uses a set of available NativeScript plugins to visualize the possible usage. Head over to the NativeScript Market for more information.

Used NativeScript plugins from

Other NPM plugins:


This project has been manually tested against

  • Emulator
    • Pixel 2 Android SDK 23
  • Devices
    • Samsung S8 Android 8.0.0

Automated tests

The project contains an example e2e test to illustrate an end-to-end test case.

License & Credits

Credits have to go out to Thinkster with their awesome RealWorld idea as well as NativeScript.

Thanks to all the plugin developers and articles by so many people on the NativeScript blog, forums and Big thanks!

This project is licensed under the MIT license.


This source and the whole package comes without warranty. It may or may not harm your computer or cell phone. Please use with care. Any damage cannot be related back to the author. The source has been tested on a virtual environment and scanned for viruses and has passed all tests.

Personal Note

I don't know if this is very useful for a lot of people but I wanted a real-world tutorial with NativeScript, so here we are :) I hope this proves helpful to you... with all its Bugs and Issues ;) If you like it you can give me a shout at INsanityDesign or let me know via this repository.


No packages published


  • TypeScript 61.5%
  • HTML 23.0%
  • JavaScript 9.9%
  • CSS 5.6%