GlamAR React Native

GlamAR React Native SDK – Seamless integration of the GlamAR Web SDK into React Native apps using WebView.

🚀 Features

• Loads GlamAR Web SDK inside a WebView
• Easy API: init, applySku, applyByCategory, snapshot, reset, etc.
• Event system: photo-loaded, loaded, error, etc.
• Handles permissions (Android/iOS)
• Fully customizable layout — WebView adapts to its container

📦 Installation

1. Add the SDK

# Using npm
npm i @glamario/core-react-native

# Using yarn
yarn add @glamario/core-react-native

# Using pnpm
pnpm add @glamario/core-react-native

or manually

Download glamAR react native Package And place it in your project root.

Then update your package.json:

"dependencies": {
  "@glamario/core-react-native": "glamar-react-native.tgz"
}

2. Install Required Peer Dependencies

Ensure these exist in your app's package.json:

 "react": ">=18 <20",
  "react-native": ">=0.68.0",
  "react-native-webview": ">=11.0.0",
  "react-native-device-info": ">=10.0.0",
  "react-native-permissions": ">=3.8.0"

Then run:

npm install

3. Metro Configuration

Update your metro.config.js:

const path = require("path");
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const projectRoot = __dirname;
const appNM = (p) => path.join(projectRoot, "node_modules", p);
const defaultConfig = getDefaultConfig(projectRoot);

module.exports = mergeConfig(defaultConfig, {
  resolver: {
    nodeModulesPaths: [path.join(projectRoot, "node_modules")],
    extraNodeModules: {
      react: appNM("react"),
      "react/jsx-runtime": appNM("react/jsx-runtime"),
      "react/jsx-dev-runtime": appNM("react/jsx-dev-runtime"),
      "react-native": appNM("react-native"),
      "react-native-webview": appNM("react-native-webview"),
      scheduler: appNM("scheduler"),
      "@babel/runtime": appNM("@babel/runtime"),
    },
  },
});

📷 Camera Permissions

Android

In AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="true"/>

In MainActivity.java:

@Override
public void onPermissionRequest(final PermissionRequest request) {
    runOnUiThread(() -> request.grant(request.getResources()));
}

iOS

In Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera for virtual try-on.</string>

🧠 SDK Usage

Import

import { GlamAr, GlamArProvider } from "@glamario/core-react-native";

Initialize

GlamAr.init({
  apiKey: "YOUR_API_KEY",
  platform: "react_native",
});

Listen to Events

useEffect(() => {
  const sub1 = GlamAr.on("photo-loaded", (data) => console.log(data));
  const sub2 = GlamAr.on("loaded", () => console.log("Loaded"));

  return () => {
    sub1?.remove?.();
    sub2?.remove?.();
  };
}, []);

🔁 Full Integration Example

import React, { useEffect } from "react";
import { SafeAreaView, View, Button, StyleSheet } from "react-native";
import { GlamAr, GlamArProvider } from "@glamario/core-react-native";

export default function App() {
  useEffect(() => {
    GlamAr.init({
      apiKey: "YOUR_API_KEY",
      platform: "react_native",
    });

    const sub1 = GlamAr.on("photo-loaded", (data) => console.log(data));
    const sub2 = GlamAr.on("loaded", () => console.log("Loaded"));

    return () => {
      sub1?.remove?.();
      sub2?.remove?.();
    };
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.glamAR}>
        <GlamArProvider />
      </View>

      <View style={styles.controls}>
        <Button
          title="Apply"
          onPress={() => GlamAr.applyByCategory("sunglasses")}
        />
        <Button title="Snapshot" onPress={GlamAr.snapshot} />
        <Button title="Reset" onPress={GlamAr.reset} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  glamAR: { flex: 1 },
  controls: {
    position: "absolute",
    bottom: 20,
    left: 0,
    right: 0,
    flexDirection: "row",
    justifyContent: "space-evenly",
    zIndex: 100,
  },
});

📡 API Reference

| Method | Description | | ---------------------------------- | ------------------------------------------------ | | GlamAr.init(config) | Initializes the SDK | | GlamAr.applySku(skuId) | Applies a specific SKU | | GlamAr.applyByCategory(category) | Applies the first SKU from a category | | GlamAr.snapshot() | Captures a snapshot (fires photo-loaded event) | | GlamAr.reset() | Clears current applied items | | GlamAr.open() / close() | Opens or closes the live preview mode | | GlamAr.on(event, cb) | Registers event listeners |

🔔 Supported Events

| Event | Description | | ---------------------- | ---------------------------- | | loaded | SDK initialized | | opened, closed | Widget opened or closed | | photo-loaded | Snapshot captured | | camera-opened | Camera successfully accessed | | camera-closed | Camera stopped | | camera-failed | Error accessing camera | | subscription-invalid | API key expired or invalid | | skin-analysis | Skin analysis data received | | error | Any error from SDK |

Detailed documentation available at https://www.glamar.io/docs/

🧪 Troubleshooting

• WebView not loading: Ensure internet is available on device.
• Camera not working: Check Android/iOS permissions.
• Events not firing: Log inside handleMessage or GlamAr.on(...).

✅ License

MIT