React Native

Embedding TutAR 3D viewer in a React Native app

Prerequisites

• This guide expects a basic react native knowledge

• Get a Connect3D Vendor Account from TutAR by sending a mail at <[email protected]>.

• Generate an API key from the Connect3D dashboard

The 3D viewer can be embedded into a React native app using a web view, here we are using react-native-webview as an example but it can be replaced with any web view library of your choice.

Getting User Permissions

In order to enable the AR functionality, Make sure to take camera permission from the user.

AndroidManifest.xml

<manifest>
<!--
rest of the code
-->
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.webkit.PermissionRequest" />
    <uses-permission android:name="android.permission.INTERNET" />

<manifest>

Info.plist

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

Here we use react-native-vision-camera to request camera access.

import { useCameraPermission } from "react-native-vision-camera";

const { hasPermission, requestPermission } = useCameraPermission()

const cameraPermission = await requestPermission();

if (hasPermission) {
    // add embedding code 
}

Embedding the Viewer

Render the webview component here all the below props are recommended but the mediaCapturePermissionGrantType & allowsInlineMediaPlayback is required for using the AR functionality.

import { WebView } from "react-native-webview";

<WebView
    source={{ uri: "https://web.tutar.app?api-key=<>&user-id=<>" }}
    scrollEnabled={false}
    domStorageEnabled
    bounces={false}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback
    mediaCapturePermissionGrantType="grant"
/>