Day 1: Setting Up the Project and Integrating Health and Fitness APIs

#GoogleFit #AppleHealth #FitnessTrackingApp

Welcome to Day 1 of building your fitness tracking app! Today, you’ll set up your React Native project and integrate health and fitness APIs like Google Fit and Apple HealthKit. These APIs allow your app to access step counts, workout data, and more.

What You’ll Learn Today

1. Set up the project environment.
2. Integrate Google Fit (Android) and Apple HealthKit (iOS).
3. Test the integration with sample data.

Step 1: Set Up the Project

1. Initialize a New React Native Project

npx react-native init FitnessApp
cd FitnessApp

2. Install Required Dependencies

npm install react-native-google-fit react-native-health

3. Link Native Modules

npx pod-install

Step 2: Integrate Google Fit (Android)

1. Enable Google Fit API

• Go to the Google Cloud Console.
• Create a new project or select an existing one.
• Enable the Fitness API in the APIs & Services section.

2. Configure Android Permissions

Add the following permissions to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.INTERNET" />

3. Initialize Google Fit in the App

Create a file GoogleFitSetup.js:

import GoogleFit, { Scopes } from 'react-native-google-fit';

export const setupGoogleFit = () => {
  const options = {
    scopes: [
      Scopes.FITNESS_ACTIVITY_READ,
      Scopes.FITNESS_ACTIVITY_WRITE,
    ],
  };

  GoogleFit.authorize(options)
    .then(() => {
      console.log('Google Fit connected');
    })
    .catch(() => {
      console.error('Google Fit authorization failed');
    });
};

Step 3: Integrate Apple HealthKit (iOS)

1. Enable HealthKit

• Open your project in Xcode.
• Go to Signing & Capabilities > + Capability and add HealthKit.

2. Configure Info.plist

Add the following to your Info.plist:

<key>NSHealthShareUsageDescription</key>
<string>We need access to your health data to track your fitness progress.</string>
<key>NSHealthUpdateUsageDescription</key>
<string>We need access to update your health data.</string>

3. Initialize HealthKit in the App

Create a file HealthKitSetup.js:

import AppleHealthKit from 'react-native-health';

const options = {
  permissions: {
    read: ['StepCount', 'DistanceWalkingRunning'],
    write: ['StepCount', 'DistanceWalkingRunning'],
  },
};

export const setupHealthKit = () => {
  AppleHealthKit.initHealthKit(options, (error) => {
    if (error) {
      console.error('HealthKit initialization failed', error);
      return;
    }
    console.log('HealthKit connected');
  });
};

Step 4: Combine Both APIs in App.js

Update App.js:

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { setupGoogleFit } from './GoogleFitSetup';
import { setupHealthKit } from './HealthKitSetup';

const App = () => {
  useEffect(() => {
    if (Platform.OS === 'android') {
      setupGoogleFit();
    } else if (Platform.OS === 'ios') {
      setupHealthKit();
    }
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Fitness Tracking App</Text>
      <Text style={styles.subtitle}>Google Fit and Apple Health connected!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 16,
    marginTop: 10,
  },
});

export default App;

Step 5: Test the Integration

1. Run the app on your device:
   • Android: npx react-native run-android
   • iOS: npx react-native run-ios
2. Check the console logs for successful API connections:
   • “Google Fit connected” (Android).
   • “HealthKit connected” (iOS).
3. Ensure permissions are granted for Google Fit or HealthKit during app launch.

SEO Optimization for This Tutorial

Keywords: Google Fit React Native, Apple HealthKit integration, fitness tracking app, health API integration, fitness app setup.

Meta Description: Learn how to set up a fitness tracking app by integrating Google Fit and Apple HealthKit APIs. Full step-by-step guide with React Native code examples.

Summary

Today, you successfully set up your fitness tracking app and integrated Google Fit and Apple HealthKit APIs for data collection. This foundation enables tracking fitness metrics like steps, calories, and distance.

What’s Next: Tomorrow, you’ll start tracking steps and displaying real-time data in your app.

Stay tuned for Day 2: Tracking Steps and Displaying Real-Time Data.