React Native plugin for QuickPose ML pose estimation SDK. Provides real-time body tracking, fitness rep counting, range of motion measurement, and skeleton overlays on iOS and Android.
npm install @quickpose/react-nativecd ios && pod installThe podspec automatically pulls QuickPose iOS pods (QuickPoseCore, QuickPoseCamera, QuickPoseSwiftUI).
No extra steps — Gradle resolves QuickPose + CameraX dependencies automatically.
Register for a free SDK key at https://dev.quickpose.ai.
import{QuickPoseView}from'@quickpose/react-native';<QuickPoseViewsdkKey="your-key-here"features={['overlay.wholeBody']}useFrontCamera={true}style={{flex: 1}}onUpdate={(event)=>{const{ results, feedback }=event.nativeEvent;// results = [{ feature: string, value: number }]// feedback = string | null}}/>| Prop | Type | Default | Description |
|---|---|---|---|
sdkKey | string | required | Your QuickPose SDK key |
features | string[] | required | Feature identifiers to activate |
useFrontCamera | boolean | true | Use front-facing camera |
style | ViewStyle | — | Standard React Native style |
featureStyles | Record<string, QuickPoseStyle> | — | Per-feature overlay styling, keyed by feature string |
onUpdate | (event) => void | — | Called each frame with results and feedback |
| String | Description |
|---|---|
overlay.wholeBody | Full body skeleton |
overlay.upperBody | Shoulders, arms, hips |
overlay.lowerBody | Hips, legs |
overlay.arm.left | Left arm |
overlay.arm.right | Right arm |
overlay.leg.left | Left leg |
overlay.leg.right | Right leg |
overlay.shoulders | Shoulders |
overlay.arms | Both arms |
overlay.legs | Both legs |
overlay.hips | Hips |
showPoints | All 33 body landmarks |
| String | Description |
|---|---|
rangeOfMotion.shoulder.left | Left shoulder rotation |
rangeOfMotion.shoulder.right | Right shoulder rotation |
rangeOfMotion.elbow.left | Left elbow |
rangeOfMotion.elbow.right | Right elbow |
rangeOfMotion.hip.left | Left hip |
rangeOfMotion.hip.right | Right hip |
rangeOfMotion.knee.left | Left knee |
rangeOfMotion.knee.right | Right knee |
rangeOfMotion.neck | Neck |
rangeOfMotion.back | Back |
| String | Description |
|---|---|
fitness.squats | Squats |
fitness.pushUps | Push ups |
fitness.jumpingJacks | Jumping jacks |
fitness.sumoSquats | Sumo squats |
fitness.lunges.left | Left leg lunges |
fitness.lunges.right | Right leg lunges |
fitness.sitUps | Sit ups |
fitness.cobraWings | Cobra wings |
fitness.plank | Plank hold |
fitness.bicepCurls | Bicep curls |
fitness.legRaises | Leg raises |
fitness.gluteBridge | Glute bridge |
fitness.overheadDumbbellPress | Overhead dumbbell press |
fitness.vUps | V-ups |
fitness.lateralRaises | Lateral raises |
fitness.frontRaises | Front raises |
fitness.sideLunges.left | Side lunges (left) |
fitness.sideLunges.right | Side lunges (right) |
| String | Description |
|---|---|
raisedFingers | Detect raised fingers |
thumbsUp | Detect thumbs up |
thumbsUpOrDown | Detect thumbs up or down |
Side variants: append .left or .right (e.g. raisedFingers.left).
Every feature accepts a QuickPoseStyle via the featureStyles prop, keyed by the feature string. An optional #variant suffix names a styled variant of the same feature (overlay.wholeBody#glow).
<QuickPoseViewfeatures={['overlay.wholeBody']}featureStyles={{'overlay.wholeBody': {color: '#00FF88',relativeLineWidth: 1.5,lineCap: 'round',linePattern: 'dashed',shadow: {color: '#00FF88',radius: 14,offsetX: 0,offsetY: 0},outline: {color: '#000000',relativeWidth: 0.3},imageFill: Image.resolveAssetSource(require('./flames.png')).uri,fontName: 'Bungee-Regular',letterSpacing: 0.08,conditionalColors: [{min: 120,color: '#00FF00'}],},}}/>See the QuickPose styling docs for what each option draws. imageFill reveals an image through the skeleton's lines, points and labels; fontName and letterSpacing style the measurement labels; a shadow with zero offset in the line's own color renders as a glow.
Each example is a complete React Native app that depends on @quickpose/react-native via "file:.." (local symlink). No npm publish required to run them.
- React Native environment setup (Xcode, Android Studio, etc.)
- CocoaPods (
gem install cocoapods) - A free SDK key from https://dev.quickpose.ai
- Physical device for camera access (iOS Simulator / Android Emulator won't work)
# 1. Install JS dependenciescd example-basic
npm install
# 2. Add your SDK key in App.tsx (replace "YOUR SDK KEY HERE")# 3. iOScd ios && pod install &&cd ..
npx react-native run-ios --device
# 4. Android (physical device connected via USB)
npx react-native run-androidMinimal demo — whole body overlay in ~50 lines of React Native code. Mirrors the native iOS BasicDemo.
Fitness exercise with real-time feedback text and progress bar. Demonstrates fitness.frontRaises with the onUpdate callback. Mirrors the native iOS FeedbackDemo.
Full feature picker with category menus, rep counter, and hold timer. Browse all overlay, ROM, fitness, and input features at runtime. Mirrors the native iOS/Android PickerDemo.
The original AwesomeProject — a manual bridge reference for users who want full control over the native bridge code. Does not use the plugin; bridge files are embedded directly in the app.
- React Native >= 0.60
- iOS 15+
- Android SDK 26+ (physical device required for camera)
- iOS SDK: https://github.com/quickpose/quickpose-ios-sdk
- Android SDK: https://github.com/quickpose/quickpose-android-sdk
- Documentation: https://docs.quickpose.ai
- SDK Keys: https://dev.quickpose.ai