Skip to main content

React Native setup

Capture IQ is still the <glamar-captureiq> Web Component. In React Native you typically load the script inside a WebView, inject HTML/JS that mounts the element, then bridge results (for example captureSuccess) to native UI with postMessage / onMessage.

The official demo follows that pattern end to end. The Web Component contract (events, config, presets) matches the browser docs; the repo also ships a copy at docs/capture-iq/captureiq.md.

icon

React Native demo project

Demo source: captureiq-reactnative-demo.

Prerequisites​

Node.js 20.19 and above is required (aligns with Capture IQ’s Vite 7 toolchain). Before any npm or npx commands in the demo repo, use Node 20, for example: nvm use 20.

  • React Native — CLI or dev client workflow you already use.
  • react-native-webview — the demo embeds Capture IQ in a WebView.
  • iOS (macOS): Xcode, CocoaPods (bundle exec pod install in ios/).
  • Android: Android Studio, emulator or USB debugging.
  • A Capture IQ api-key (test_… / live_…). See Getting started if you have not created one yet.

How the demo is structured​

The React Native app lives under rn-capture-iq/ (not the repository root). High level:

PathRole
rn-capture-iq/App.jsUI: api-key, script URL, WebView, status, image preview
rn-capture-iq/src/captureIqConfig.jsDefault Capture IQ script URL (staging CDN in the demo)
rn-capture-iq/src/captureIqHtml.jsInjected HTML/JS: load SDK, host <glamar-captureiq>, postMessage to RN

After a successful capture, the demo configures output.format: "dataUrl" so React Native can show the result in an <Image /> without moving Blob objects across the bridge.

Configuration reminders​

  • API key — Replace any placeholder with a real key from the PixelBin / GlamAR console.
  • Bundle URL — The demo defaults to the full script URL on the staging CDN (https://cdn.glamarz0.de/sdk/captureiq). Override only if you host the bundle elsewhere; the WebView loads that script, then creates the custom element and calls start() after ready.
  • Reload — Use Load CaptureIQ in the demo after editing fields so the WebView picks up changes.