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>