React Native Fitbit WebView

This package alllows you access users fitbit health records including, sleep, heart rate, etc.

Prerequisite

Before you can use this package you'd need to first setup a Fitbit developer account . once you have created your account. You'd neeed to Register an application and Access your keys

• Register an application

Field Name	Description
Application Name	string
Descripiton	string: must be at least 10 charaters
Application website	url string: must formatter as a url but doesn't need to be a valid url
Organisation	string
Organisation website	url string: must formatter as a url but doesn't need to be a valid url
Terms of Service Url	url string: must formatter as a url but doesn't need to be a valid url
Privacy Policy Url	url string: must formatter as a url but doesn't need to be a valid url
0Auth 2.0 Application type	server: accessing user auth from a server, client: accessing user auth from a client, personal: only retrive my data
callback url	url string: must formatter as a url but doesn't need to be a valid url
Default Access Type	read & write, read-only

• Access your keys

Once you create your app, you should be able to view the keys; for this project you'll need CLIENT_ID, CLIENT_SECRET & REDIRECT_URL

Installation

Add react-native-fitbit-webview to your project by running;

npm install react-native-fitbit-webview

or

yarn add react-native-fitbit-webview

Additional Setup

To ensure everything works smoothly, install and configure the required dependency, react-native-webview:

yarn add react-native-webview

for iOS:

cd iOS && pod install && cd ..

for expo applications run;

npx expo install react-native-webview

That’s it! You’re all set.

Setup

Before you make use of the Hook, you'd need to setup your project to use the package, to do so;

import React, { useEffect, useState } from 'react'; 
import MainNavigator from './src/navigation/MainNavigator'; 
import { FitbitProvider } from 'react-native-fitbit-webview'

function App(): React.JSX.Element { 
  return (
    <FitbitProvider 
     configs={{
        CLIENT_ID: '<your client_id here>',
        CLIENT_SECRET: '<your client_secret here>',
        FITBIT_MODAL_CONTROLS: {
            // set the color theme for the fitbit modal
          themeColor: colors.backgroundColor
        }
      }}> 
            <MainNavigator /> 
      </FitbitProvider> 
  );
}
export default App;

Usage

Authentication user.

import React, {useState} from 'react'; 
import { View } from 'react-native';
import {useFitbit} from 'react-native-fitbit-webview'

function AuthenticateUser() {
     const { authenticateUserFitbitAccount, usersFitBitAuthCredentials } = useFitbit();
    const [credentials, setCredentials] = useState(undefined)

     useEffect(()=>{
      if(!credentials){
          authenticateUserFitbitAccount()
      }
      if(){
        setCredentials(usersFitBitAuthCredentials)
      }
     },[])

  return (
    <View style={{ flex: 1 }}>
       <Text> Authenticate user's Fitbit account. </Text>
    </View>
  );
}

Get user vitals.

import React from 'react'; 
import { View } from 'react-native';
import { useFitbitVitals } from 'react-native-fitbit-webview'

function ViewUserVitals() {
   
     const { usersFitBitAuthCredentials } = useFitbit();
      const { 
          fitBitDailySteps, 
          fitBitHeartRate, 
          fitBitCalories, 
          fitBitSleep  } = useFitbitVitals(usersFitBitAuthCredentials.access_token);
  
    return (
      <View style={{ flex: 1 }}>
          <Text> Authenticate user's Fitbit account. </Text>
      </View>
  );
}

---

API Reference

Fitbit API

Name	use/description	extra
CLIENT_ID	Fitbit app client ID, obtained from your Fitbit Developer Dashboard	nill
CLIENT_SECRET	Fitbit app client secret, obtained from your Fitbit Developer Dashboard	nill
FITBIT_MODAL_CONTROLS	Configuration object for customizing the appearance of the Fitbit authentication modal	default: { themeColor: "#000" }
authenticateUserFitbitAccount	Function to trigger the opening of the Fitbit authentication modal and start the OAuth2 flow	nill
closeModal	Function to close the authentication modal	nill
usersFitBitAuthCredentials	Object containing the authenticated user’s Fitbit credentials, including access token, once the OAuth2 flow completes	nill

---

Fitbit Vitals Hook API

Name	use/description	extra
accessToken	The Fitbit OAuth2 access token required to fetch user vitals	YES
fitBitDailySteps	Object representing the user’s daily steps fetched from the Fitbit API	nill
fitBitHeartRate	Object representing the user’s heart rate fetched from the Fitbit API	nill
fitBitCalories	Object representing the user’s calorie tracking data fetched from the Fitbit API	nill
fitBitSleep	Object representing the user’s sleep analysis data fetched from the Fitbit API	nill

---

Contributions

Want to help improve this package? Read how to contribute and feel free to submit your PR!

Licensing

This project is licensed under the MIT License.

Sponsorship

• Star the project on Github
• Buy me a coffee