Quickstart - PoseTracker

Get 17 keypoints per frame with Expo (or bare React Native), react-native-webview, and no API key.

Keypoints-only mode is free. The offline package works without network; light needs network to load TF.js + MoveNet. See Choose a package.

1. Install

Offline (bundled)
Light (CDN)

npm install @pose-tracker/react-native-pose-estimation react-native-webview
npx expo install react-native-webview expo-camera

npm install @pose-tracker/react-native-pose-estimation-light react-native-webview
npx expo install react-native-webview expo-camera

expo-camera is only for the permission API — PoseTracker still captures inside its WebView.

2. Camera permission (host app)

Declare and request camera access in your app before mounting the camera screen. Minimal Expo snippet — full guide: Permissions.

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Camera access is required for on-device pose estimation."
      }
    },
    "android": {
      "permissions": ["android.permission.CAMERA"]
    },
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Camera access is required for on-device pose estimation."
        }
      ]
    ]
  }
}

3. Provider + WebView + keypoints

Offline
Light

import {
  PoseTrackerProvider,
  WebViewPoseView,
  usePoseTracker,
} from '@pose-tracker/react-native-pose-estimation';

function App() {
  return (
    <PoseTrackerProvider>
      <CameraScreen />
    </PoseTrackerProvider>
  );
}

function CameraScreen() {
  usePoseTracker({
    onKeypoints: (e) => {
      // 17 keypoints every frame — no API key
      console.log(e.keypoints.length, e.score);
    },
  });

  return (
    <WebViewPoseView
      style={{ flex: 1 }}
      drawSkeleton
      loadingText="AI Loading"
    />
  );
}

import {
  PoseTrackerProvider,
  WebViewPoseView,
  usePoseTracker,
} from '@pose-tracker/react-native-pose-estimation-light';

function App() {
  return (
    <PoseTrackerProvider options={{ model: 'movenet' }}>
      <CameraScreen />
    </PoseTrackerProvider>
  );
}

function CameraScreen() {
  usePoseTracker({
    onKeypoints: (e) => {
      console.log(e.keypoints.length, e.score);
    },
  });

  return (
    <WebViewPoseView
      style={{ flex: 1 }}
      drawSkeleton
      loadingText="AI Loading"
      coldStart="full"
    />
  );
}

What just happened

PoseTrackerProvider creates the client (keypoints-only without apiToken).
WebViewPoseView boots MoveNet in a WebView and opens the camera (coldStart defaults to full on the camera screen).
usePoseTracker({ onKeypoints }) receives typed KeypointsEvent frames (keypoints, score, timestampMs).

Try a demo

Next

⌘I