Xense AR WebGL SDK Integration Guide for iOS React Native App

Download WebGL SDK

Download the WebGL SDK at the following link:

https://s3.educationxr.vn/ar-world/SDK/WebGL/XenseARWebGL.framework.zip 

iOS Native Configuration (React Native Project)

Open the .xcworkspace file inside the ios folder using Xcode.

Import Framework

1. Extract the downloaded .zip file.
2. Copy XenseARWebGL.framework into the Frameworks folder of the iOS project.
3. In Target → General → Frameworks, Libraries, and Embedded Content, set the framework to Embed & Sign.

⚠️ Warning
If the framework is not set to Embed & Sign, the application may crash at runtime due to missing binary linkage.

Add Native Bridge Files

Add the required native files to enable SDK usage within React Native.

• Create a new file: XenseARWebview.swift

    import Foundation
    import React
    import XenseARWebGL
    import UIKit
   
    @objc(XenseARWebview)
    class XenseARWebview : NSObject {
        var webView: WKWebView!
        var objcController: ViewControllerSDK!
        var webVC: UIViewController!
      
        @objc func dismissSelf() {
            self.webVC?.dismiss(animated: true, completion: nil)
            self.webVC = nil
        }
      
        @objc func addCloseButton(){
          NSLayoutConstraint.activate([
          self.webView.topAnchor.constraint(equalTo: self.webVC.view.topAnchor),
          self.webView.bottomAnchor.constraint(equalTo: self.webVC.view.bottomAnchor),
          self.webView.leadingAnchor.constraint(equalTo: self.webVC.view.leadingAnchor),
          self.webView.trailingAnchor.constraint(equalTo: self.webVC.view.trailingAnchor)
        ])
        
        let closeButton = UIButton(type: .system)
        closeButton.setTitle("X", for: .normal)
        closeButton.titleLabel?.font = UIFont.systemFont(ofSize: 28, weight: .bold)
        closeButton.setTitleColor(.white, for: .normal)
        closeButton.backgroundColor = UIColor.black.withAlphaComponent(0.6)
        closeButton.layer.cornerRadius = 25
        closeButton.translatesAutoresizingMaskIntoConstraints = false
        closeButton.addTarget(self, action: #selector(self.dismissSelf), for: .touchUpInside)
        
        self.webVC.view.addSubview(closeButton)
        
        NSLayoutConstraint.activate([
          closeButton.topAnchor.constraint(equalTo: self.webVC.view.safeAreaLayoutGuide.topAnchor, constant: 16),
          closeButton.trailingAnchor.constraint(equalTo: self.webVC.view.trailingAnchor, constant: -16),
          closeButton.widthAnchor.constraint(equalToConstant: 50),
          closeButton.heightAnchor.constraint(equalToConstant: 50)
        ])
      }
      
        func topViewController() -> UIViewController? {
            var top = UIApplication.shared.windows.first { $0.isKeyWindow }?.rootViewController
            while let presented = top?.presentedViewController {
                top = presented
            }
            return top
        }
      
        @objc
        func openWebview(_ urlString: String) {
            DispatchQueue.main.async {
            print("URL: \(urlString)");
            self.webVC = UIViewController()
            self.webVC.modalPresentationStyle = .overFullScreen
            self.webView = WKWebView(frame: UIScreen.main.bounds)
          
            self.webVC.view.addSubview(self.webView)
            self.objcController = ViewControllerSDK(view: self.webVC.view, webView: self.webView)
            self.objcController.loadURL(urlString)
          
            self.addCloseButton()
          
            if let topVC = self.topViewController() {
                topVC.present(self.webVC, animated: true, completion: nil)
                }
        }
      }
    }

  ---

• Create a new file: XenseARWebview.m

    #import <Foundation/Foundation.h>
    #import <React/RCTBridgeModule.h>
   
    @interface RCT_EXTERN_MODULE(XenseARWebview, NSObject)
        RCT_EXTERN_METHOD(openWebview:(NSString *)urlString)
    @end

  ---

• Add the following content to the Bridging Header.

    #import <React/RCTBridgeModule.h>

Open AR Experience from React Native

In the React Native project, at the screen where you want to launch the experience, add the following code snippet (adjust as needed).

  const { XenseARWebview } =NativeModules;
  const webUrl="https://s3.educationxr.vn/ar-world/Demo/XenseARWebGL/NoLog/WebXR/index.html?worldID=NoelMoMo&blockID=3e2a6da2-e248-4dd7-9f09-d5ffbaa17b31&modelScale=1.25";
  const handleOpenAR= () => {
      XenseARWebview.openWebview(webUrl);
  };

ℹ️ Info
webUrl is provided by Xense and must be configured correctly before launching the AR experience.