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