Are you an Apple Watch app developer? Are you wondering how to integrate it with React Native? If yes, this blog is for you.
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.
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:
Here’s how we did:
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:
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.
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:
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.
****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:
For deploying Watch OS in AppStore( TestFlight ), follow these steps:
a) For mobile application
b) For watchkit
c) and for watchkit extension
2. So, we will have 3 targets
You can check this in the XCode target list
Once done, start the process of uploading watch application along with mobile application
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
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:
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.
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.
Learn how to implement structural design patterns for reusability and maintainability in modern development. In this blog, we code examples of Facade and Decorator patterns to optimize your software design.
Learn about securing desktop applications through penetration and security testing. Explore our five-step process for identifying and mitigating potential threats, and adopt recommended best practices to enhance your application's security.
This blog outlines the process of creating a custom database migration system using Node.js, & any database ORM. Furthermore, it explains creating migration files, writing migration code, and applying Electron-specific changes in order for the migration system to operate effectively in a production environment.