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.

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) => {
  // ...
})

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
git add Libraries/RNWatch/RNWatch.ios.build.js
git commit -m "New Feature"

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.

dimooze / react-native-watch-connectivity