NativeScript: Native Rendering, Layouts & Data Binding

NativeScript builds native iOS/Android apps from JavaScript/TypeScript (with optional Angular or Vue integration). Unlike Cordova-style hybrid frameworks, it renders actual native UI widgets -- no WebView involved -- via a runtime bridge that reflects the entire native SDK surface into JS.

The JS-to-Native Bridge

// The runtime reflects the ENTIRE native API surface into JS/TS --
// most native classes/methods are callable directly, no wrapper needed

// iOS -- directly instantiate a real UIView subclass
const label = new UILabel();
label.text = 'Hello from native iOS';
label.textColor = UIColor.blueColor;

// Android -- directly instantiate a real native widget
const button = new android.widget.Button(context);
button.setText('Tap me');

// This differs fundamentally from Cordova-style hybrid apps, which
// render HTML/CSS inside an embedded WebView -- NativeScript's UI
// IS the platform's real native rendering pipeline.

XML Layouts & Core Data Binding

<!-- main-page.xml -- declares the UI tree, one file targets both platforms -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout>
    <Label text="{{ message }}" class="title" />

    <GridLayout rows="auto, auto" columns="*, *">
      <Label row="0" col="0" text="Name:" />
      <TextField row="0" col="1" text="{{ name }}" />
      <Button row="1" col="0" colSpan="2" text="Save" tap="{{ onSave }}" />
    </GridLayout>
  </StackLayout>
</Page>

// main-page.ts -- Observable notifies bound UI of property changes
import { Observable, EventData } from '@nativescript/core';

class MainViewModel extends Observable {
  private _message = 'Hello, world!';
  private _name = '';

  get message() { return this._message; }
  get name() { return this._name; }
  set name(value: string) {
    this._name = value;
    this.notifyPropertyChange('name', value); // triggers UI update
  }

  onSave(args: EventData) {
    console.log('Saved:', this._name);
  }
}

export function onNavigatingTo(args: EventData) {
  const page = args.object as Page;
  page.bindingContext = new MainViewModel();
}

CSS-Like Styling

/* app.css -- a familiar CSS subset mapped onto native view
   properties at runtime -- no actual browser/DOM involved */
.title {
  font-size: 24;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

Button {
  background-color: #3498db;
  color: white;
  border-radius: 8;
}