Appearance
React Native SDK
The trainingkit-reactnative package is a ready-to-use React Native bridge for FizzUp TrainingKit. It lets your React Native application launch TrainingKit workouts without copying any native bridge code into the host app.
The package handles both classic workouts and video workouts. Your application owns the GraphQL client and manages authentication; the package handles dispatching the session payload to the correct native SDK.
At a glance
Two functions cover the whole integration: identify the device on your GraphQL requests, then launch a workout from the session payload the backend returns.
ts
import { deviceIdentifier, launchWorkout } from 'trainingkit-reactnative'
// 1. Send the device id with your GraphQL requests
const headers = { 'X-TrainingKit-Device': deviceIdentifier() }
// 2. Launch the workout from the session payload (it carries trainingKitToken)
launchWorkout(session)launchWorkout inspects the session and opens the classic or video native experience automatically. See Usage for the full flow.
What the package provides
| Export | Description |
|---|---|
deviceIdentifier() | Returns the native TrainingKit device identifier, required as an HTTP header on GraphQL requests. |
launchWorkout(session) | Launches the native workout experience from a GraphQL session payload. Dispatches to the classic or video native controller automatically. |
Platform coverage
| Platform | Status |
|---|---|
| iOS | Included. The TrainingKit.xcframework is fetched from getfizzup/trainingkit-ios-sdk during CocoaPods installation. |
| Android | Included. The TrainingKit Android SDK is resolved from GitHub Packages via the package Gradle configuration. |
React Native autolinking handles native module registration on both platforms.
Requirements
- React Native 0.60 or later (autolinking required)
- A Mac with Xcode and CocoaPods to build the iOS app (iOS builds are macOS-only)
- A GitHub account with access to the FizzUp GitHub Packages Maven repository, for Android
- A contract with FizzUp granting access to the GraphQL API and a launch token
In this section
- Installation: Add the package to an existing React Native app and configure each platform.
- Quickstart: Run the demo app to validate the full workout launch flow.
- Usage: Wire Apollo, list workouts, and launch a session.
- Authentication: Device identifier and token flow.
- Reference: Full API reference for exported functions and types.
- Troubleshooting: Common installation and build errors.