Skip to main content

React Native SDK demo

This walkthrough matches the captureiq-reactnative-demo repository. For the full Web Component contract, see docs/capture-iq/captureiq.md in that repo or the Capture IQ sections linked from API references.

Clone the repository​

git clone https://github.com/pixelbin-io/captureiq-reactnative-demo.git
cd captureiq-reactnative-demo

New to Git? See GitLab’s clone a repository guide.

Prerequisites​

Node.js 20.19 and above is required. Before any npm or npx commands in this repo, switch to Node 20 (for example nvm use 20).

  • A Capture IQ api-key. Follow Getting started if needed.
  • iOS: macOS, Xcode, Ruby/Bundler for CocoaPods.
  • Android: Android SDK, emulator or device with USB debugging.

The React Native project is under rn-capture-iq/, not the repo root.

Running locally​

From the repository root (with Node 20 active):

nvm use 20
cd rn-capture-iq
npm install

iOS (macOS)​

cd ios
bundle install
bundle exec pod install
cd ..
npx react-native run-ios

Android​

With an emulator running or a device connected:

npx react-native run-android

Configure Capture IQ in the app​

  1. API key — Use your GlamAR / Capture IQ key. Replace any placeholder (for example test_your_key_here) with a real key.
  2. Bundle URL — Defaults to https://cdn.glamarz0.de/sdk/captureiq (Z0 staging; this URL is the full script). Change it only if you use another host.
  3. Tap Load CaptureIQ after editing fields so the WebView reloads with the new script URL and key.

The demo sets output.format: "dataUrl" so the bridge can pass a string suitable for <Image source={{ uri: ... }} /> without handling Blob in native code.