{"id":18815209,"url":"https://github.com/just1and0/react-native-fitbit-webview","last_synced_at":"2025-09-02T18:30:38.388Z","repository":{"id":258786439,"uuid":"777902985","full_name":"just1and0/React-Native-Fitbit-Webview","owner":"just1and0","description":"☘️🏥This package allows you to authenticate users and get health vitals on Fitbit.","archived":false,"fork":false,"pushed_at":"2024-10-20T18:57:07.000Z","size":1380,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-08T05:48:13.967Z","etag":null,"topics":["fitbit","fitbit-api","fitbit-sdk"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/just1and0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["just1and0"],"patreon":"just1and0","ko_fi":"just1and0"}},"created_at":"2024-03-26T18:05:16.000Z","updated_at":"2024-10-20T18:55:57.000Z","dependencies_parsed_at":"2024-10-20T21:48:12.814Z","dependency_job_id":null,"html_url":"https://github.com/just1and0/React-Native-Fitbit-Webview","commit_stats":null,"previous_names":["just1and0/react-native-fitbit-webview"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2FReact-Native-Fitbit-Webview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2FReact-Native-Fitbit-Webview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2FReact-Native-Fitbit-Webview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2FReact-Native-Fitbit-Webview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/just1and0","download_url":"https://codeload.github.com/just1and0/React-Native-Fitbit-Webview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231800859,"owners_count":18428589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fitbit","fitbit-api","fitbit-sdk"],"created_at":"2024-11-07T23:48:05.317Z","updated_at":"2024-12-30T01:18:09.069Z","avatar_url":"https://github.com/just1and0.png","language":"TypeScript","funding_links":["https://github.com/sponsors/just1and0","https://patreon.com/just1and0","https://ko-fi.com/just1and0","https://buymeacoffee.com/6pL0Q8YkW"],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n \n\u003ccenter\u003e\n \n\u003ch1\u003eReact Native Fitbit WebView\u003c/h1\u003e\n\nThis package alllows  you access users fitbit health records including, sleep, heart rate, etc.  \n \n  \n\u003c/center\u003e\n \n\u003c/div\u003e \n \n\n## [](https://github.com/just1and0/React-Native-Fitbit-WebView#Prerequisite)Prerequisite \nBefore 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*\n- [Register an application](https://dev.fitbit.com/apps/new)\n![Alt text](./assests/rnp.png) \n\n| Field Name   |  Description   | \n|------------|------------| \n| Application Name | `string`| \n| Descripiton|  `string`: `must be at least 10 charaters`|  \n| Application website|  `url string`: `must formatter as a url but doesn't need to be a valid url`|  \n| Organisation |  `string`|  \n| Organisation website|  `url string`: `must formatter as a url but doesn't need to be a valid url`|  \n| Terms of Service Url|  `url string`: `must formatter as a url but doesn't need to be a valid url`|  \n| Privacy Policy Url|  `url string`: `must formatter as a url but doesn't need to be a valid url`|  \n| 0Auth 2.0 Application type|  `server: accessing user auth from a server`, `client: accessing user auth from a client`, `personal: only retrive my data` |  \n| callback url|   `url string`: `must formatter as a url but doesn't need to be a valid url` |  \n| Default Access Type|  `read \u0026 write`, `read-only` |  \n\n\n- [Access your keys]()\n![Alt text](./assests/key.png) \n\n Once you create your app, you should be able to view the keys; for this project you'll need `CLIENT_ID`, `CLIENT_SECRET` \u0026 `REDIRECT_URL `\n \n\n### [](https://github.com/just1and0/React-Native-Fitbit-WebView#installation)Installation\n\nAdd `react-native-fitbit-webview` to your project by running;\n\n```bash \nnpm install react-native-fitbit-webview\n\nor\n\nyarn add react-native-fitbit-webview\n```\n### **Additional Setup**\n\nTo ensure everything works smoothly, install and configure the required dependency, `react-native-webview`:\n\n \n```bash \nyarn add react-native-webview\n```\nfor iOS: \n```bash \ncd iOS \u0026\u0026 pod install \u0026\u0026 cd ..\n```\nfor expo applications run;\n```bash \nnpx expo install react-native-webview\n```\nThat’s it! You’re all set.\n## [](https://github.com/just1and0/React-Native-fitbit-WebView#setup)Setup\nBefore you make use of the Hook, you'd need to setup your project to use the package, to do so;\n\n```javascript\nimport React, { useEffect, useState } from 'react'; \nimport MainNavigator from './src/navigation/MainNavigator'; \nimport { FitbitProvider } from 'react-native-fitbit-webview'\n\nfunction App(): React.JSX.Element { \n  return (\n    \u003cFitbitProvider \n     configs={{\n        CLIENT_ID: '\u003cyour client_id here\u003e',\n        CLIENT_SECRET: '\u003cyour client_secret here\u003e',\n        FITBIT_MODAL_CONTROLS: {\n            // set the color theme for the fitbit modal\n          themeColor: colors.backgroundColor\n        }\n      }}\u003e \n            \u003cMainNavigator /\u003e \n      \u003c/FitbitProvider\u003e \n  );\n}\nexport default App;\n```\n\n## [](https://github.com/just1and0/React-Native-fitbit-WebView#usage)Usage\n\n### Authentication user. \n```javascript\nimport React, {useState} from 'react'; \nimport { View } from 'react-native';\nimport {useFitbit} from 'react-native-fitbit-webview'\n\nfunction AuthenticateUser() {\n     const { authenticateUserFitbitAccount, usersFitBitAuthCredentials } = useFitbit();\n    const [credentials, setCredentials] = useState(undefined)\n\n     useEffect(()=\u003e{\n      if(!credentials){\n          authenticateUserFitbitAccount()\n      }\n      if(){\n        setCredentials(usersFitBitAuthCredentials)\n      }\n     },[])\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n       \u003cText\u003e Authenticate user's Fitbit account. \u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n ### Get user vitals. \n```javascript\nimport React from 'react'; \nimport { View } from 'react-native';\nimport { useFitbitVitals } from 'react-native-fitbit-webview'\n\nfunction ViewUserVitals() {\n   \n     const { usersFitBitAuthCredentials } = useFitbit();\n      const { \n          fitBitDailySteps, \n          fitBitHeartRate, \n          fitBitCalories, \n          fitBitSleep  } = useFitbitVitals(usersFitBitAuthCredentials.access_token);\n  \n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n          \u003cText\u003e Authenticate user's Fitbit account. \u003c/Text\u003e\n      \u003c/View\u003e\n  );\n}\n```\n---\n\n## **API Reference**\n\n#### Fitbit API\n| Name                                 |                                                                                   use/description                                                                                   |                                                      extra |\n| :----------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------: |\n| `CLIENT_ID`                          |                                                 Fitbit app client ID, obtained from your Fitbit Developer Dashboard                                                                  |                                                     `nill` |\n| `CLIENT_SECRET`                      |                                              Fitbit app client secret, obtained from your Fitbit Developer Dashboard                                                                 |                                                     `nill` |\n| `FITBIT_MODAL_CONTROLS`              |                                             Configuration object for customizing the appearance of the Fitbit authentication modal                                                   |  default: `{ themeColor: \"#000\" }` |\n| `authenticateUserFitbitAccount`      |                                  Function to trigger the opening of the Fitbit authentication modal and start the OAuth2 flow                                                        |                                                     `nill` |\n| `closeModal`                         |                                                                       Function to close the authentication modal                                                                     |                                                     `nill` |\n| `usersFitBitAuthCredentials`         |                                    Object containing the authenticated user’s Fitbit credentials, including access token, once the OAuth2 flow completes                              |                                                     `nill` |\n\n---\n\n#### Fitbit Vitals Hook API\n\n| Name                                 |                                                                                   use/description                                                                                   |                                                      extra |\n| :----------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------: |\n| `accessToken`                        |                                                         The Fitbit OAuth2 access token required to fetch user vitals                                                                |                                                     `YES` |\n| `fitBitDailySteps`                   |                                              Object representing the user’s daily steps fetched from the Fitbit API                                                                 |                                                     `nill` |\n| `fitBitHeartRate`                    |                                               Object representing the user’s heart rate fetched from the Fitbit API                                                                 |                                                     `nill` |\n| `fitBitCalories`                     |                                          Object representing the user’s calorie tracking data fetched from the Fitbit API                                                           |                                                     `nill` |\n| `fitBitSleep`                        |                                      Object representing the user’s sleep analysis data fetched from the Fitbit API                                                                  |                                                     `nill` |\n\n---\n\n## [](https://github.com/just1and0/react-native-fitbit-webview#contributions)Contributions\n\nWant 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!\n\n## [](https://github.com/just1and0/React-Native-fitbit-WebView#licensing)Licensing\n\nThis project is licensed under the MIT License.\n\n## Sponsorship\n- Star the project on Github\n- [Buy me a coffee](https://buymeacoffee.com/6pL0Q8YkW)\n\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust1and0%2Freact-native-fitbit-webview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjust1and0%2Freact-native-fitbit-webview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust1and0%2Freact-native-fitbit-webview/lists"}