Skip to content
Consolidated repo for WearOS with NativeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
publish
screenshots
src
.gitignore
.prettierrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
tslint.json

README.md

NativeScript WearOS

npm npm Build Status

Installation

tns plugin add nativescript-wear-os

WearOsLayout

A base layout for Wear OS apps built with NativeScript that automatically handles calculating the inset for circle watch faces. The layout base is an Android ScrollView so when your layout exceeds the screen height, it will scroll by default, removing the need to handle in your layout.

This has no effect on square watches.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true"
    xmlns:ui="nativescript-wear-os/packages/wear-os-layout">
    <ui:WearOsLayout>
        <StackLayout>
            <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" />
            </GridLayout>
        </StackLayout>
    </ui:WearOsLayout>
</Page>
Circle Watch Square Watch
Cirlce Watch Usage Square Watch Usage

WearOsListView

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:wear="nativescript-wear-os/packages/listview">
  <StackLayout>
    <wear:WearOsListView useScalingScroll="true" height="100%" items="{{ items }}">
      <wear:WearOsListView.itemTemplate>
        <GridLayout rows="*" columns="auto, *">
          <Image src="{{ image }}" row="0" col="0" />
          <Label text="{{ title }}" row="0" col="1" />
        </GridLayout>
      </wear:WearOsListView.itemTemplate>
    </wear:WearOsListView>
  </StackLayout>
</Page>
API

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

ListView Gif


BoxInsetLayout

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true"
    xmlns:ui="nativescript-wear-os/packages/box-inset-layout">
    <ui:BoxInsetLayout>
        <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" />
            </GridLayout>
        </StackLayout>
    </ui:BoxInsetLayout>
</Page>

BoxInsetLayout Usage

Confirmation Activity

Showing confirmations on WearOS

WearOS provides the ConfirmationActivity class to show success, failure, and open on phone confirmations to the user.

Confirmation Activity Success

Usage

  1. Modify your project's AndroidManifest.xml to include the ConfirmationActivity (see demo app for example):
<activity
    android:name="android.support.wearable.activity.ConfirmationActivity">
</activity>
import {
  showConfirmationActivity,
  ConfirmationActivityType
} from 'nativescript-wear-os/utils';

function someFunctionInYourApp() {
  // do something and show the built in confirmation activity
  showConfirmationActivity(
    'No SmartDrives found nearby.',
    ConfirmationActivityType.FAILURE
  ).then(() => {
    console.log('confirmation shown');
  });
}

Change Log

You can’t perform that action at this time.