ReactNative Setup

GlamAR SDK enables real-time AR try-ons directly on React Native, with use of WebViews, to enhance the AR experience through live camera feed and image rendering. Use the following steps to install and configure the SDK to unlock immersive AR features.

Installation

In your React Native project, ensure that your environment is properly configured as per the React Native setup guide for your specific case.

To integrate the React Native SDK, load it via the WebView source. Follow these steps to properly set up the SDK:

Load SDK by setting the source in the WebView tag as shown below:

<WebView
  ref={webViewRef}
  source={{ uri: "https://www.glamar.io/sdk" }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mediaPlaybackRequiresUserAction={false}
  allowsInlineMediaPlayback={true}
  onLoadEnd={yourOnLoadHandler}
  onMessage={yourOnMessageHandler}
/>

We also store the reference of webview as webViewRef to use for communicating with the SDK.

If the user does not grant camera permission, do not open the SDK. Instead, handle it on the client side by providing clear instructions that camera permission is necessary for the SDK to function properly.

When the WebView loads, we need to send a post message using the WebView reference in the following format:

<WebView
  ref={webViewRef}
  // other declarations
  onLoadEnd={onLoadHandler} // On Load End Handler
/>;

// This function is triggered when the WebView finishes loading. It injects JavaScript into the WebView to post a message with a specified payload.
function onLoadHandler(e) {
  if (webViewRef.current) {
    webViewRef.current.injectJavaScript(
      `window.postMessage(${JSON.stringify(payload)}, '*');`
    );
  } else {
    console.warn("Error in onLoadHandler:", e.nativeEvent);
    // WebView is not properly set up
  }
}

Payload to initialize the SDK:

{
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "react_native"
  }
}

Replace 'YOUR_ACCESS_KEY' with your organization access key.

Event Listening

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events. The WebView listens for messages from the SDK using the handleMessage method in the WebView's onMessage event handler.

<WebView
  ref={webViewRef}
  // other declarations
  onMessage={handleMessage}
/>;

const handleMessage = (event) => {
  const message = event.nativeEvent.data;
  try {
    const parsedMessage = JSON.parse(message);
    if (parsedMessage.type === "loaded") {
      console.log("on log event logged with loaded type");
      // Once loaded event recieved we can start applying SKU's
    }
    if (parsedMessage.type === "opened") {
      console.log("on log event logged with opened type");
    }
  } catch (e) {
    console.warn("Invalid message from WebView:", message);
  }
};

applyBySku

Load a virtual try-on using the applyBySku method by passing the relevant SKU Id.

webViewRef.current?.injectJavaScript(
  `window.postMessage(${JSON.stringify(payload)}, '*');`
);

Payload

{
  "type": "applyBySku",
  "payload": {
    "skuId": "your sku id"
  }
}

Camera Permissions

Android

To handle camera permission handling for Android follow the given steps

• On Android, request camera permission using PermissionsAndroid
• In MainActivity.java, ensure onPermissionRequest grants camera access for WebView.
• Add the required permissions in AndroidManifest.xml

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

iOS

To handle camera permission handling for iOS follow the given steps

• In Info.plist, add the following key-value pair to request camera permissions:

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera for showing virtual try on's</string>

No additional WebView permission handling is needed if you are using react-native-webview.

For any other react-native integration and environement setup check React Native setup guide