NativeScript

3D Flip Animation

3d horizontal and vertical animation of an Apple Card using only CSS.

Carousel Sample Implementation

A sample carousel implementation in NativeScript without relying on plugins, built with ui builder and animations.

Storing and Retrieving Local Data

You can store and retrieve data in your app using the application-settings module. This demo shows you the various application-settings APIs.

Detecting Online/Offline Connectivity

You can easily monitor the network status of a device using NativeScript's connectivity module.

Displaying a Basic Chart with RadChart

Use NativeScript UI's RadChart component to display data creatively in your apps. There are various chart types to choose from. This demo shows a bar chart.

Displaying a Basic Gauge with a RadGauge

Use NativeScript UI's RadGauge to show progress of a task or any circular UI/UX experience that involves gauges.

Creating a Modal Page

Modal pages are perfect when you want the user to select something without leaving the current page. Or even show a small form.

Creating Circular Progress Bars

Linear progress bars are boring! How about we use some circular ones?

Creating Card UIs

Use cards in your app to build attractive UI. Keep it minimal and simple.

Building ListViews with Avatars/Thumbnails

Often times you need the list UI in your app to have an image for each item. Here's an easy way to do that.

Building a Good-Looking Login Form

A good looking login/registration experience is a must have for any app. Here is a simple yet elegant looking login form example.

Basic Usage of RadCalendar

RadCalendar from NativeScript UI has all the features you need to show calendar, range date picking, showing events, and more.

Adding Video to Your App

NativeScript-Video makes it easy, just drop a Video tag, with a src attribute and boom, you've got video!

Working with Audio Files

Need to play an audio file (e.g. mp3) in your app? Look no further than this audio sample app.

Filterable ListView with Images

Actively filter a listview with text entered in a Search Bar.

Basic ListView with Images

Multi-column listview with images and text overlay.

Image ListView with Text Overlay

Highly styled image-focused listview with text overlapping items.

ListView with Card UI

A listview with card-based UI items that are variable sizes.

News Feed with Images and Text Items

An easy way to display a news feed with an option to filter stories as well.

Master/Detail with SideDrawer and Image Background

A master/detail UI that uses a SideDrawer as the master list with a styled view (with image background) as the child item.

Drawer with Item Highlight

A basic styled drawer with a highlighted item and an image background in the header.

Drawer with Avatar

A basic styled drawer with an avatar image.

Simple Styled Login Form

A basic UI-only view to inspire styled login form ideas.

Building Custom Modal Dialogs

You can easily create modal dialogs that contain custom UI.

ListView and Details Page with Animating Header

You can easily create Master/Detail UI with nice animations and transitions.

Upload Image to HTTP Service with Progress Info

A sample utilizing nativescript-imagepicker and nativescript-background-http plugins

Adding Dialogs to Your App

Dialogs help you to give quick feedback to the user about something. Or prompt the user to enter something, or to choose between multiple options.

Implementing Phone- and Tablet-specific Styling

Learn how to alter your user interface based on phone and tablet form factors.

Implementing Split-View Components

For when you want a two-column layout on tablets, but a one-column layout on phones.

Using Multiple ListView Templates

Have a list of different types of items? You can easily define different templates based on conditions, and the ListView will choose the right one.

Using RadAutoCompleteTextView

Do you expect users to input things from a list? The RadAutoCompleteTextView is a UI element that makes this easy.

Configuring Page Transitions

Add sleek-looking transition animations when navigating between pages. There are many predefined animations to choose from.

Creating Float-Up Text Labels

Provide simple but effective label animations for when users focus on individual form elements.

Adding Basic Gestures to Your Apps

A simple demonstration of how to bind to user interface components to common gestures in your NativeScript apps.

Implementing a Parallax Scroll Effect

Provide an engaging parallax effect to your views with a simple animation.

Basic Usage of RadSideDrawer

Do you have lots of menu items? Don't you worry, the RadSideDrawer has got your back. It's very simple to add a Drawer to your application.

