React Native
If you haven’t already, and you’re developing on iOS, visit the Apple Health docs and follow the “Enable HealthKit” section to configure HealthKit.
If you’re using Expo Go, you’ll need to prebuild your app to use this library. You can read more about this here. Note that Apple Health lives on the user’s device, and requires the native bridge to work. So, Apple Health integrations simply won’t work on Expo Go by default, and this is true of any other library/vendor.
Installation
npm install @metriport/react-native-sdk
npm install react-native-webview
You’ll need to ensure that the MetriportSDK
pod is installed as well.
cd ios
pod install
As pod versions are updated, you may need to run pod update MetriportSDK
in the ios
directory
to get the latest version. To verify latest, go to
https://github.com/metriport/metriport-ios-sdk/releases.
If you are using Objective-C
for your AppDelegate
file you will need to set it up as follows:
#import "AppDelegate.h"
#import "MetriportConfiguration.h" // add this line
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[MetriportConfiguration checkBackgroundUpdates]; // add this line
// your code
}
If you are using Swift
for your AppDelegate
file you will need to set it up as follows:
import Foundation
import UIKit
import MetriportSDK // add this line
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
var bridge: RCTBridge!
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
MetriportClient.checkBackgroundUpdates() // add this line
// your code
}
}
If using Expo, your Info.plist
file may be getting overwritten in the prebuild. If this is the
case, you’ll need to add the following to your app.json
file:
{
"expo": {
"ios": {
"infoPlist": {
"NSHealthShareUsageDescription": "<< your usage description here >>",
"NSHealthUpdateUsageDescription": "<< your usage description here >>"
},
"entitlements": {
"com.apple.developer.healthkit": true,
"com.apple.developer.healthkit.background-delivery": true
}
}
}
}
Usage
To use our SDK go to the root of your project and add:
import * as React from "react";
import { StyleSheet } from "react-native";
import { MetriportWidget } from "@metriport/react-native-sdk";
export default function App() {
return (
<MetriportWidget
token="CONNECT_TOKEN"
clientApiKey="CLIENT_API_KEY"
sandbox={false}
style={styles.box}
/>
);
}
const styles = StyleSheet.create({
box: {
width: "100%",
height: "100%",
},
});
Ensure you use your Client Key here, and not your Secret Key. You can read more about the differences between the two in our API Keys guide.
As per the guide, we recommend to store your Client Key in environment secrets, and not commit it in plain text to your repository.
As per the Quickstart guide, you’ll need to generate a token on your server before opening the Connect Widget. You can read more about this here.
Apple Health
For details about receiving Apple Health data via webhooks, see the guide here.