Integrate into your React Native app

Register an SDK Key

Get your free SDK key on https://dev.quickpose.ai, usage limits may apply. SDK Keys are linked to your bundle ID, please check Key before distributing to the App Store.

Installing the SDK

npm

Step 1: Install the package:

npm install @quickpose/react-native

iOS Setup

Step 2: Navigate to the ios directory and install pods:

cd ios && pod install

Android Setup

No additional setup is required for Android. The native dependencies are resolved automatically through the package's build.gradle.

Minimum Android SDK version: 26 (Android 8.0).

Add Camera Permission

iOS

Apple requires apps using the camera to provide a reason when prompting the user, and will not allow camera access without this set.

Add this to your app's Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is needed for pose estimation</string>

Android

Camera permissions are requested automatically by the QuickPoseView native component at runtime. No additional setup is required.

Attach SDK to Views

This is our standard boilerplate implementation providing:

1. A fullscreen camera display.
2. An overlay showing the AI user's landmarks.
3. Sensible memory releasing when the view is no longer visible.

import React from 'react';
import { View } from 'react-native';
import { QuickPoseView } from '@quickpose/react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <QuickPoseView
        sdkKey="YOUR SDK KEY HERE" // register for your free key at dev.quickpose.ai
        features={['overlay.wholeBody']}
        useFrontCamera={true}
        style={{ flex: 1 }}
      />
    </View>
  );
}

Extracting Results

Next step is to extract results from QuickPose to use in your app. Adapt the code above, so that the feature returns a result, such as range of motion.

const feature = 'rangeOfMotion.neck';

To see the captured result, store a string of the value as a state variable.

const [featureText, setFeatureText] = useState<string | null>(null);

And attach an overlay to the view displaying the string if set.

<View style={{ flex: 1 }}>
  <QuickPoseView
    sdkKey="YOUR SDK KEY HERE"
    features={[feature]}
    useFrontCamera={true}
    style={{ flex: 1 }}
    onUpdate={(event) => {
      const { results } = event.nativeEvent;
      if (results.length > 0) {
        setFeatureText("Captured result " + results[0].value);
      } else {
        setFeatureText(null);
      }
    }}
  />
  {featureText && (
    <View style={{
      position: 'absolute', bottom: 80, alignSelf: 'center',
      backgroundColor: 'rgba(89,112,246,0.85)', padding: 16, borderRadius: 8,
    }}>
      <Text style={{ color: 'white', fontSize: 26, fontWeight: '600' }}>
        {featureText}
      </Text>
    </View>
  )}
</View>

Styling the Overlay

Each feature can be styled independently with the featureStyles prop — a map from feature string to a QuickPoseStyle. This mirrors the native iOS/Android Style options: colour, line width, line caps and dash/dot patterns, drop shadows (a zero-offset shadow reads as a glow), outlines, an image revealed through the skeleton (imageFill), custom fonts and letter spacing.

import { Image } from 'react-native';
import { QuickPoseView, QuickPoseStyle } from '@quickpose/react-native';

const featureStyles: Record<string, QuickPoseStyle> = {
  'overlay.wholeBody': {
    color: '#59F2C8',
    relativeLineWidth: 1.5,
    lineCap: 'round',
    linePattern: 'dashed',
    shadow: { color: '#59F2C8', radius: 32 }, // zero offset = glow
    // reveal an image through the skeleton (the overlay acts as a mask):
    imageFill: Image.resolveAssetSource(require('./galaxy.jpg')).uri,
  },
};

<QuickPoseView
  sdkKey="YOUR SDK KEY HERE"
  features={['overlay.wholeBody']}
  featureStyles={featureStyles}
  useFrontCamera={true}
  style={{ flex: 1 }}
/>

The Feature & Styling Picker example toggles every option live. See Annotations & Styling for the complete Style reference.

Capturing a Screenshot

QuickPose composites the camera and the skeleton overlay into a single hardware surface on both platforms, which means react-native-view-shot and similar JS-level tools cannot read the pixels back. From 0.3.2 the plugin exposes two imperative methods on the view ref that pull the composited frame natively:

import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { QuickPoseView, QuickPoseViewRef } from '@quickpose/react-native';

export default function App() {
  const poseRef = useRef<QuickPoseViewRef>(null);

  return (
    <>
      <QuickPoseView
        ref={poseRef}
        sdkKey="YOUR SDK KEY HERE"
        features={['fitness.squats']}
        style={{ flex: 1 }}
      />
      <TouchableOpacity onPress={() => poseRef.current?.shareFrame('My squats')}>
        <Text>Share Screenshot</Text>
      </TouchableOpacity>
    </>
  );
}

shareFrame(title?): Promise<void>

Captures the current camera + overlay frame and opens the native share sheet (iOS UIActivityViewController, Android ACTION_SEND chooser). Resolves when the sheet is presented.

captureFrame(): Promise<string>

Captures the current frame as a PNG and returns a platform-local URI (file:// on iOS, content:// on Android) that is ready to be passed to <Image source={{ uri }} />, uploaded via fetch(uri), or read as bytes:

const uri = await poseRef.current!.captureFrame();
const bytes = await (await fetch(uri)).arrayBuffer();

No extra setup is needed — the plugin registers its own FileProvider on Android so the generated URI can cross app boundaries for sharing.