Vivanta-connect-react-native NPM

Vivanta Connect: React Native

Welcome to the Vivanta Connect: React Native repository! This project is our Vivanta Connect library for React Native seamless integration.

Installation

To get started with the project, follow the steps below:

Install our plugin

  npm install vivanta-connect-react-native

Additionally you gotta install the following dependencies for our plugin to be able to perform navigation and use Health Connect:

  npm install react-native-webview@^13.2.2 react-native-svg@^13.9.0 react-native-screens@^3.25.0 react-native-safe-area-context@^4.7.2 react-native-vector-icons@^9.2.0 @react-native-async-storage/async-storage^1.21.0 react-native-health-connect@^1.2.3 react-native-sqlite-storage@^6.0.1 react-native-health@^1.18.0 util@^0.12.5

Usage

After installing the package, you can now use it in your application. Make sure to import or require the necessary modules according to the package's documentation.

import VivantaConnect from 'vivanta-connect-react-native';

function YourComponent() {
  const vivantaConnectClosed = () => {
    // Handle the Vivanta Connect closed event here
  };

  return (
    <VivantaConnect
      privateKey="your-private-key"
      customerKey="your-customer-key"
      userExternalId="your-user-external-id"
      externalCompanyId="" // externalCompanyId for the user
      language="es" // Default "en"
      onVivantaConnectClosed={vivantaConnectClosed}
    />
  );
}

Permissions

Internet and parameter permissions are needed:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.health.READ_HEART_RATE"/>
    <uses-permission android:name="android.permission.health.READ_STEPS"/>

As well as the following intent filter to grant them:

  <activity
    android:name=".MainActivity"
  ...>
    <intent-filter>
      <action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
    </intent-filter>
  </activity>

Synching User's data

To synchronize new data, it is necessary to invoke VivantaHealthHelper functions from this library. Refer to the following example:

import {
  VivantaConnect,
  VivantaHealthHelper,
} from 'vivanta-connect-react-native';

const customFunctionToSyncHealthParameters = () => {
    const helper = new VivantaHealthHelper(
      'your-private-key',
      'your-customer-id',
      `your-user-external-id`,
    );
    await helper.init(); // this is going to ask for the needed permissions
    await helper.syncAll(); // this function synchronizes User's data
  };

By Calling these methods the library will synchronize data from the last synchronization date up to the current date and time. If there is no previous synchronization time recorded, data extraction will commence from the current day (midnight UTC-0).

Usage Warning

Please note the following warning while using this package:

Warning: Parent components using this as children should not have the "alignItems", "textAlign", or "alignContent" directive set to any value other than the default. This is important to ensure proper rendering and alignment of components within Vivanta Connect.