Using the Camera to Take a Picture

Need to take a picture and save it to the device? Look no further.

Composing an Email Message

If you need the ability to automatically or manually compose an email from your app and let the user use their mail client of choice to send it, check out this sample.

Getting a User's Current Location

Need to get the geocoordinates or address of the user? NativeScript-Geolocation makes that a breeze.

iOS NavigationBar with Large Title

iOS has recently introduced the concept of a large navigation bar title when the user needs to provide extra emphasis on context. This is a simple workaround that emulates this behavior.

A functional clock built with Absolute Layout

This sample shows how easily we can build a clock with the power of Absolute Layout and just a few lines of code.

Internet connection status bar

Want to notify user if the device is offline? Display Internet connection status bar

A custom Floating Action Button with eye-candy transitions.

This sample shows how to use the power of NS Layouts and CSS to build a material design based components for either iOS or Android.

A simple and easy-to-use dialog

This sample shows how to build a simple dialog that you can style and drop into any page.

Animated Tab Bar

This sample shows how easily we can build a tab bar with sliding animations

Custom Cradle Tab Bar

A navigation bar with a cradle-like effect that can be either dragged or clicked

Groceries app using SQLite

This sample shows how to build a fully functional offline task-tracking app (groceries) using a sqlite database.

Bottom Navigation Bar for Android

A fully-functional bottom navigation bar for Android using NativeScript components.

VOD Application

VOD (Video On Demand) app, with nice animations and a login screen.

Animated Search

Rich animations power this city guide sample app, including a card-based UI.

Music Player UI

An app design for an engaging music player app.

Rich UI - Social Fitness Tracker

A gorgeous app design for creating a social fitness tracker app (with charts!).

Tinder-like Swipeable Cards

Swipe through a series of cards with this UI sample.

Movie Listings

Browse movies and even reserve your seats with this sample app.

Order Taker

Create an order and split the cost with your friends.

Travel Booking

Book your next travel destination with this sample app.

Simple Card UI with Modal Views

Get a tarot card reading - emoji style - with this engaging sample app.

Personal Finance Tracker

A sample app containing some starter screens for building a personal finance tracking app.

Flight Booking UI

A step-by-step interface for booking a flight.

Swipeable Cards with Animations

Build an engaging UI with this SpaceX spacecraft info starter app.

Personal Finance

A personal finance sample app with a calendar component.

Sports Score Viewer

A UEFA Champions League sample app that can be customized for any league.

Movie Watch List

Allows you to page through the entire Marvel movie timeline, with the ability to mark movies as watched.

Hotel Booking

Browse available hotel rooms with this sample app.

Investment Tracker

Start building an app to track investments with this sample.

Color Picker

Need a color picker for your app? Take a look at this implementation.

Music Streaming App

This sample app contains an amazing design for to help boostrap the next great music streaming app.

Split it Up

This app contains a design for splitting up a bill amongst friends.

Social Network

Get a head start on building a new social networking with this sample app design.

Restaurant Menu App

Browse a restaurant menu with this engaging app UI.

NativeScript Quiz App

Play the quiz with list of categories & questions and even get last quiz score and last quiz date.

RGB Color Picker

Experiment with color selections by mixing RGB values with nice animations.

Animated Rotating Menu

This sample shows how easily we can build a menu with rotating animations.

Instagram Clone with Image Filters

A limited clone of Instagram with a camera module and image filters.

Ripple Effect

A simple animation to create a ripple effect using only core animation techniques.

Cricket Score App

A sample app that provides live cricket scores with some unique UI concepts.

Playing with Shadows

Simple app showcasing the text-shadows plugin with drag effects.

RadListView with Pull-to-Refresh

A simple news feed that uses RadListView from the pro NativeScript UI components along with pull-to-refresh functionality built-in.

RadListView with Favorites

A listview that allows you to mark specific items as favorites via a swipe action.

App Menu Items with Repeater

An alternative type of listview that uses a repeater to display a menu of items.

Creative Samplesfrom the community