Creative Samplesfrom the community

There's a lot of fun user experiencies that can result from NativeScript development. Browse just a few samples here.

3D Flip Animation

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

Carousel Sample Implementation

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

Storing and Retrieving Local Data

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

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

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

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

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

Creating Circular Progress Bars
Linear progress bars are boring! How about we use some circular ones?

Creating Card UIs

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

Building ListViews with Avatars/Thumbnails

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

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

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

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

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

Filterable ListView with Images
Actively filter a listview with text entered in a Search Bar.

Basic ListView with Images

Basic ListView with Images
Multi-column listview with images and text overlay.

Image ListView with Text Overlay

Image ListView with Text Overlay
Highly styled image-focused listview with text overlapping items.

ListView with Card UI

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

News Feed with Images and Text Items

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

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

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

Drawer with Avatar

Drawer with Avatar
A basic styled drawer with an avatar image.

Simple Styled Login Form

Simple Styled Login Form
A basic UI-only view to inspire styled login form ideas.

Building Custom Modal Dialogs

Building Custom Modal Dialogs
You can easily create modal dialogs that contain custom UI.

ListView and Details Page with Animating Header

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

Upload Image to HTTP Service with Progress Info
A sample utilizing nativescript-imagepicker and nativescript-background-http plugins

Adding Dialogs to Your App

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

Implementing Phone- and Tablet-specific Styling
Learn how to alter your user interface based on phone and tablet form factors.

Implementing Split-View Components

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

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

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

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

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

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

Implementing a Parallax Scroll Effect
Provide an engaging parallax effect to your views with a simple animation.

Basic Usage of RadSideDrawer

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

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

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

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 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

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

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.

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

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

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

Custom Cradle Tab Bar

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

Groceries app using SQLite

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

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

VOD Application

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

Animated Search

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

Music Player UI

Music Player UI
An app design for an engaging music player app.

Rich UI - Social Fitness Tracker

Rich UI - Social Fitness Tracker
A gorgeous app design for creating a social fitness tracker app (with charts!).

Tinder-like Swipeable Cards

Tinder-like Swipeable Cards
Swipe through a series of cards with this UI sample.

Movie Listings

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

Order Taker

Order Taker
Create an order and split the cost with your friends.

Travel Booking

Travel Booking
Book your next travel destination with this sample app.

Simple Card UI with Modal Views

Simple Card UI with Modal Views
Get a tarot card reading - emoji style - with this engaging sample app.

Personal Finance Tracker

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

Flight Booking UI

Flight Booking UI
A step-by-step interface for booking a flight.

Swipeable Cards with Animations

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

Personal Finance

Personal Finance
A personal finance sample app with a calendar component.

Sports Score Viewer

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

Movie Watch List

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

Hotel Booking

Hotel Booking
Browse available hotel rooms with this sample app.

Investment Tracker

Investment Tracker
Start building an app to track investments with this sample.

Color Picker

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

Music Streaming App

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

Split it Up

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

Social Network

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

Restaurant Menu App

Restaurant Menu App
Browse a restaurant menu with this engaging app UI.

NativeScript Quiz App

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

RGB Color Picker

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

Animated Rotating Menu

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

Instagram Clone with Image Filters

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

Ripple Effect

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

Cricket Score App

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

Playing with Shadows

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

RadListView with Pull-to-Refresh

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

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

App Menu Items with Repeater

App Menu Items with Repeater
An alternative type of listview that uses a repeater to display a menu of items.