React Native Watch Connectivity

Communicate with your apple watch apps over the react native bridge.

Note: This library does not allow you to write your iWatch apps in React Native but rather allows your RN iOS app to communicate with a watch app written in Obj-C/Swift.

Demo

The featured screenshot is from the demo app. To get the demo app going:

git clone https://github.com/mtford90/react-native-watch-connectivity.git
cd react-native-watch-connectivity
npm install
open ios/rnwatch.xcodeproj

And then run the app!

Install

npm install react-native-watch-connectivity

First of all you'll need to link the library to your iOS project. You can do this automatically by using:

react-native link

Or else you can do this manually by adding node_modules/react-native-watch-connectivity/RNWatch.xcodeproj to your project and ensuring that libRNWatch.a is present in the Link Binary With Libraries build phase.

Alternatively, if you're using CocoaPods, you can add the following to your Podfile:

pod 'RNWatch', :path => '../node_modules/react-native-watch-connectivity'

and run pod install.

Once you've linked the project, you then need to modify AppDelegate.h:

#import <UIKit/UIKit.h>

@import WatchConnectivity;
@class WatchBridge;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (nonatomic, strong) UIWindow *window;
@property(nonatomic, strong) WatchBridge *watchBridge;
@property(nonatomic, strong) WCSession *session;

@end

and then AppDelegate.m:

#import "AppDelegate.h"

// ...

#import "WatchBridge.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...

  self.watchBridge = [WatchBridge shared];
  self.session = self.watchBridge.session;

  NSLog(@"watch bridge initialised");
  
  return YES;

Usage

WatchOS

Use Apple's watch API as normal. See the demo app for examples of this - the WatchOS code in swift can be seen here

React Native

ES6

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

ES5

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

Reachability

// Monitor reachability
const unsubscribe = watch.subscribeToWatchReachability((err, watchIsReachable) => {
  if (!err) {
    this.setState({watchIsReachable})
  }
})

// Get current reachability
watch.getWatchReachability((err, watchIsReachable) => {
  // ...
})

Install & Pairing Status

watch.isWatchAppInstalled((err, isAppInstalled) => {
  // ...
})

watch.getIsPaired((err, isPaired) => {
  // ...
})

Watch State

// Monitor watch state
const unsubscribe = watch.subscribeToWatchState((err, watchState) => {
  if (!err) {
    console.log('watchState', watchState) // NotActivated, Inactive, Activated
  }
})

// Get current watch state
watch.getWatchState((err, watchState) => {
    if (!err) {
      console.log('watchState', watchState) // NotActivated, Inactive, Activated
    }
})

User Info

const unsubscribe = watch.subscribeToUserInfo((err, info) => {
    // ...
})

watch.sendUserInfo({name: 'Mike', id: 5})

watch.getUserInfo().then(info => {
    // ...
}).catch(err => {
    // ...
})

Application Context

const unsubscribe = watch.subscribeToApplicationContext((err, info) => {
    // ...
})

watch.updateApplicationContext({foo: 'bar'})

watch.getApplicationContext().then(context => {
  // ...
})

Messages

Send Message

Send messages and receive replies

watch.sendMessage({text: "Hi watch!"}, (err, replyMessage) => {
    console.log("Received reply from watch", replyMessage)
})

Receive Message

Recieve messages and send responses

const unsubscribe = watch.subscribeToMessages((err, message, reply) => {
    if (!err) reply({text: "message received!"})
})

Files

Send Files

const uri = 'file://...' // e.g. a photo/video obtained using react-native-image-picker

watch.transferFile(uri).then(() => {
  // ...
}).catch(err => {
  // ... handle error
})

Receive Files

TODO: Not implemented or documented

Development

Development is performed using the demo app. Set up as follows:

git clone https://github.com/mtford90/react-native-watch-connectivity.git
cd react-native-watch-connectivity
npm install
open ios/rnwatch.xcworkspace

Release

npm run build # babel compilation
cd Libraries/RNWatch
git add RNWatch.ios.build.js
git commit -m "New Feature"
npm version
git push origin master --tags
npm publish

Troubleshooting

Note that communication between the iOS simulator and iWatch simulator can be ridiculously slow - it's much faster when using actual devices. I've seen response times of up to 2 minutes when using the simulator & have no idea why.

If the issue is not related to the above, compare your app and the example app, ensuring everything is configured the same - otherwise raise an issue and i'll be happy to help.