Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including nativescript-wear-os with all npm packages installed. Try it out:

var nativescriptWearOs = require("nativescript-wear-os")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

nativescript-wear-os v2.1.1

NativeScript plugin that implements Wear OS specific components and layouts.

NativeScript Wear OS

NativeScript-Wear-OS is a NativeScript plugin that provides layouts and utilities specific to WearOS.

npm npm stars forks license


tns plugin add nativescript-wear-os

Ambient Mode Support

  1. Add the WAKE_LOCK permission to your AndroidManifest.xml
    <uses-permission android:name="android.permission.WAKE_LOCK" />
  1. Copy the ambient-activity.ts in the root of this project's demo app and use it to replace the default Android Activity loaded by NativeScript. NativeScript docs HERE about using a custom Android Activity.

  2. Update the AndroidManifest.xml for your application to use the correct activity. Change the android:name value of the activity node to point to the same name used inside the ambient-activity.ts file inside the @JavaProxy() decorator at the top of the file.

        <activity android:name="com.nativescript.AmbientActivity" android:label="@string/title_activity_kimera" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@style/LaunchScreenTheme">
  1. Update your webpack.config to include the custom Android Activity. Snippet below copied from the demo app.
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
  resolve(__dirname, 'app/ambient-activity')


A base layout for Wear OS apps built with NativeScript that automatically handles calculating the inset for circle watch faces. To disable the layout from automatically adjusting the inset set disableInsetConstraint="true" on the WearOsLayout instance. The default is false and does not have to be set.

This has no effect on square watches.

<Page xmlns="" actionBarHidden="true"
    <ui:WearOsLayout disableInsetConstraint="false">
      <ScrollView height="100%">
            <Label text="Going to put a long string of text so we can fill the screen with other view components to show how this works on Circle and Square watch faces." class="c-white" textWrap="true" />
            <GridLayout rows="auto, auto, auto" columns="*, *, *">
                <Button text="Go Back" tap="navBack" class="yellowBtn" row="0" col="0" />
                <Image src="res://icon" stretch="aspectFit" row="0" col="1" />
                <Button text="Wow" class="greenBtn" row="0" col="2" />
                <Button text="Fantastic" row="1" col="0" />
                <Label text="Something something something" class="c-white" row="1" col="1" textWrap="true" />
                <Label text="Something Text" row="1" col="2" />
                <Button text="Yay" row="2" col="0" />
                <Image src="res://icon" stretch="aspectFit" row="2" col="1" />
                <Button text="Okay" row="2" col="2" />
Circle WatchSquare Watch
Cirlce Watch UsageSquare Watch Usage


<Page xmlns=""
    <wear:WearOsListView useScalingScroll="true" height="100%" items="{{ items }}">
        <GridLayout rows="*" columns="auto, *">
          <Image src="{{ image }}" row="0" col="0" />
          <Label text="{{ title }}" row="0" col="1" />

useScalingScroll - If true, the items in the listview will scale during the scroll layout change event.

ListView Gif


<Page xmlns="" loaded="pageLoaded" actionBarHidden="true"
        <StackLayout height="100%" width="100%">
            <Label text="This is a box inset layout. It's purpose is for short views so you don't have to calculate the inset for your layout manually. So don't try using a ScrollView with it." class="text-white" textWrap="true"/>
            <GridLayout rows="50" columns="*, *">
                <Button col="0" text="Go Back" class="greyBtn" tap="navBack" />
                <Button col="1" text="Okay" class="yellowBtn" />

BoxInsetLayout Usage


This plugin uses an Android WearOS specific library SmartWearOs.

The plugin has a success dialog and failure/error dialog to present on WearOS. These mimic the behavior of the built in Confirmation Activity on WearOS. With the option of setting the time before it is dismissed/hidden from the user.


import {
} from 'nativescript-wear-os/packages/dialogs';

showSuccess('Great choice! NativeScript is awesome.', 4).then(() => {
  console.log('success dialog complete.');

Success Activity Failure Activity

Change Log

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free