React NativeScript

React NativeScript

  • Docs

›SAMPLES

INTRODUCTION

  • Introduction

GETTING STARTED

  • Quick Start
  • Environment Setup
  • Using React Devtools

CORE CONCEPTS

  • Native Access
  • Navigation
  • Node Roles
  • Modals
  • Plugins
  • Styling

SAMPLES

  • Apps

ELEMENTS: LAYOUT

  • AbsoluteLayout
  • DockLayout
  • FlexboxLayout
  • GridLayout
  • StackLayout
  • WrapLayout

ELEMENTS: COMPONENTS

  • ActivityIndicator
  • ActionBar
  • ActionItem
  • Button
  • DatePicker
  • Frame
  • HtmlView
  • Image
  • Label
  • ListView
  • ListPicker
  • NavigationButton
  • Page
  • Placeholder
  • Progress
  • ScrollView
  • SearchBar
  • SegmentedBar
  • Slider
  • Switch
  • TabView
  • TabViewItem
  • TextField
  • TextView
  • TimePicker
  • WebView

LICENCES

  • Licences
Edit

Apps

React NativeScript v2

NS:IDE

auto-complete native manipulation

Evaluating native code

Manipulating native UI

A REPL for experimenting with NativeScript code at runtime (iOS-only).

Made by Jamie Birch (@LinguaBrowse).

  • GitHub Source
  • App Store page

Global Rewards app

Global Rewards rewards page Global Rewards user profile page Global Rewards transactions page

Rewards page

User profile page

Transactions page

The mobile app for the corporate spend management platform, Global Rewards.

Made by Finity Development.

  • iOS App Store page
  • Google Play Store page

Chat app

A beautifully designed chat app, showing how you can create a very professional looking app with very little code!

Made by kaurag007ph (@Kaurag1117L).

  • GitHub Source
  • Demo video on Twitter

NativeScript UI Drawer demo app

Made by keerl.

See in the /react directory at: https://github.com/nativescript-community/ui-drawer

NativeScript UI CollectionView demo app

Made by keerl.

See in the /react directory at: https://github.com/nativescript-community/ui-collectionview

React NativeScript v0

🚨 The samples in this section were made using React NativeScript v0. APIs for components and plugins have changed greatly since then!*

RPS Project Tracker 2.0

Login Page Backlog Page Detail Page

Login Page

Backlog Page

Detail Page

This app serves as the real-world sample app for React NativeScript. It's a port of a port; based on Shiva Prasad's rpstrackertnsts NativeScript Core implementation of Alex Ziskind's "RPS Project Tracker 2.0" series of apps. Supports both iOS and Android.

Made by Jamie Birch (@LinguaBrowse).

  • GitHub Source

WhatsApp Redesign

WhatsApp Redesign calls tab WhatsApp Redesign chats tab WhatsApp Redesign chats tab, header retracted

Calls tab

Chats tab

Retracted header

An example redesign of WhatsApp, supporting both iOS and Android.

Made by Aliziwe Mahono (@itxTiamat_BAF).

  • NativeScript Playground Source

Avfallshämtning

Avfallshämtning preview 1 Avfallshämtning preview 2

Full description from the Google Play store (automatic translation):

Place an order for waste collection. Fill in personal information that is easily and securely stored in the phone for future orders. Answer a few questions about the waste and suggest a time for collection.

Released for iOS and Android.

Made by (@Lelelo1).

  • iOS App Store page
  • Google Play Store page
Last updated by Jamie Birch
← StylingAbsoluteLayout →
  • React NativeScript v2
    • NS:IDE
  • Global Rewards app
  • Chat app
  • NativeScript UI Drawer demo app
  • NativeScript UI CollectionView demo app
  • React NativeScript v0
    • RPS Project Tracker 2.0
    • WhatsApp Redesign
    • Avfallshämtning
React NativeScript
Docs
Getting StartedUI Components Reference
Community
Stack OverflowChat on Slack in #reactTwitter
More
GitHub – React NativeScriptGitHub – Docs Site
Copyright © 2021 Jamie Birch