ReactNative Demo

The GlamAR Flutter SDK provides an easy way to embed GlamAR’s WebView-based Augmented Reality experience inside your Flutter applications. It enables virtual try-on for categories like makeup, jewelry, and eyewear with:

• Real-time AR preview
• Face tracking and analysis
• SKU/category application
• Snapshot support
• Simple Flutter APIs that mirror the native Android SDK

Features

• Real-time virtual try-on for multiple categories
• Camera and image-based preview modes
• WebView-based rendering (headless preload + visible attach)
• Snapshot functionality

Clone the repository

To clone the repository:

git clone https://github.com/pixelbin-io/glamar-flutter/tree/v1.0.0

You can follow a thorough guide click here

Prerequisites

To follow along you should have basic knowledge of creating web apps with Javascript, React, Android or iOS and their ecosystem. In this tutorial we are going to use:

• Your access key must be setup under Pixelbin > GlamAR console.
• Any valid SKU inside your Product Inventory under GlamAR.

Visit Getting Started Page if access key or SKU has not been created

Installation

Install dependencies

npm install

Initialization

Open the App.tsx file in the root of project and look for this function. Update the accessKey to your own key.

GlamAr.init({
  accessKey: "Your_Access_Key", // required
});

Run Locally

1. In the terminal , start the Metro bundler

npx react-native start

2. Open another terminal in parallel and run the following commands to build and run the app
   • Andorid

   npx react-native run-android
   • iOS

   npx react-native run-ios