Guide 101: Apple Watch App Development And Integration With React Native

Recently, we were developing a mobile application for one of our client’s from middle-east operating in the automotive domain. The core purpose of the app was to help the customers in personalizing the services and keep them up-to-date.

Once we were done developing this mobile application in React Native (RN), the next step was to create its wearable application (for iOS/Android both). This would let end users use the services hassle-free and receive instant notifications pertaining to the app.

To make this communication between mobile applications (iOS) and Apple watch, we needed to create a bridge for syncing auth token and other user specific details. But there was a challenge in this process. You see, there is no RN library that can support such a sort of  communication with the Apple Watch.

So, we had to create the bridge to sync the data and store them locally to watch. And for this, we tried using package and steps mentioned in this article from GitHub:

GitHub - mtford90/react-native-watch-connectivity

However, it had a drawback. This package was specifically used to enable communication between Apple Watch apps and RN. As we were looking for the solution for both the platforms (android and iOS), we could not use this.

We wanted to ensure that if we are using any third-party component, it should keep our codebase as same as possible. Another problem was the support for the latest RN version, the latest commit for this library was in Jan 2022. Not to mention, in the last 6 months only two RN versions were launched, viz: 0.68 and 0.69

So, how did we overcome those hurdles? Well, that’s what I’m going to tell you in this post. Read this blog till the end to know about Apple Watch app development and how to integrate it with RN.

How did we start?

First, we needed to create the RN bridge for sending the data from JS to native iOS and vice-a-verse. And for that, we followed RN’s official blog:

iOS Native Modules

Here’s how we did:

1. Created RCTFileName.h and RCTFileName.m file
2. Created method in RCTFileName.m(Object-C file) which will be called from javascript. Once the bridge is created we will be able to call the native iOS function(s) (the function we created in the .m file) from JS code.

Once we got the data natively on the iOS side, we had to store it locally. That’s because whenever Apple Watch asks for the data (token and user details in our case), we can directly send it from the native code.

This helped us in ensuring that we don't need to communicate with JS threads again and again. To do it we have to:

1. Save the data in the iPhone database locally
2. Send the data to Apple Watch

While working on this we came across a few issues. For example, while creating the function for the bridge in the Objective-C file and for storing data (using the user default package in iOS), we required a swift file. So, the task was to identify “How to call a swift function from Objective-c”

Here’s a guide that we referred for find the solution:

Call Swift function from Objective-C class - Stack Overflow

Here’s how we did it:

Create a swift file in the same project directory. The first step is to create a .swift file (We created ‘WearableData’) and add the following content to the file.

In the above code, extending NSObject is a MUST. That’s because once you extend NSObject , you’ll be able to call all the class members from Objective-C.

Please Note: Method name should have the ‘@obj ’ keyword.  In case you missed that, it will give you ‘error: method not found’ while calling a swift function in the Objective-C file.

How will the Apple Watch app communicate with mobile applications?

Before I tell you about the Apple Watch app development, let’s understand how it is going to communicate with mobile applications.

For this we have to use the WCSession Object for communication between Apple Watch and iPhone.  WCSessionDelegate protocol needs to be extended in class for pre-defined methods and activating the communication channel. WCSessionDelegate protocol has some predefined method which needs to be overridden in class. Here are some of the required methods:

Now, to send/ receive message from/ to iPhone to iWatch, follow below steps:

1. Setup/ Activate the communication channel

2.After successful activation, activationDidCompleteWith() method gets called by activate().

3.Any message received from iPhone/ iWatch will be delivered in didReceiveMessage() method.

4.We can send messages by WCSession.delegate.sendMessage(jsonFormatMessage)  method.

Please note: iWatch and iPhone Communication can be initiated from either of the sides. However in Android, there is a big difference in communication protocol.

How to create the bridging header file in IOS and add it in the Objective-C file?

****When we create .m (Objective-c) file for bridging, xCode gives the popup for creating Bridge_File, make sure the file is created.

Assume that we have a project named "MyFirstProjectOnSwift", with swift class name as "mySwiftClass" and objectives class as "MyObjectiveClass". Now, add the following in Objective-c file:

Here’s an example for your reference:

While doing this, you might face certain challenges. For example:

1. Function did not match an error in the objective-c file
2. No visible @interface for 'FileName' declares the selector 'FunctionName’  an error in objective-c file

Solution

1. Make sure you have added ‘@obj’ before the function starts in the .swift file
2. Click on #import "MyFirstProjectOnSwift-Swift.h” and verify if the function is available.
3. Bridging-File not foundSometimes there may be a difference between the name in Build Setting and Bridge file which we create, so please verify. It should be the same or go in the Build Setting and give the path for Bridge-file

XCode

• Build settings
• Swift-compile

‍

How to deploy Watch OS in AppStore?

For deploying Watch OS in AppStore( TestFlight ), follow these steps:

1. Apple developer account with 3 Bundle Id’

            a) For mobile application

             b) For watchkit

             c) and for watchkit extension

        2. So, we will have 3 targets

              a) ProjectName

              b) ProjectName.watchkit

              c) ProjectName.watchkit.watchkitextension

You can check this in the XCode target list

Once done, start the process of uploading watch application along with mobile application

1. Open your project in XCode and select App from file selector go under general settings and sign the app using the development team/production Team.
2. Make sure your Bundle Id follows the below pattern

Please note: Your App Bundle Id could by anything. Here, we are following the standard pattern. However, just ensure that the watchKit pattern should be the same.

Application bundle id: com.companyname.projectnameWatchkit bundle id: com.companyname.projectname.watchkitWatchKitExtension bundle id: com.companyname.projectname.watchkit.watchkitextension

1. Select .watchKitextension from Targets
2. Select AnywatchOS Device
3. Select Product→ Archive

Once the file is archived successfully, you will see a pop-up. In that, click on Distribute → Next → Upload. Once done, click on the test-flight and it will redirect you to the application.

Further, if you want to update the watch’s OS separately:

• Select .watchKit in the target instead of watchkitextension
• Follow same steps above afterward (from step #4)

Now, you would be able to install Mobile application and Apple Watch application through TestFlight. Once it is available, turn on “Show App on Apple Watch” to view it on wearable. If this is not enabled it means your Apple Watch support isn’t provided, it could mean that either the SDK you’re using in your wearable is not supporting the older versions of Apple Watches or the deployment target is incorrectly set.

‍

Conclusion

I hope, after reading this blog, you know how to go with Apple Watch app development and integrating it with RN. Do give these steps a try and le me know the results in the comments. Till then, happy coding.

‍