React Native Fitbit: The Integration Process

How to integrate Fitbit API in your React Native app

4 min readJul 15, 2019

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

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

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.

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

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

Go to Fitbit Developer.
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:

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

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

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: