How to integrate Fitbit API in your React Native app

Sudhir Kumar
Jul 15 · 4 min read
Photo by FitNish Media on Unsplash

Introduction

Have you been thinking of making your own personal fitness tracker? Or maybe you’ve wanted to fetch your current location, manage your sleep, or just work out and store data in the database for logs?

Fitbit has got all of it covered.

Fitbit is the latest trend in the tech market, and its popularity is at peak these days. Recently, I was able to grab one, and it motivated me to integrate it into a React Native app I was working on.

Here’s how to integrate Fitbit API in a React Native application, for both iOS and Android, and get the response in our app screen to track the data. Follow these guidelines step by step, and at the end of this piece you will have a JSON full of responses from the Fitbit API. Let’s get started.


Step 1: Basic Installations

  1. Create a new project using the command:
react-native init fitbitAuthentication

2. After the initial project has been set up, run the following command:

cd fitbitAuthentication
npm install qs --save

Step 2: Environment Setup

As you already know, we need to provide the basic environment for both Android and iOS platforms so that the same code runs in both platforms. Every time you install a new link, it is best to go through the basic setup procedure to avoid any errors. Trust me, React Native can be nasty when it comes to error handling.

iOS

  1. Go to the terminal and write the following commands:
cd fitbitAuthentication
cd ios
open .

Open ios/your_project_name.xcodeproj file to do the following configuration in your XCode.

2. In the XCode window. click on your project name in the sidebar and go to the Build Settings tab in the main window. Once there, use the search option and find search.

XCode window in your Mac screen

3. Once you type search, it will show you a screen like this. In the header search path section, click once and add the path as follows:

$(SRCROOT)/../node_modules/react-native/Libraries
Header Search Path

Once you have added the path, double-click on the whole link and choose the recursive option from the drop-down.

4. At the top bar, look for the Info tab and click on URL Types, as shown in the image below. Add the credential required for your application. Remember to not enter the same as mine, and also note it down for future reference during integration.

5. In your project, open the iOS folder and find AppDelegate.m file and make some additions in the existing code:

Congrats! You are done with initial setup for the iOS platform.

Android

In Android, you have to set your Android APP URL scheme.

To specify the URL scheme, modify your AndroidManifest.xml and add an additional intent-filter under the one provided by React Native. Update “yourscheme” & “yourHost” with your application values.


Step 3: Fitbit Account Integration

  1. Go to Fitbit Developer.
  2. Create an account and then click on the Manage option in the menu:

3. When you click on Register An App, it will redirect you to this screen:

Fill this form and make changes in the following part, as shown in the image:

Note the Callback URL

Once you are done with the registration, take a screenshot of all the data displayed to use later. You can always come back later and have a look as well, so no issue if you don’t. But this is what I recommend to avoid wasting time.


Step 4: Final Steps

  1. Add config.js file in your app root directory and add the following code:
export default {
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET'
}

2. In your App.js file, add the following code:

Here you go. Now, just run the basic commands and you are done with your integration.

npm installreact-native run-ios
HomeScreen in the app
Authentication screen in the WebView

Once the authentication is done, click back to the app at the top left corner and check the console for the response. It will look something like this:

Final response

Check out Fitbit web API for more data you can fetch and use based on your requirements.

Thanks! Keep learning and sharing :-)

Better Programming

Advice for programmers.

Sudhir Kumar

Written by

React Native Developer. https://www.instagram.com/navigatorkumar/ https://sudhirkumar.in

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade