We faced the necessity of creating Apple Watch app, sounds like nothing special — open Xcode, create new target for watch, connect Apple Watch and mobile app and you are ready to pass data between them. But our original app was written in react native and it caused some problems.

Let’s Code

Despite the project is written in react native project structure in Xcode looks the same. Firstly, we need to create new target for watch.

Now let’s go to Interface.storyboard and add a label, start to build and see what happens. The project has been built and we can see the added label.

We created an application for Apple watch, now let’s see how to pass data between iPhone and Watch. In the original version it can be done very easily, but this option doesn’t fit, so we will use a library (https://github.com/mtford90/react-native-watch-connectivity) that will help us to do it.

Let’s open the console and install this library.

We won’t describe JS logic in detail, but all we need is importing library

import * as watch from 'your directory'

and calling method, which sends data to apple watch.

sendMessage() {    const text = this.state.text    if (text.trim().length) {       watch.sendMessage({text}, (err, resp) => {          if (!err) {             console.log('responce received', resp)          } else {             console.error('error sending message to watch', err)          }       })    }}

Now go to Xcode and our AppDelegate.h should look like this:

#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 AppDelegate.m should look like this:

#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;

In our controller we should import library “import WatchConnectivity”, and inherit from “WCSessionDelegate”. After implement two methods: “activationDidCompleteWith” and “didReceiveMessage”. “activationDidCompleteWith” can be empty. In “didReceiveMessage” method we receive text from ReactNative app.

func session(_ session: WCSession, didReceiveMessage message: [String : Any], replyHandler: @escaping ([String : Any]) -> Void) {    print("watch received message", message);    let text = message["text"] as! String    self.firstLabel.setText(text)}

If you are left with something incomprehensible, we have prepared a video for you with more detailed explanations.

Thanks!