https://github.com/conorbuck/react-native-watch

React Native bindings for WatchKit
https://github.com/conorbuck/react-native-watch

Last synced: 4 months ago
JSON representation

React Native bindings for WatchKit

• Host: GitHub
• URL: https://github.com/conorbuck/react-native-watch
• Owner: conorbuck
• Created: 2015-12-29T19:25:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2015-12-29T21:02:56.000Z (over 8 years ago)
• Last Synced: 2024-01-15T22:12:03.871Z (5 months ago)
• Language: Objective-C
• Size: 95.7 KB
• Stars: 80
• Watchers: 6
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-apple-watch - @conorbuck/react-native-watch - React Native bindings for WatchKit (Library / Plugin)

README

        
# react-native-watch

react-native-watch includes a demo iOS app with React Native bindings to communicate with iOS WatchKit apps.

[![Demo](http://img.youtube.com/vi/F2xRSyX8i0o/0.jpg)](http://www.youtube.com/watch?v=F2xRSyX8i0o)

** 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 :) **

## Goal

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.

## Getting Started

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:

1. Copy these files into your project where you see fit:

    These files contain the Objective C RCT module declaration for RN:

     `WatchManager.m`

     `WatchManager.h`.

    This is the wrapper for native module:

     `WatchManager.js`

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).

    ```

        import WatchConnectivity

       

        class InterfaceController: WKInterfaceController, WCSessionDelegate {

       

            ...

       

           func session(session: WCSession, didReceiveMessage message: [String : AnyObject], replyHandler: ([String : AnyObject]) -> Void) {

               let message = message as NSDictionary;

               let value = message.valueForKey("value") as! Int;

       

               print("received value" + String(value))

           }

    ```

3. You can import `WatchManager.js` and use these methods to setup the WCSession and start sending/receiving data:

    ```

    let WatchManager = require('./WatchManager.js');

    // initialize the session

    WatchManager.activate();

    // send JSON (this turns into an NSDictionary)

    WatchManager.sendMessage({some:'data'});

    // subscribe to incoming message events

    var listener = WatchManager.addMessageListener(msg => {

      console.log(msg);

    });

    // unsubscribe

    WatchManager.removeMessageListener(listener); // alternatively: listener.remove();

    ```

## Known Issues

- This module doesn't currently provide additional events/messages for WCSession state.