React-native-watch NPM

React Native Watch

This is a beta release

Requirements:

react-native >= 0.41.2 for iOS

Connect your React Native App with WatchKit.

Android Wear support coming soon..

Getting started

yarn add react-native-watch

Link the library to your project automatically by using:

react-native link react-native-watch

Or manually, by adding node_modules/react-native-watch/RNWatch.xcodeproj to your project and adding libRNWatch.a to Build Phases ➜ Link Binary With Libraries

Once linked to your project, modify AppDelegate.h:

#import <UIKit/UIKit.h>
#import <WatchConnectivity/WatchConnectivity.h>

@class RNWatch;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (nonatomic, strong) UIWindow *window;

@property (nonatomic, strong) RNWatch *watchBridge;
@property (nonatomic, strong) WCSession *session;

@end

And modify AppDelegate.m

#import "AppDelegate.h"
#import "RNWatch.h"

...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  self.watchBridge = [RNWatch shared];
  self.session = self.watchBridge.session;

  return YES;

Usage

Use the examples below to start sending data between React Native and WatchOS (Swift)

ES5

var watch = require('react-native-watch')

ES6

import * as watch from 'react-native-watch'

Messages

Receive messages

Subscribe and unsubscribe to all messages.

// Subscribe
componentDidMount() {
  this.messageSubscription = watch.subscribeToMessages(
    (err, message) => {
      if (err) console.error('Error receiving message', err)
      else {
        ...
      }
    }
  )
}

// Unsubscribe
componentWillUnmount() {
  // messageSubscription -> remove function waiting to be called
  this.messageSubscription()
}

Send Message

Send messages and receive a response

watch.sendMessage(data, (err, res) => {
  if (err) console.error('Error sending message to watch', err)
  else {
    console.log('Watch received the message sent')
    if (res) {
      console.log('Watch replied', res)
    }
  }
})