HealthKit & Google Fit mit React Native vereinen

Erfahren Sie, wie Sie Apple HealthKit und Google Fit sicher in einer React-Native-Expo-App vereinen: Rechte, Hooks, Datenmodell.

WellAlly-Redaktionsteam

Autorenprofil ansehen

12. Dezember 202511 Min. Lesezeit

Auf dieser Seite

Im rasch wachsenden Bereich der digitalen Gesundheit ist es für Nutzerinnen und Nutzer keine Zusatzfunktion mehr, sondern eine Erwartung, eine ganzheitliche Sicht auf ihre Fitness- und Wellnessdaten zu erhalten. Für React-Native-Entwicklerinnen und -Entwickler stellt das eine besondere Herausforderung dar: Wie greift man sicher auf Daten aus zwei unterschiedlichen, plattformspezifischen Ökosystemen zu und führt sie zusammen – Apples HealthKit unter iOS und Googles Health Connect (die Nachfolge von Google Fit) unter Android?

Dieses Tutorial führt Sie durch den Aufbau einer plattformübergreifenden Gesundheits- und Fitnessanwendung mit React Native und Expo. Wir nutzen die Möglichkeiten nativer Module, um zentrale Gesundheitskennzahlen auszulesen, und zeigen, wie Sie die Besonderheiten jeder Plattform berücksichtigen und gleichzeitig eine saubere, einheitliche Codebasis beibehalten. Am Ende verfügen Sie über eine funktionierende App, die Schrittzahlen, Herzfrequenz und Schlafdaten abrufen kann, sowie über ein robustes Gerüst, um weitere Kennzahlen hinzuzufügen.

Das ist für Entwicklerinnen und Entwickler relevant, weil die Beherrschung dieser Integration den Weg zu überzeugenden Health-Tech-Anwendungen öffnet – von Trainings-Trackern bis hin zu umfassenden Wellness-Plattformen – alles aus einem einzigen, überschaubaren React-Native-Projekt.

Voraussetzungen:

Node.js (LTS-Version) und npm/yarn sind installiert.
Die Expo CLI ist global installiert.
Ein physisches iOS-Gerät zum Testen von Apple HealthKit und ein physisches Android-Gerät oder ein Emulator für Google Fit/Health Connect.
Grundlegendes Verständnis von React Native, TypeScript und React Hooks.

Das Problem verstehen: die zwei Ökosysteme

Die Integration von Gesundheitsdaten in einer React-Native-App bedeutet, mit zwei grundlegend unterschiedlichen nativen APIs umzugehen:

Apple HealthKit (iOS): Ein ausgereiftes und tief integriertes Framework unter iOS. Es dient als zentrales, verschlüsseltes Repository für alle Gesundheits- und Fitnessdaten. Der Zugriff wird je Datentyp gewährt, und der Schutz der Privatsphäre der Nutzerinnen und Nutzer hat höchste Priorität.
Health Connect (Android): Googles neuere, einheitliche Plattform, über die Nutzerinnen und Nutzer Daten zwischen ihren bevorzugten Gesundheits- und Fitness-Apps teilen können. Sie zentralisiert Daten, die zuvor häufig in einzelnen Apps isoliert waren oder über die ältere Google-Fit-API zugänglich waren.

Die zentrale Herausforderung besteht darin, dass diese beiden Plattformen unterschiedliche Datenstrukturen bereitstellen, unterschiedliche Bezeichner für Datentypen verwenden und eigene Einrichtungs- und Berechtigungsabläufe haben. Unser Ziel ist eine Abstraktionsschicht, die diese Komplexität verbirgt, sodass unsere React-Komponenten Gesundheitsdaten anfordern können, ohne wissen zu müssen, auf welchem Betriebssystem sie ausgeführt werden.

Voraussetzungen: Ihr Expo-Projekt einrichten

Da wir nativen Code sowohl für HealthKit als auch für Health Connect benötigen, können wir die Standard-App Expo Go nicht verwenden. Wir müssen einen benutzerdefinierten Development Client erstellen. Dieser Client ist eine Version Ihrer App, die die erforderlichen nativen Module enthält.

Schritt 1: Projekt initialisieren

Beginnen wir mit einem neuen Expo-Projekt auf Basis der TypeScript-Vorlage:

bash

npx create-expo-app MyHealthApp --template blank-typescript
cd MyHealthApp

Schritt 2: Abhängigkeiten installieren

Wir benötigen mehrere Pakete:

expo-dev-client: zum Erstellen und Verwenden unseres benutzerdefinierten Clients.
react-native-health: die Brücke zu Apple HealthKit.
react-native-health-connect: die Brücke zu Androids Health Connect.
expo-build-properties: um die Mindest-SDK-Version für Android festzulegen.

