Skip to main content

React Native

Installation​

npm​

npm install --save @heka-health/heka-react-native react-native-app-auth react-native-device-info

yarn​

yarn add @heka-health/heka-react-native react-native-app-auth react-native-device-info

Setup​

Google Fit​

Note: Google Fit is only supported on Android devices. If you have a use case for iOS, reach out to us and we will happily add the support.

Redirect URI needs to be set up so that the application is opened successfully post Google Auth. Make the following couple of changes to android/app/src/main/AndroidManifest.xml file. In the application tag, add the following:

android/app/src/main/AndroidManifest.xml
...
    <application
        ...
        ...
        # Add the line below
        xmlns:tools="http://schemas.android.com/tools"
    >
    ....
    </application>
...

Now add the following activity inside the application and replace <YOUR_GOOGLE_CLIENT_ID> with your google client id. Make sure this activity is not nested inside another activity. To get a client id, refer to our documentation on Google Fit setup.

android/app/src/main/AndroidManifest.xml
<activity
    android:name="net.openid.appauth.RedirectUriReceiverActivity"
    android:exported="true"
    tools:node="replace">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="com.googleusercontent.apps.<YOUR_GOOGLE_CLIENT_ID>"
        />
    </intent-filter>
</activity>

There are other simpler ways to set up app redirect URLs, however, this method is recommended to support multiple redirect URLs for various platforms like Fitbit, Strava etc.

Apple Healthkit​

Note: This is only supported on iOS (excluding iPads).

  1. Append the Info.plist with the following 2 entries:
Info.plist
<key>NSHealthShareUsageDescription</key>
<string>We will sync your data with the Apple Health app to give you better insights</string>
<key>NSHealthUpdateUsageDescription</key>
<string>We will sync your data with the Apple Health app to give you better insights</string>

  1. Enabling HealthKit requires the following two steps in Xcode:

    • Go to the Signing & Capabilities tab of the Runner target's settings and add the HealthKit capability.
    • Enable the background delivery option for HealthKit.

  2. To make sure that health data is being synced even while on background, initialize the sync observers in application:didFinishLaunchingWithOptions method of AppDelegate.swift:

AppDelegate.swift
import HekaCore     // Make sure you import HekaCore
// ...

func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // ....
    HekaManager().installObservers()
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

Usage​

import { HekaComponent } from "@heka-health/heka-react-native";

const appKey = "YOUR_API_KEY";
const userUUID = "YOUR_USER_UUID";

<HekaComponent appKey={appKey} userUUID={userUUID} />;

To better understand api key and user uuid, please refer to the important concepts section.