@sworkit/react-native-workout-player

A component for playing Sworkit workouts with simple config options.

Installation

This is the Sworkit workout player component for playing a standalone workout for our paid partners program. Please reach out to [email protected] if you'd like to use this component.

You'll need 2 things before this package will be useful to you.

1. Get a USERNAME and PUBLIC_API_KEY from your Sworkit contact. This gives you access to our workouts API.
2. Request npm access for all the engineers who will be building your app. Please give us npm usernames or emails and we will invite you. (Again, reach out to your Sworkit contact, or message [email protected] if you're running into issues.) Once you have access, you will be given an $NPM_TOKEN as well.

Also works with Yarn.

npm install @sworkit/react-native-workout-player

You'll need to install "peer dependencies" on your own in order to automatically link the necessary React Native libraries.

There are 2 options for this. Choose either Method 1 or Method 2

Method 1

npx install-peerdeps --auth $NPM_TOKEN  @sworkit/react-native-workout-player

where $NPM_TOKEN is the Sworkit private npm token (ask Sworkit contact at [email protected] for assistance)

Method 2

Without an npm token, you can still directly install all the necessary packages with a command:

Using npm:

npm i react-native-ionicons react-native-fast-image react-native-gesture-handler @react-navigation/native @react-native-community/async-storage @react-native-community/masked-view @react-navigation/stack react-native-reanimated react-native-safe-area-context react-native-screens rn-fetch-blob react-native-track-player react-native-video react-native-svg react-native-redash react-native-device-info

OR using yarn:

yarn add react-native-ionicons react-native-fast-image react-native-gesture-handler @react-navigation/native @react-native-community/async-storage @react-native-community/masked-view @react-navigation/stack react-native-reanimated react-native-safe-area-context react-native-screens rn-fetch-blob react-native-track-player react-native-video react-native-svg react-native-redash react-native-device-info

Using the Sworkit Player component

This is a full screen component with all the necessary navigation. If you have a workoutLength in your props, you will NOT see the time select screen. This example uses Typescript.

import WorkoutPlayer, { WorkoutPlayerProps} from '@sworkit/react-native-workout-player';

const playerProps: WorkoutPlayerProps = {
  publicKey: 'PUBLIC_API_KEY',
  uuid: 'UNIQUE_USER_ID', //a unique user id in your app, required for certain customers
  //workoutLength: 6, //Time select screen enabled when no workout lengh included. 
  workoutSlug: 'full-body',
  collectionSlug: 'strength',
  primaryColor: 'green',
  secondaryColor: 'midnightblue',
  accentColor: 'grey',
  language: 'en',
  onWorkoutEnd: (log) => { console.log(`what would you like to do with this workout log?`, log) },
  onWorkoutClosed: (log) => { console.log(`workout closed`, log) }

};

const App = () => {
  return <WorkoutPlayer {...playerProps} />;
};

Has been tested on React Native 63+ only. Ask your Sworkit contact for your public key!

Properties

| Property | Description | Type | Default. | | ---------------- | ---------------------------------------------------------- | ----------------------------|-------------------------------------- | | collectionSlug | Collection slug the workout is playing from. e.g. "strength"| string | undefined | | publicKey (required) | Public Key (PUBLIC_API_KEY in this doc) given from Sworkit (required) The Sworkit player will not load without a public key | string | undefined | | uuid (required) | Unique user id from your app, if not provided, Sworkit will log the unique device id which could result in inaccurate data | string | undefined | | workoutLength | Length of the workout (mins) for standard workouts, Or the number of rounds for yoga workouts Note: If no workoutLength is passed in - the time select screen will pop up automatically on load | number | undefined | | workoutSlug (required) | Workout Slug to be played (required) e.g. "full-body" | string | undefined | | primaryColor | CSS or hex color, includes timer, progress bars, and some toggles | string | "#ff8614" | | secondaryColor | CSS or hex color, includes the warmup timer and some toggles | string | purple | | accentColor | CSS or hex color, color of the lead in timer | string | blue | | language | Available in 13 languages, changes the view language | string | en |

Events

| Event | Description | Type | | ---------------- | ---------------------------------------------------------- | ------------------------------------------------------------------ | | onWorkoutClose | Emitted when the X in the top left of the player is tapped | CustomEvent<any> | | onWorkoutEnd | Emitted when workout is finished | CustomEvent<{ log: WorkoutLog; selectedWorkoutLength: number; }> |

Data Structure

interface WorkoutLog {
  activityKey: string;
  appVersion: string;
  platform: 'web';
  calories: number;
  category: string;
  collectionSlug: string;
  deviceType: string;
  minutesCompleted: number;
  name: string;
  slug: string;
  timestampMillis: number;
  type: string;
  utcCreated: string;
}

Using the Sworkit Data Rest Api

To retrieve the data for your CMS system you’ll need to make an API GET request using 2 headers that will return a JSON object.

METHOD:             GET
URL:                https://api2.sworkit.com/v1/customers/data
HEADERS:
    Api-Username:   {provided separately by Sworkit} USERNAME
	Api-Key:        {provided separately by Sworkit} PUBLIC_API_KEY

Making this call will retrieve a JSON object that has the following format:

{
   "COLLECTION NAME": {
     "image_url": string,
     "workouts": // Array of Workout Objects
       [
         {
           "name": string,
           "slug": string,
           "image_url": string,
           "exercises": // Array of Exercise Objects
             [
               {
                 "slug": string,
                 "name": string,
                 "image_url": string,
               }
             ]
            // additional metadata on workouts, 
            "category": 'strength' | 'cardio' | 'stretching' | 'yoga' | 'pilates' | 'pt' | 'barre',
            "difficulty": number, // 1,2,3 where 1=easy, 2=intermediate, 3=advanced
            "focus_area": 'full' | 'upper' | 'lower' | 'pilates' | 'core' | 'back'
            "equipment_types": array,// possible values are 'bodyweight', 'dumbbell', 'kettlebell', 'band', 'loop', 'foamroller',
            "fitness_goal": array,// possible values are 'GOAL_BUILD', 'GOAL_ENDURANCE', 'GOAL_FLEXIBILITY', 'GOAL_LOSE', 'GOAL_INJURY'
            "age_group": 'adult'|'kids'
         }
       ]
   }

   NOTE: may use WorkoutObject Typescript type for workouts. Keys are slightly different

    `fitness_goal` = `goals`
    `focus_area` = `subCategory`
    `age_group` = `classification` => (`standard` instead of `adult`)
    `equipment_types` = `equipmentTypes`
    `image_url` is not represented

Here's an example of how to call this from the console:

const res = await fetch('https://api2.sworkit.com/v1/customers/data', {method: 'GET', headers: {'Content-Type': 'application/json','Api-Username': '<<USERNAME>>', 'Api-Key': '<<PUBLIC_API_KEY>>'}});
await res.json();