Mobile DevelopmentReact Native

How to Connect Google Health Connect to React Native

By
Ritik Chhipa
January 15 , 2025
Share this post
How to Connect Google Health Connect to React Native

Google Health Connect provides a centralized way for health and fitness data to be shared across Android apps. Integrating this with React Native allows developers to create powerful health applications. This article will guide you through connecting Google Health Connect to your React Native project using the react-native-health-connect library.

Step 1: Install the Library

To start, you'll need to install the react-native-health-connect library. This library provides an interface to interact with Google Health Connect in your React Native application.

Run the following command to install the library:

npm install react-native-health-connect

For more detailed information, you can refer to the official documentation.

Step 2: Understanding Permissions

Google Health Connect requires specific permissions to read and write data. Review the list of permissions to determine which ones are relevant for your app's needs. Common permissions include reading and writing steps, heart rate, and other health-related metrics.

Step 3: Setup React Native Project

Ensure you have a React Native project set up. If not, create one using the following commands:

npx react-native init HealthApp
cd HealthApp

Integrate the react-native-health-connect library as per the installation instructions in Step 1.

Step 4: Update Android Manifest

In your Android project, you need to declare the necessary permissions in the AndroidManifest.xml file. Add the following permissions to read and write health data:

<uses-permission android:name="android.permission.health.READ_STEPS" />
<uses-permission android:name="android.permission.health.WRITE_STEPS" />

<uses-permission android:name="android.permission.health.READ_STEPS" />
<uses-permission android:name="android.permission.health.WRITE_STEPS" />

Additionally, add the following intent filters within the <application> tag to handle permission requests:

<intent-filter>
    <action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
</intent-filter>
<intent-filter>
    <action android:name="android.intent.action.VIEW_PERMISSION_USAGE" />
    <category android:name="android.intent.category.HEALTH_PERMISSIONS" />
</intent-filter>

These intent filters ensure compatibility with various Android versions and allow your app to manage permissions effectively.

Step 5: Configure MainActivity

Follow the setup guide to configure MainActivity.java and MainActivity.kt for your project. This step ensures that the library is properly initialized when your app starts.

Step 6: Implement the Code in React Native

With the setup complete, you can now implement the following code in your React Native component to read sample health data, such as steps:

import {
  initialize,
  requestPermission,
  readRecords,
} from 'react-native-health-connect';

const readSampleData = async () => {
  // Initialize the Health Connect client
  const isInitialized = await initialize();

  if (isInitialized) {
    // Request permissions for reading steps
    const grantedPermissions = await requestPermission([
      { accessType: 'read', recordType: 'Steps' },
    ]);

    if (grantedPermissions) {
      // Read step records within a specified time range
      const { records } = await readRecords('Steps', {
        timeRangeFilter: {
          operator: 'between',
          startTime: '2023-01-09T12:00:00.405Z',
          endTime: '2023-01-09T23:53:15.405Z',
        },
      });

      console.log('Step Records:', records);
    }
  }
};


This code initializes the Health Connect client, requests permissions to read step data, and then retrieves the records for a specified time range.

Conclusion

By following these steps, you can successfully integrate Google Health Connect with a React Native application. This integration allows your app to access and manage health data seamlessly, providing users with a comprehensive health experience. For more features and advanced usage, explore the react-native-health-connect documentation.

Share this post
author-image

Ritik Chhipa

January 15, 2025

Resources and insights

Learn, Grow, and Succeed with Our Helpful Content

Get started with
Sortcoder

Connect with us. Build with us.