React Native App with HealthKit & Swift
Part I of a series on HealthKit and React-Native applications.
Link for Part 2: https://medium.com/@alfonsosn/react-native-writing-data-to-healthkit-using-swift-d74c0aba8bc6
Adding fitness as a habit becomes easier when working for Equinox Media. Not only does a workout benefit your health, but also your ability to effectively contribute at work as a knowledgable product user!
As a result, I’ve become intrigued by the world of Apple HealthKit, which extends beyond just the iPhone Health App. HealthKit is a complete framework for developers to read, write, and access a user’s health records. I was curious to see what data about my workouts using Equinox Plus I could capture using the HealthKit framework.
At first I looked for open source libraries that integrated React-Native and HealthKit. While there are a few libraries, open source libraries didn’t offer the custom functionality we were looking for. As the prospect of having to write my own native integration became clear, I spent some time on tools that React-Native offers for these integrations.
As a React-Native developer, you dread the moment that you find yourself at its limits. But, if my own experience is any guide, writing your own custom implementation is fairly straightforward. In fact, in only a few hours I was able to set up a package that interplayed with HealthKit with no prior Swift knowledge.
So given the popularity of both of these frameworks, I want to share an example of a react-native app to set you up and running with your own HealthKit integration written in Swift.
SET UP
Optional: Download Sample Project
To follow along, you can use this github repo.
Assuming you have yarn and react-native installed, you can run the project with these install instructions:
yarn && cd ios && pod install --repo-update && yarn run iosThis will lead you with a sample react-native application that you can use to begin running your sample app.
I) Configure HealthKit in your Xcode Project
One of the first things you need to do is integrate HealthKit by adding HealthKit as a capability in your Xcode project. You can learn more in Apple’s Setting up HealthKit Guide.
- Open your ios/HealthkitSwiftReactNativeExample.xcworkspace project in Xcode.
- Select RNHealthKit → Signing & Capabilities → Targets → + Capability. This will add HealthKit as Capability to your app.
3. Add the following to your info.plist file in ios/
<key>NSHealthShareUsageDescription</key><string>{{Your message for the usage of healthkit in your app}}</string><key>NSHealthUpdateUsageDescription</key><string>{{Your message for the usage of healthkit in your app}}
</string>
You have now granted your Xcode project to both import and use the HealthKit framework and permit HealthKit to run in your app.
II) Configure Objective-C and Swift Headers for your Swift Project
For reference, you can look at the change this section here.
Since the objective of this tutorial is to not only set up HealthKit, but to do so by writing our code in Swift, we need to allow for Objective-C to work with our Swift code. In order to do this, we need to set up a header file.
Andrei Pfeiffer wrote this great tutorial for using Swift in React Native, feel free to reference this article throughout these steps. These are the steps you can follow:
- File → New → File → Swift File
- In our project, we can name this file Controller, since it will be our communication layer with HealthKit.
- Xcode will prompt you to configure an Objective-C Bridging Header. Select “Create Bridging Header”. This will allow communication between our Swift and Objective-C files.
To that file, in this case rnhealthkit-Bridging-Header.h add the following:
Now open Controller.swift and paste the following code:
Then, after you’ve set up your swift files and bridge header file, you need to expose your swift class to Javascript via objective-c headers.
4. After that you can do: File → New → File → Objective-C File. You can name your project Controller.m and add the following:
5. Finally in your project, you can use React-Native’s native-modules to hook up your objective-c with javascript. In our case, we can create Header.js:
III) Expose HealthKit to JS
i. Finally, we are going to expose HealthKit functions to the React-Native layer via Swift. To do so, you need to create the methods you’re going to export in your Swift file. can add the following code to your Controller.swift.
ii. But for react-native to import the method we need to export it in Objective-C Controller.m header file
iii. Bridge native functions by importing them as native-module. We use HealthKitHeader.js.
iv. Finally use the function in our sample app, as we are doing in App.js:
Assuming you’ve run all the previous steps, you should now have an application that request authorization for workout in React-Native.
If you want to test, you can run the following command from this github repo.
cd ios && pod install --repo-update && yarn run ios
You have now created your first app React-Native using Swift and Apple HealthKit!
In Conclusion
My experience as a React-Native developer has shown me that the framework continues to show its promise and reliability. Not only is there a growing community of developers contributing to its ecosystem, but also our smooth integration with HealthKit demonstrates that React-Native can extend with native ecosystems.
As developers with the privilege to a user’s health records, we have the obligation to handle this data with the utmost sensitivity, but also deliver powerful user experiences with the data that matters most.
In this blog post, I show that even though react-native does not have access to every possible native library, it’s very simple to create a custom native-module to port native functionality to an application.
