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.
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!
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;
Use Apple's watch API as normal. See the demo app for examples of this - the WatchOS code in swift can be seen here
ES6
import * as watch from 'react-native-watch-connectivity'
ES5
var watch = require('react-native-watch-connectivity')
// Monitor reachability
const unsubscribe = watch.subscribeToWatchReachability((err, watchIsReachable) => {
if (!err) {
this.setState({watchIsReachable})
}
})
// Get current reachability
watch.getWatchReachability((err, watchIsReachable) => {
// ...
})
// 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
}
})
const unsubscribe = watch.subscribeToUserInfo((err, info) => {
// ...
})
watch.sendUserInfo({name: 'Mike', id: 5})
watch.getUserInfo().then(info => {
// ...
}).catch(err => {
// ...
})
const unsubscribe = watch.subscribeToApplicationContext((err, info) => {
// ...
})
watch.updateApplicationContext({foo: 'bar'})
watch.getApplicationContext().then(context => {
// ...
})
Send messages and receive replies
watch.sendMessage({text: "Hi watch!"}, (err, replyMessage) => {
console.log("Received reply from watch", replyMessage)
})
Recieve messages and send responses
const unsubscribe = watch.subscribeToMessages((err, message, reply) => {
if (!err) reply({text: "message received!"})
})
const uri = 'file://...' // e.g. a photo/video obtained using react-native-image-picker
watch.transferFile(uri).then(() => {
// ...
}).catch(err => {
// ... handle error
})
TODO: Not implemented or documented
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
npm run build # babel compilation
git add Libraries/RNWatch/RNWatch.ios.build.js
git commit -m "New Feature"
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.