Skip to content

Commit 39a2728

Browse files
author
Conor Buckley
committed
docs
1 parent 4647f51 commit 39a2728

File tree

2 files changed

+58
-1
lines changed

2 files changed

+58
-1
lines changed

README.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# react-native-watch
2+
react-native-watch includes a demo iOS app with React Native bindings to communicate with iOS WatchKit apps.
3+
4+
![Screen capture](http://www.gfycat.com/LiveImpassionedCleanerwrasse)
5+
6+
** Note: This demo does not use RN views for the UI since WKInterface components are not yet supported. But fear not, using Interface Builder to build out a Watch app UI is not too difficult to learn :) **
7+
8+
## Goal
9+
This repo aims to eventually become an npm module with iOS and Android libraries to provide a simple and cross platform API for watch messaging.
10+
11+
## Getting Started
12+
13+
The demo project should just required a build and run in XCode. However, if you would like to integrate the bindings in your application, you can follow these steps:
14+
15+
1. Copy these files into your project where you see fit:
16+
These files contain the Objective C RCT module declaration for RN:
17+
WatchManager.m
18+
WatchManager.h
19+
This is the wrapper for native module:
20+
WatchManager.js
21+
2. Create a watch app (plenty of tutorials out there) or use an existing. In your Exension’s default InterfaceController.swift, you’ll have to import WatchConnectivity and implement the WCSessionDelegate. You can add the didReceiveMessage handler like below. (You can also find an example of sending messages in InterfaceController.swift).
22+
```
23+
import WatchConnectivity
24+
25+
class InterfaceController: WKInterfaceController, WCSessionDelegate {
26+
27+
...
28+
29+
func session(session: WCSession, didReceiveMessage message: [String : AnyObject], replyHandler: ([String : AnyObject]) -> Void) {
30+
let message = message as NSDictionary;
31+
let value = message.valueForKey("value") as! Int;
32+
33+
print("received value" + String(value))
34+
}
35+
```
36+
3. You can import `WatchManager.js` and use these methods to setup the WCSession and start sending/receiving data:
37+
```
38+
let WatchManager = require('./WatchManager.js');
39+
40+
// initialize the session
41+
WatchManager.activate();
42+
43+
// send JSON (this turns into an NSDictionary)
44+
WatchManager.sendMessage({some:'data'});
45+
46+
// subscribe to incoming message events
47+
var listener = WatchManager.addMessageListener(msg => {
48+
console.log(msg);
49+
});
50+
51+
// unsubscribe
52+
WatchManager.removeMessageListener(listener); // alternatively: listener.remove();
53+
```
54+
55+
## Known Issues
56+
- This module doesn't currently provide additional events/messages for WCSession state.
57+

index.ios.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var {
1212
View,
1313
} = React;
1414

15-
var WatchManager = require('./WatchManager.js');
15+
let WatchManager = require('./WatchManager.js');
1616

1717
class WatchDemo extends React.Component {
1818

0 commit comments

Comments
 (0)