npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

nativescript-wear-os

0.6.1 • Public • Published

NativeScript WearOS

npm npm Build Status

Installation

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 and use it to replace the default Android Activity loaded by NativeScript. NativeScript docs HERE.

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

Dialogs

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.

Usage

import {
  showFailure,
  showSuccess
} from 'nativescript-wear-os/packages/dialogs';
 
showSuccess('Great choice! NativeScript is awesome.', 4);

Success Activity Failure Activity

Change Log

install

npm i nativescript-wear-os

Downloadsweekly downloads

5

version

0.6.1

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability