kinestex-sdk-react-native

KinesteX AI

INTEGRATE AI FITNESS & PHYSIO TRAINER IN YOUR APP IN MINUTES

Configuration

Demo project: KinesteX SDK ReactNative

Available Integration Options

Integration Options

Integration Option	Description	Features	Details
Complete User Experience	Leave it to us to recommend the best workout routines for your customers, handle motion tracking, and overall user interface. High level of customization based on your brand book for a seamless experience.	- Long-term lifestyle workout plans - Specific body parts and full-body workouts - Individual exercise challenges (e.g., 20 squat challenge)	View Integration Options
Custom User Experience	Integrate the camera component with motion tracking. Real-time feedback on all customer movements. Control the position, size, and placement of the camera component.	- Real-time feedback on customer movements - Communication of every repeat and mistake - Customizable camera component position, size, and placement	View Details

---

Permissions

AndroidManifest.xml

Add the following permissions for camera and microphone usage:

<!-- Add this line inside the <manifest> tag -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />

Info.plist

Add the following keys for camera and microphone usage:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for video streaming.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for video streaming.</string>

Install libraries

Install kinestex-sdk & webview:

npm install kinestex-sdk-react-native react-native-webview

Usage

Initial Setup

1. Prerequisites: Ensure you’ve added the necessary permissions in AndroidManifest.xml and Info.plist.

2. Launching the View: To display KinesteX, we will be using an iframe. We have multiple launch options in KinesteXSDK, and based on the option you select, you need to adjust the parameters you are sending to us.

Integration Options

enum IntegrationOption	Description
MAIN	Integration of our Complete UX
PLAN	Integration of Individual Plan Component
WORKOUT	Integration of Individual Workout Component
CHALLENGE	Integration of Individual Exercise in a challenge form
CAMERA	Integration of our camera component with pose-analysis and feedback

Available Categories to Sort Plans

Plan Category (key: planCategory)
Strength
Cardio
Weight Management
Rehabilitation

Example Integration

1. Create a reference to KinesteXSDK component:

const kinestexSDKRef = useRef<KinesteXSDKCamera>(null);

2. Create a postData object:

const postData: IPostData = {
  key: apiKey, // your API key
  userId: 'YOUR USER ID', // your unique user identifier 
  company: 'YOUR COMPANY', // your company name
  planCategory: PlanCategory.Cardio, // plan category you'd like to present to your user
  isHideHeaderMain: false, // hide back navigation button in header (default false)
  age: 50, // Use null if you do not want to specify
  height: 150, // In cm. Use null if you do not want to specify
  weight: 200, // In kg. Use null if you do not want to specify
  gender: 'Male', // Use null if you do not want to specify
  lifestyle: Lifestyle.Sedentary, // Use null if you do not want to specify
};

3. Handle messages we send back to you according to what your users do in real-time:

const handleMessage = (type: string, data: { [key: string]: any }) => {
  switch (type) {
    case 'exit_kinestex':
      console.log("User wishes to exit the app");
      if (data.message) {
        console.log('Date:', data.message);
      }
      dismissKinesteX(); // hide KinesteX WebView
      break;
     case 'kinestex_launched':
      // hide loading animation if you would like to add a custom overlaying animation
      break;
    case "plan_unlocked":
      console.log('Workout plan unlocked:', data);
      break;
    // All other message types (see below in Data Points section)
    default:
      console.log('Other message type:', type, data);
      break;
  }
};

4. Display KinesteXSDK with Main Integration Option:

<KinestexSDK 
  ref={kinestexSDKRef} 
  data={postData} 
  integrationOption={IntegrationOption.MAIN} 
  handleMessage={handleMessage} 
/>

Examples for Each Integration Option

Individual Plan

<KinestexSDK 
  ref={kinestexSDKRef}
  data={postData} 
  integrationOption={IntegrationOption.PLAN} // PLAN integration option
  plan={"Circuit Training"} // exact name of the workout plan you want to display 
  handleMessage={handleMessage} 
/>

Individual Workout

<KinestexSDK 
  ref={kinestexSDKRef}
  data={postData} 
  integrationOption={IntegrationOption.WORKOUT} // WORKOUT integration option
  workout={"Circuit Training"} // exact name of the workout you want to display
  handleMessage={handleMessage} 
/>

Challenge Component

1. Change postData:

const postData: IPostData = {
  key: apiKey,
  userId: 'YOUR USER ID',
  company: "YOUR COMPANY NAME",
  exercise: 'Squats', // name of the exercise
  countdown: 100, // duration of challenge in seconds
};

2. Change integration option in KinesteXSDK:

<KinestexSDK 
  ref={kinestexSDKRef}
  data={postData} 
  integrationOption={IntegrationOption.CHALLENGE}
  handleMessage={handleMessage} 
/>

Camera Component

1. Change postData:

const postData: IPostData = {
  key: apiKey,
  userId: 'YOUR USER ID',
  company: 'YOUR COMPANY NAME',
  currentExercise: 'Squats', // current exercise
  exercises: ['Squats', 'Jumping Jack'], // all exercises a person should do. We will preload them for future usage
};

2. Changing current exercise:

const changeExercise = () => {
  kinestexSDKRef.current?.changeExercise("Jumping Jack"); // the exercise has to be from the list of exercises otherwise it wouldn't load
};

3. Displaying KinesteXSDK:

<KinestexSDK 
  ref={kinestexSDKRef}
  data={postData} 
  integrationOption={IntegrationOption.CAMERA}
  handleMessage={handleMessage} 
/>

4. Handle message for reps and mistakes a person has done:

const handleMessage = (type: string, data: { [key: string]: any }) => {
  switch (type) {
    case "successful_repeat":
      console.log('Current rep:', data.value);
      break;
    case "mistake":
      console.log('Mistake:', data.value);
      break;
    default:
      console.log('Unknown message type:', type, data);
      break;
  }
};

Data Points

The KinesteX SDK provides various data points that are returned through the message callback. Here are the available data types:

Type	Data	Description
kinestex_launched	dd mm yyyy hours:minutes:seconds	When a user has launched KinesteX
exit_kinestex	date: dd mm yyyy hours:minutes:seconds, time_spent: number	Logs when a user clicks the exit button and the total time spent
plan_unlocked	title: String, date: date and time	Logs when a workout plan is unlocked by a user
workout_opened	title: String, date: date and time	Logs when a workout is opened by a user
workout_started	title: String, date: date and time	Logs when a workout is started by a user
exercise_completed	time_spent: number, repeats: number, calories: number, exercise: string, mistakes: [string: number]	Logs each time a user finishes an exercise
total_active_seconds	number	Logs every 5 seconds, counting the active seconds a user has spent working out
left_camera_frame	number	Indicates that a user has left the camera frame
returned_camera_frame	number	Indicates that a user has returned to the camera frame
workout_overview	workout: string, total_time_spent: number, total_repeats: number, total_calories: number, percentage_completed: number, total_mistakes: number	Logs a complete summary of the workout
exercise_overview	[exercise_completed]	Returns a log of all exercises and their data
workout_completed	workout: string, date: dd mm yyyy hours:minutes:seconds	Logs when a user finishes the workout and exits the workout overview
active_days (Coming soon)	number	Represents the number of days a user has been opening KinesteX
total_workouts (Coming soon)	number	Represents the number of workouts a user has done since starting to use KinesteX
workout_efficiency (Coming soon)	number	Represents the level of intensity with which a person has completed the workout

Contact

If you have any questions, contact: [e-mail]