16

How connect Apple Watch to React Native app

 4 years ago
source link: https://medium.flatstack.com/how-connect-apple-watch-to-react-native-app-6dc04d678443
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How connect Apple Watch to React Native app

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK