This documentation is intended to guide React Native developers through the process of integrating and utilizing the VitaleSDK in their projects.
To integrate the VitaleSDK in your React Native project using Swift Package Manager, follow these steps:
-
Open your project in Xcode: First, ensure your React Native project is open in Xcode.
-
Adding Swift Package:
- Go to
File
->Swift Packages
->Add Package Dependency
. - Enter the URL for the VitaleSDK:
https://github.com/miguelmunozfer/VitaleSPM
- Follow the prompts to choose the version and options for integrating the package into your project.
- Go to
-
Verifying Integration:
- Once added, ensure that the VitaleSDK package appears in the Swift Package Dependencies section of your project.
- You can now use the SDK as per the documentation provided.
This process will integrate the VitaleSDK into your React Native project, allowing you to utilize its functionalities through Swift and bridging to React Native.
Before starting, ensure that your React Native project is set up and ready to integrate native modules.
- Place the
VitaleSDKBridge.swift
andVitaleSDKBridge.m
along with any other required Swift files in your project's directory.
- If you haven't already, create a bridging header to use Swift with Objective-C in your project. This is usually done automatically by Xcode when you add a new Swift file to an Objective-C project.
- Add
#import "React/RCTBridgeModule.h"
to the bridging header.
After successfully integrating the SDK, you can use the provided methods in your React Native JavaScript code. Here’s a brief overview of the available methods:
Starts the VitaleSDK session with the given user credentials.
appID
: String - The application ID.password
: String - The password.userID
: String - The user identifier.url
: String (optional) - The optional URL for configuration.
import { startSDK } from 'vitale-sdk-react-native';
startSDK('appID', 'password', 'userID');
Sets the main color for the SDK's UI elements.
color
: String - The color in a string format (e.g., hex code).
setMainColor('#FF5733');
Sets the color of the primary button.
color
: String - The color in a string format.
setPrimaryButtonColor('#00FF00');
Sets the color of the navigation bar.
color
: String - The color in a string format.
setNavigationBarColor('#0000FF');
Sets the tint color of the navigation elements.
color
: String - The color in a string format.
setNavigationTintColor('#FFFFFF');
Displays the Vitale screen.
showVitale();
Displays the Nutrition screen.
showNutrition();
Displays the Training screen.
showTraining();
Displays today's training.
showTodaytraining();
Displays the training library.
showLibrary();
Displays custom workouts.
showCustomWorkouts();
Displays time-based workouts.
showTimeBasedWorkouts();
Displays the user profile screen.
showProfile();
Updates the personal profile with the provided details. The profile
object can contain the following fields:
firstName
(String)lastName
(String)gender
(String)height
(Number)weight
(Number)birthDate
(Date)
updatePersonalProfile({
firstName: 'John',
lastName: 'Doe',
gender: 'Male',
height: 180,
weight: 75,
birthDate: new Date('1990-01-01')
});
Sets the pathologies for the user. pathologies
is an array of strings representing different conditions.
pathologies
: Array of Strings - The user's pathologies.
setPathologies(['Diabetes', 'Hypertension']);
Retrieves the user profile, returning an object containing the user details.
getProfile().then(profile => {
console.log('User Profile:', profile);
}).catch(error => {
console.error(error);
});