React Native with Apple HealthKit and Google Fit

Alright, It is important to know the tips and tricks before you start doing something that you haven't done before,

GoogleFit with React Native App

When you want to integrate google fit yo might confused there are different supports for that,like it has a REST api too, so you may thinking of using it, but the best way that I can see it using the bridging module for that,

In the community itself there is only one module that I can through after a quick RnD in the internet and it seems also really good compared to the things that is available for android.

https://github.com/StasDoskalenko/react-native-google-fit

You can use this and mostly follow the installation steps and guide you are mostly good to go.

There are some specifics that I need to tell you about are,

Here, you have to create a Google API oAuth client for authorization and that is a small place where you might make problems but follow the installation guide, it will help you.

 

Make sure you have added the package name and the SHA1: XX:XX:XX:XX:XX...  properly to the OAuth client. 

 

When you creating debug.keystore file in android(if you are testing it in debug mode ,if you runign it in release mode you have to have release.keystore file) check is there a already created keystore file.

 

If you are testing it in debug mode make sure you have added test user in oauth client side.

Make sure you have debug signing configuration and release signing configuration in place based on what type of mode you are going to run it.

debug {

storeFile file('debug.keystore')

storePassword 'android'

keyAlias 'androiddebugkey'

keyPassword 'android'

}

Above values are based on the configuration which are mentioned in the installation guide. this should go in to android/app build.gradle file

Also create the keystore file also in android/app location.

In android folder build.gradle file you have to have this in repositories section

maven { url "https://maven.google.com" }

Most of the time you will endered up with below message,that because there is a problem with the signing the build with keystore file or your SHA1 key or the package name you have added in Oauth client.

AUTH DENIED Authorization cancelled

AUTH_DENIED. {
"success": false,
"message": "Authorization cancelled"
}

 

OAuth Consent Screens

When you giving authorizations to the app by Oauth sometimes it does not load a scopes screen that becase, app has already connected to the Fit app in your device so that case you can go to Fit app and your profile and tap the gear icon and then go to manage connected apps ,so from there you can disconnect the app from Fit, after that if you reload your app yo will get the full OAuth consent screens.

Retrieving Data

When you pull data it should be remembered that, filter the day by it data source , since you will get array of data from different sources.

const res = await GoogleFit.getDailySteps(new Date());

const res_estimated = res.filter(

(data: any) => data.source === 'com.google.android.gms:estimated_steps'

);

console.log('Step count today : ', res_estimated);

let date = new Date().toDateString();

alert(

res_estimated[0].steps[0].date +

' Step Count :' +

res_estimated[0].steps[0].value

);

Apple HealthKit with React Native App

 

Connecting to HealthKit is far more easier than Google Fit. For that you can use folloving bridging library it will does everything for you.

https://github.com/agencyenterprise/react-native-health

Following is just information for you ,that is no neede for add above library.

Info:

Basically, you will have to configure the Xcode project by  adding

• Enable health kit - Xcode capabilities section
• Required purpose string -this will be shown in the permission sheet(why and what for and how you protect that data) - info.plist
• The privacy policy of the app should update with this info since this will be shown in the permission sheet

Application authorization flow:

• permission sheet specific to clinical types will be shown each and every time when request permission/authorization.
• we have to always ask for permission before query data.
• when requesting authorization you have to specify the types wish to access(immunization, medication, etc.)
• Request only the data that you need.

Libraries/support:

The prospective library can work with for:

https://github.com/agencyenterprise/react-native-health

React native itself doesn't have native modules to access healthkit API's if so based on requirement we have to write a native API access code in the app itself or a native module.

https://reactnative.dev/docs/native-modules-intro

 

 

 

 

 

Authorization facts:

 

This is important because, user have to give both read and write access in order to pull the data according to apple.check bellow link.

https://developer.apple.com/documentation/healthkit/authorizing_access_to_health_data

API which use both healthkit and google fit but limited apis - https://github.com/OvalMoney/react-native-fitness#API

 

Testing in Release mode 

 

Important thing to remember is yo have to create separate Oauth client for production and you will have to review if you have been using any restricted scopes and also you have to review your app for test in release mode.