Installieren Sie alle mit einem Befehl:

bash

npx expo install expo-dev-client react-native-health react-native-health-connect expo-build-properties

Schritt 3: Projekt konfigurieren

Wir müssen mehrere Änderungen an unserer Datei app.json vornehmen. Hier konfigurieren wir Berechtigungen und Plugins für unsere nativen Projekte.

Öffnen Sie Ihre app.json und passen Sie sie wie folgt an:

json

{
  "expo": {
    "name": "MyHealthApp",
    "slug": "MyHealthApp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myhealthapp",
      "infoPlist": {
        "NSHealthShareUsageDescription": "We need access to your health data to show you your activity.",
        "NSHealthUpdateUsageDescription": "We need to write your workout data to Apple Health."
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myhealthapp",
      "permissions": [
        "android.permission.health.READ_STEPS",
        "android.permission.health.READ_HEART_RATE",
        "android.permission.health.READ_SLEEP"
      ]
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "react-native-health",
      "expo-health-connect",
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 34,
            "targetSdkVersion": 34,
            "minSdkVersion": 26
          }
        }
      ]
    ]
  }
}

Wichtige Änderungen:

iOS infoPlist: Wir haben Beschreibungen hinzugefügt, warum wir Zugriff auf HealthKit benötigen. Das ist verpflichtend und wird den Nutzerinnen und Nutzern im Berechtigungsdialog angezeigt.
Android permissions: Wir haben die Health-Connect-Berechtigungen angegeben, die unsere App anfordern wird.
plugins: Wir haben die Plugins für jede Bibliothek hinzugefügt. Das Plugin expo-health-connect übernimmt automatisch die erforderlichen Änderungen am nativen Android-Projekt. Das Plugin expo-build-properties stellt sicher, dass unsere Android-App eine ausreichend aktuelle SDK-Version für Health Connect anvisiert.

Schritt 4: Prebuild ausführen und den Dev Client starten

Erzeugen Sie nun die nativen Verzeichnisse ios und android:

bash

npx expo prebuild

Erstellen und starten Sie abschließend Ihren benutzerdefinierten Client auf Ihren Geräten:

Für iOS (auf einem physischen Gerät):

bash

npx expo run:ios

Für Android (auf einem physischen Gerät oder Emulator):

bash

npx expo run:android

Dieser Vorgang kann beim ersten Mal eine Weile dauern. Sobald er läuft, steht Ihnen eine Entwicklungsumgebung zum Testen unserer nativen Gesundheitsintegrationen bereit.

Die Kernlogik: ein einheitlicher Hook useHealthData

Um die Plattformunterschiede zu verwalten, erstellen wir einen benutzerdefinierten Hook, useHealthData. Dieser Hook stellt unseren Komponenten eine einfache API bereit, etwa requestPermissions() und fetchTodayStats(), und übernimmt intern die gesamte plattformspezifische Logik.

Erstellen Sie ein neues Verzeichnis src/hooks und darin eine Datei namens useHealthData.ts.

Schritt 1: Eine gemeinsame Datenstruktur definieren

Definieren wir zunächst einen einheitlichen Typ HealthData. So arbeitet unsere Anwendung unabhängig von der Quelle mit einer konsistenten Datenform.

typescript

// src/hooks/useHealthData.ts

export interface HealthData {
  steps: number;
  heartRate: number;
  sleepHours: number;
}

Schritt 2: Hook und plattformspezifische Module einrichten

Erstellen wir nun die Grundstruktur unseres Hooks und importieren die erforderlichen Bibliotheken.

typescript

// src/hooks/useHealthData.ts
import { useState, useEffect } from 'react';
import { Platform } from 'react-native';
import AppleHealthKit, { HealthKitPermissions } from 'react-native-health';
import { initialize, requestPermission, readRecords } from 'react-native-health-connect';

export interface HealthData {
  steps: number;
  heartRate: number;
  sleepHours: number;
}

// Define permissions for Apple HealthKit
const healthKitPermissions: HealthKitPermissions = {
  permissions: {
    read: [
      AppleHealthKit.Constants.Permissions.Steps,
      AppleHealthKit.Constants.Permissions.HeartRate,
      AppleHealthKit.Constants.Permissions.SleepAnalysis,
    ],
    write: [],
  },
};

// Define permissions for Google Health Connect
const healthConnectPermissions = [
  { accessType: 'read', recordType: 'Steps' },
  { accessType: 'read', recordType: 'HeartRate' },
  { accessType: 'read', recordType: 'SleepSession' },
];

export const useHealthData = () => {
  const [healthData, setHealthData] = useState<HealthData | null>(null);
  const [isInitialized, setIsInitialized] = useState(false);

  // ... functions will go here
};

Schritt 3: Berechtigungen implementieren

Implementieren wir die Funktion requestPermissions. Das ist der erste Aufruf, mit dem wir die Einwilligung der Nutzerinnen und Nutzer einholen.

typescript

// Inside useHealthData hook

const requestPermissions = async (): Promise<boolean> => {
  if (Platform.OS === 'ios') {
    return new Promise((resolve) => {
      AppleHealthKit.initHealthKit(healthKitPermissions, (error, results) => {
        if (error) {
          console.error("Error initializing HealthKit:", error);
          return resolve(false);
        }
        setIsInitialized(true);
        resolve(true);
      });
    });
  } else if (Platform.OS === 'android') {
    try {
      const isInitialized = await initialize();
      if (!isInitialized) {
        console.error('Failed to initialize Health Connect');
        return false;
      }
      const grantedPermissions = await requestPermission(healthConnectPermissions);
      console.log('Granted Permissions:', grantedPermissions);
      setIsInitialized(true);
      return true;
    } catch (error) {
      console.error("Error initializing Health Connect:", error);
      return false;
    }
  }
  return false;
};

So funktioniert es:

iOS: Wir rufen AppleHealthKit.initHealthKit auf. Diese Funktion initialisiert sowohl die Verbindung als auch das standardmäßige iOS-Berechtigungsmodal für die Nutzerinnen und Nutzer. Diese können jede Berechtigung einzeln gewähren oder ablehnen.
Android: Der Ablauf erfolgt in zwei Schritten. Zuerst prüft initialize(), ob Health Connect verfügbar und bereit ist. Anschließend öffnet requestPermission() den Berechtigungsbildschirm der Health-Connect-App.

Schritt 4: Daten abrufen und normalisieren

Hier vereinheitlichen wir die Daten. Wir erstellen eine Funktion fetchTodayStats, die die passende native Methode aufruft und das Ergebnis in unsere Schnittstelle HealthData überführt.

typescript

// Inside useHealthData hook

const fetchTodayStats = async () => {
  if (!isInitialized) {
    console.warn("Health data not initialized. Please request permissions first.");
    return;
  }

  const today = new Date();
  const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).toISOString();
  const endDate = today.toISOString();

  let steps = 0;
  let heartRate = 0;
  let sleepHours = 0;

  if (Platform.OS === 'ios') {
    // --- iOS Data Fetching ---
    const options = { date: endDate };

    const stepResult = await new Promise<number>((resolve) => {
      AppleHealthKit.getStepCount(options, (err, result) => {
        resolve(result?.value || 0);
      });
    });
    steps = stepResult;
    
    // ... iOS Heart Rate and Sleep fetching to be added

  } else if (Platform.OS === 'android') {
    // --- Android Data Fetching ---
    const stepRecords = await readRecords('Steps', {
      timeRangeFilter: {
        operator: 'between',
        startTime: startDate,
        endTime: endDate,
      },
    });
    steps = stepRecords.reduce((total, record) => total + (record as any).count, 0);

    // ... Android Heart Rate and Sleep fetching to be added
  }

  setHealthData({ steps, heartRate, sleepHours });
};

Dieser Ausschnitt zeigt nur das Abrufen der Schritte, um das Grundprinzip zu veranschaulichen. Die vollständige Implementierung würde das Abrufen der Datensätze HeartRate und SleepAnalysis/SleepSession sowie deren Normalisierung umfassen (zum Beispiel Mittelwert der Herzfrequenz, Summe der Schlafdauer).

Alles zusammenführen: die Benutzeroberfläche

Nun können wir unseren Hook useHealthData in einer React-Komponente verwenden, um die Daten anzuzeigen.

Erstellen Sie eine Datei App.tsx und fügen Sie den folgenden Code hinzu:

typescript

// App.tsx
import React, { useEffect } from 'react';
import { View, Text, Button, StyleSheet, SafeAreaView } from 'react-native';
import { useHealthData, HealthData } from './src/hooks/useHealthData'; // Assuming the hook is completed

