Getting Started with the React Native SDK

Welcome to the Getting Started guide for our React Native SDK! This guide will help you set up and start using the React Native SDK in your web application. There are 2 modes that are supported by the AR Engine -

Camera Mode - Live Tryon with live camera feed
Model/Gallery Mode - Model Image based static tryon

Follow the steps below to get started.

Getting Started in Live Mode

Step 1: Installation

To begin, you need to install the AR Engine and Camera module from the collection of our modules. You can install them using npm.

npm install @mirrar-sdm/minimal-ar-react-native-sdk
# or
yarn add @mirrar-sdm/minimal-ar-react-native-sdk

Step 1: Setup a view for AR

import { ARViewComponent } from '@mirrar-sdm/minimal-ar-react-native-sdk';
import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
const AR_View = () => {
    const onARViewLoad = () => {
        
    }
    return (
        <View>
            <ARViewComponent onLoad={() => onARViewLoad()} />
        </View>
    )
}

Step 2: Setup the camera

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
AR_Manager.switchToCameraModeFromModel();

Step 3: Setup & Initialize the AR Engine

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
AR_Manager.setupAR_Engine('face');

Step 4: Setup Face or Hand Tracking depending on the type of jewellery that you want to augment.

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
AR_Manager.setupFaceTracking();
AR_Manager.setupHandTracking();

Step 6: Add jewellery

 
import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
const product = {
        id: '1', //sku or any unique identifier
        bodyPartType: 'ear', // type of body part
        renderType: '2D', // rendering type 
        asset: {
            url_2D: "image_url"
        },
        visualizationData: {
            height: 15, // height of the earring 
            xOffset: 0, // offset on x axis
            yOffset: -4 // offset on y axis
        }
    }
AR_Manager.addProduct(product);

Step 7: Remove jewellery

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
const product = {
        id: '1', //sku or any unique identifier
        bodyPartType: 'ear', // type of body part
        renderType: '2D', // rendering type 
        asset: {
            url_2D: "image_url"
        },
        visualizationData: {
            height: 15, // height of the earring 
            xOffset: 0, // offset on x axis
            yOffset: -4 // offset on y axis
        }
    }
AR_Manager.removeProduct(product);

Getting Started in Model Mode

Step 1: Installation

To begin, you need to install the AR Engine and Gallery/Model Mode module from the collection of our modules. You can install them using npm.

npm install @mirrar-sdm/minimal-ar-react-native-sdk
# or
yarn add @mirrar-sdm/minimal-ar-react-native-sdk

Step 2: Setup the Model/Gallery mode

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
AR_Manager.switchToModelModeFromCamera(modelImageUrl);

Step 3: Setup & Initialize the AR Engine

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
AR_Manager.setupAR_Engine('face');

Step 4: Setup Face or Hand Tracking depending on the type of jewellery that you want to augment.

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
AR_Manager.setupFaceTracking();
AR_Manager.setupHandTracking();

Step 6: Add jewellery

 
import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
const product = {
        id: '1', //sku or any unique identifier
        bodyPartType: 'ear', // type of body part
        renderType: '2D', // rendering type 
        asset: {
            url_2D: "image_url"
        },
        visualizationData: {
            height: 15, // height of the earring 
            xOffset: 0, // offset on x axis
            yOffset: -4 // offset on y axis
        }
    }
AR_Manager.addProduct(product);

Step 7: Remove jewellery

import { AR_Manager } from '@mirrar-sdm/minimal-ar-react-native-sdk';
 
const product = {
        id: '1', //sku or any unique identifier
        bodyPartType: 'ear', // type of body part
        renderType: '2D', // rendering type 
        asset: {
            url_2D: "image_url"
        },
        visualizationData: {
            height: 15, // height of the earring 
            xOffset: 0, // offset on x axis
            yOffset: -4 // offset on y axis
        }
    }
AR_Manager.removeProduct(product);

Introduction React Native Modules - Github