Skip to main content

ReactNative Setup

As you follow this tutorial, we recommend using our demo project reference to assist you in integrating the SDK into your project.

icon

React Native Demo Project

Prerequisites​

To follow along you should have basic knowledge of creating web apps with Javascript and it's ecosystem. In this tutorial we are going to use:

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

Installation​

Once you have obtained your access key and an appId, you're ready to integrate the GlamAR SDK into your project. This can be achieved through two primary methods:

  1. Installing it from NPM
  2. Manually download the latest GlamAr Package place it in your project root.

NPM​

Add GlamAR React Native SDK to your project using npm:

npm i @glamario/core-react-native

Then you can simply import GlamAR SDK as follows

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

Because we use ES2017 syntax (such as import), this workflow assumes you are using a modern browser or a bundler/transpiler to convert your code to something older browsers understand. However, you are free to use any build tool that you prefer.

Manual download​

Download latest GlamAr Package

Then update your package.json:

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

Once GlamAr SDK is setup now make sure you have the following peer dependencies in your project'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"

Once all these dependencies are setup run following command

npm install

Metro Configuration​

React Native uses Metro to build your JavaScript code and assets. 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​

To handle camera permission handling for Android follow the given steps

  • On Android, request camera permission using PermissionsAndroid
  • Add the required permissions in AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="true"/>
  • In MainActivity.java, ensure onPermissionRequest grants camera access.
@Override
public void onPermissionRequest(final PermissionRequest request) {
    runOnUiThread(() -> request.grant(request.getResources()));
}

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

Basic Functions​

skinAnalysis​

Launch Skin Analysis follow

GlamAr.skinAnalysis('start');

on​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.

const subscriptions = [];

["loaded", "skin-analysis", "error"].forEach((event) => {
  const sub = GlamArEmitter.on(event, (payload) => {
    console.log(`Event: ${event}`, payload);
  });
  subscriptions.push(sub);
});

// cleanup
subscriptions.forEach((sub) => sub.remove());

After calling init, best practise is to wait to receive the event "loaded" before calling any other function