https://github.com/just1and0/react-native-fitbit-webview
☘️🏥This package allows you to authenticate users and get health vitals on Fitbit.
https://github.com/just1and0/react-native-fitbit-webview
fitbit fitbit-api fitbit-sdk
Last synced: 4 months ago
JSON representation
☘️🏥This package allows you to authenticate users and get health vitals on Fitbit.
- Host: GitHub
- URL: https://github.com/just1and0/react-native-fitbit-webview
- Owner: just1and0
- License: mit
- Created: 2024-03-26T18:05:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-20T18:57:07.000Z (6 months ago)
- Last Synced: 2024-12-08T05:48:13.967Z (5 months ago)
- Topics: fitbit, fitbit-api, fitbit-sdk
- Language: TypeScript
- Homepage:
- Size: 1.32 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
React Native Fitbit WebView
This package alllows you access users fitbit health records including, sleep, heart rate, etc.
## [](https://github.com/just1and0/React-Native-Fitbit-WebView#Prerequisite)Prerequisite
Before you can use this package you'd need to first setup a [Fitbit developer account](https://dev.fitbit.com/login) . once you have created your account. You'd neeed to *Register an application* and *Access your keys*
- [Register an application](https://dev.fitbit.com/apps/new)
| 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 `
### [](https://github.com/just1and0/React-Native-Fitbit-WebView#installation)Installation
Add `react-native-fitbit-webview` to your project by running;
```bash
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`:
```bash
yarn add react-native-webview
```
for iOS:
```bash
cd iOS && pod install && cd ..
```
for expo applications run;
```bash
npx expo install react-native-webview
```
That’s it! You’re all set.
## [](https://github.com/just1and0/React-Native-fitbit-WebView#setup)Setup
Before you make use of the Hook, you'd need to setup your project to use the package, to do so;
```javascript
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 (
',
CLIENT_SECRET: '',
FITBIT_MODAL_CONTROLS: {
// set the color theme for the fitbit modal
themeColor: colors.backgroundColor
}
}}>
);
}
export default App;
```
## [](https://github.com/just1and0/React-Native-fitbit-WebView#usage)Usage
### Authentication user.
```javascript
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 (
Authenticate user's Fitbit account.
);
}
```
### Get user vitals.
```javascript
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 (
Authenticate user's Fitbit account.
);
}
```
---
## **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` |
---
## [](https://github.com/just1and0/react-native-fitbit-webview#contributions)Contributions
Want to help improve this package? [Read how to contribute](https://github.com/just1and0/React-Native-fitbit-WebView/blob/main/CONTRIBUTING.md) and feel free to submit your PR!
## [](https://github.com/just1and0/React-Native-fitbit-WebView#licensing)Licensing
This project is licensed under the MIT License.
## Sponsorship
- Star the project on Github
- [Buy me a coffee](https://buymeacoffee.com/6pL0Q8YkW)