export default function App() {
  const { healthData, requestPermissions, fetchTodayStats } = useHealthData();

  useEffect(() => {
    // Automatically request permissions on app start
    requestPermissions().then(success => {
      if (success) {
        fetchTodayStats();
      }
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>My Health Stats</Text>
      <View style={styles.card}>
        <Stat label="Steps" value={healthData?.steps ?? 'N/A'} />
        <Stat label="Heart Rate (bpm)" value={healthData?.heartRate ?? 'N/A'} />
        <Stat label="Sleep (hours)" value={healthData?.sleepHours ?? 'N/A'} />
      </View>
      <Button title="Refresh Data" onPress={fetchTodayStats} />
    </SafeAreaView>
  );
}

const Stat = ({ label, value }: { label: string; value: string | number }) => (
  <View style={styles.stat}>
    <Text style={styles.label}>{label}</Text>
    <Text style={styles.value}>{value}</Text>
  </View>
);

const styles = StyleSheet.create({
  // ... Add styles for container, title, card, etc.
});

Diese Komponente bietet eine einfache Benutzeroberfläche, um Berechtigungen anzufordern und die abgerufenen Daten anzuzeigen, und demonstriert damit die Stärke unserer Abstraktion.

Best Practices für die Sicherheit

Beim Umgang mit sensiblen Gesundheitsdaten sind Sicherheit und der Schutz der Privatsphäre nicht verhandelbar.

Nur das Nötige anfordern: Fragen Sie Lese- und Schreibberechtigungen nur für die konkreten Datentypen an, die die Funktionen Ihrer App erfordern.
Transparent sein: Erklären Sie in Ihrer Benutzeroberfläche und in Ihrer Datenschutzerklärung klar, warum Sie Zugriff auf Gesundheitsdaten benötigen. Die Angabe NSHealthShareUsageDescription in app.json ist Ihre erste Gelegenheit, Vertrauen aufzubauen.
Verantwortungsvoll mit Daten umgehen: Speichern Sie Gesundheitsdaten nicht auf Ihren Servern, sofern dies nicht unbedingt erforderlich und mit Vorschriften wie HIPAA oder DSGVO vereinbar ist. Verarbeiten Sie Daten nach Möglichkeit auf dem Gerät.
Sanfte Degradierung: Ihre App sollte auch dann ordnungsgemäß funktionieren, wenn Nutzerinnen und Nutzer Berechtigungen ablehnen. Lassen Sie sie nicht abstürzen und sperren Sie Funktionen nicht unnötig; erklären Sie stattdessen klar, was nicht verfügbar ist und wie Berechtigungen später in den Systemeinstellungen erteilt werden können.

Fazit

Die Integration von Apple HealthKit und Google Fit in einer React-Native-Expo-App ist ein leistungsstarker Weg, ansprechende Gesundheits- und Wellnessanwendungen zu entwickeln. Mit einem benutzerdefinierten Development Client und einem einheitlichen Daten-Hook können Sie plattformspezifische APIs effektiv verwalten und gleichzeitig die Anwendungslogik sauber und wartbar halten. Dieser Ansatz bietet eine solide Grundlage, die Sie erweitern können, um eine Vielzahl von Gesundheitskennzahlen zu unterstützen – von Ernährung bis zur Trainingserfassung.

Nächste Schritte

Vervollständigen Sie die Funktion fetchTodayStats, damit sie die Normalisierung von Herzfrequenz- und Schlafdaten umfasst.
Implementieren Sie Schreibfunktionen, um Trainings oder andere Gesundheitsdaten zurück in HealthKit und Health Connect zu speichern.
Erkunden Sie den Datenabruf im Hintergrund, damit die Daten Ihrer App aktuell bleiben.
Entwickeln Sie anspruchsvollere UI-Komponenten, um Gesundheitsdaten mit Diagrammen und Grafiken zu visualisieren.

Ressourcen

Kurzreferenz

Aspekt	Wichtige Information
Thema	Entwicklung
Relevanz	Patientenaufklärung und Bewusstsein
Maßnahme	Besprechen Sie dies mit Ihrer Ärztin oder Ihrem Arzt
Häufigkeit	Wie von Ihrem Behandlungsteam empfohlen
Evidenz	Basierend auf aktuellen klinischen Leitlinien

Häufig gestellte Fragen

F: Woran erkenne ich, ob das auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrer Ärztin oder Ihrem Arzt, um Ihre individuellen Risikofaktoren einzuschätzen und geeignete nächste Schritte festzulegen.

F: Was sollte ich meine Ärztin oder meinen Arzt fragen? A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?“, „Welche Möglichkeiten habe ich?“, „Welche Änderungen des Lebensstils würden helfen?“ und „Wann sollte ich zur Nachuntersuchung kommen?“

F: Gibt es Änderungen des Lebensstils, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), erholsamer Schlaf (7–9 Stunden), Stressbewältigung und der Verzicht auf Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich Bildungszwecken und stellt keine medizinische Beratung dar. Holen Sie stets den Rat einer qualifizierten Fachkraft des Gesundheitswesens ein, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Versorgung treffen. Die individuellen Umstände unterscheiden sich, und was für eine Person angemessen ist, muss für eine andere nicht angemessen sein.

Wenn Sie einen medizinischen Notfall erleben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.

Zurück zu allen Artikeln