Metriport home pagelight logo
  1. More Info
  2. React Native

Before getting started, visit the Apple Health docs and follow the Initial Setup section to configure HealthKit.”

​
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

​
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.