> ## Documentation Index
> Fetch the complete documentation index at: https://docs.posetracker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebViewPoseView (React Native SDK)

> SDK camera component props — not the hosted iframe. Boot UI, camera/video/image, skeleton overlay.

`WebViewPoseView` is the **React Native SDK** camera surface. It runs MoveNet inside `react-native-webview`. It is **not** `https://app.posetracker.com/pose_tracker/tracking`. For that embed, see [WebView quickstart](/webview/quickstart).

Must be used under `PoseTrackerProvider`. Peer: `react-native-webview`.

```tsx theme={null}
<WebViewPoseView
  style={{ flex: 1 }}
  drawSkeleton
  loadingText="AI Loading"
  coldStart="full"
/>
```

Uploaded media (host picks the file — e.g. `expo-image-picker` / document picker):

```tsx theme={null}
<WebViewPoseView source="image" sourceUri={fileUri} style={{ flex: 1 }} />
<WebViewPoseView source="video" sourceUri={fileUri} style={{ flex: 1 }} />
// or: sourceBase64 + sourceMime (data URL injected into the page)
```

## Props

| Prop | Type | Default | Notes |
| - | - | - | - |
| `style` | `StyleProp<ViewStyle>` | — | RN layout (typically `{ flex: 1 }` on the camera screen). |
| `position` | `'front' \| 'back'` | `'front'` | Mapped to `getUserMedia` `facingMode` (`user` / `environment`). |
| `source` | `'camera' \| 'video' \| 'image'` | `'camera'` | Input mode. Camera uses `getUserMedia`; video/image need `sourceUri` or `sourceBase64`. |
| `sourceUri` | `string` | — | `file://`, `content://`, `https://`, or `data:` URL for video/image. |
| `sourceBase64` | `string` | — | Raw base64 (no `data:` prefix); used with `sourceMime`. |
| `sourceMime` | `string` | image/jpeg or video/mp4 | MIME for `sourceBase64`. |
| `drawSkeleton` | `boolean` | `true` | In-page skeleton overlay (WebView `skeleton=true\|false`). Pass `false` if you draw from `onKeypoints`. |
| `drawPlacementBox` | `boolean` | `true` | Placement guide while `posture.ready === false` (WebView `postureBox`). RN sibling overlay. |
| `placementPaddingPercent` | `number` | `10` | Inset % on each edge (engine posture padding parity). |
| `coldStart` | `'basic' \| 'full'` | `'full'` | `full` = open camera after warm-up (camera screen). `basic` = model only — lobby / hidden warmer, **no** permission. |
| `loadingText` | `string` | `"AI Loading"` | Branded boot label (WebView `loading_message`). Technical progress goes to `initialization` events, not this UI. |
| `showWatermark` | `boolean` | plan-derived | Omit for automatic: shown keyless/`free`; hidden paid. Always off for `coldStart: 'basic'`. |
| `skeletonDef` | `SkeletonDefinition \| null` | PoseTracker navy+gold | Inline overlay theme. Takes precedence over `skeletonUuid`. |
| `skeletonUuid` | `string \| null` | — | Strapi skeleton `api_uuid` (WebView `?skeleton=<uuid>`). Fetched via SDK API. Ignored if `skeletonDef` is set. |
| `onPose` | `(pose, stats) => void` | — | Low-level pose + `{ inferenceTimeMs, timestampMs }` from the WebView backend. Prefer `usePoseTracker({ onKeypoints })` for app UI. |
| `children` | `ReactNode` | — | Rendered as siblings over the WebView (HUD, CTAs). |

## Defaults that matter

| Use case | Recommended props |
| - | - |
| Camera screen | omit `coldStart` (→ `full`), `drawSkeleton` |
| Uploaded image | `source="image"` + `sourceUri` (host file picker) |
| Uploaded video | `source="video"` + `sourceUri` |
| Lobby warmer (1×1) | `coldStart="basic"`, hide with opacity / size |
| Custom brand overlay | `drawSkeleton={false}` + draw from `onKeypoints` |
| Custom skeleton theme | `skeletonUuid="…"` or `skeletonDef={{ … }}` |

### Limitations (video / image)

* The **host app** must obtain the file URI / base64 (SDK does not ship a picker).
* Android `content://` URIs may need the WebView to be able to read them; prefer copying to a `file://` cache path or passing `sourceBase64` for large reliability gaps.
* Remote `https` media is subject to WebView / CORS rules.
* Image mode emits keypoints once per load (or when the page receives `__PT_ANALYZE`).

## SkeletonDefinition (shape)

When using `skeletonDef`, fields match the Strapi / Front default:

| Field | Notes |
| - | - |
| `keypoints` | Joint names to draw |
| `keypoint_lines` | Pairs like `"left_hip\|\|left_knee"` |
| `circles` | `circleFillColor`, `circleStrokeColor`, `strokeWidth`, `radius` |
| `lines` | `lineStrokeColor`, `strokeWidth` |
| `keypoint_angles` / `angles` | Optional angle labels |

Default palette: navy `#010A73` + gold `#FFC300`.

## Boot UI & watermark

Until the live camera surface is ready (`coldStart: 'full'`), the page shows a branded cover (logo + spinner + `loadingText`). The yellow `#hud` FPS overlay is **off by default** (internal debug).

Watermark (live overlay, bottom-right):

| Plan | Watermark |
| - | - |
| No API key | Shown |
| `free` | Shown |
| Paid (`developer`, `company`, `enterprise`, …) | Hidden |

Override with `showWatermark`. Plan upgrades after `configure()` update the mark without remounting.

## Related

* [Media sources](/media-sources) — camera / video / image across RN + web
* [Permissions](/permissions) — host must request camera before `coldStart="full"`
* [Preload lifecycle](/advanced/preload) — hidden `basic` warmer pattern
* [Provider & client](/reference/provider-client)
* [WebView vs SDK](/choose-integration)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.