ViroReact is a platform for developers to rapidly build native cross platform AR/VR applications using React Native.

Whether you are looking to build a new AR/VR application, or add AR/VR features to your existing applications, the ViroReact platform enables you to create powerful mobile AR/VR applications using a single code base. Write once, run everywhere!

Start Developing

In this example, we will display an application that renders a basic 3D Model of a chair in AR.

1. Create a new expo project

npx create-expo-app

2. Open the directory in terminal

3. Install `ViroReact`

npm install --save @viro-community/react-viro

4. Add Expo Config Plugin

In App.json, add `react-viro` to the plugins section

{
  "plugins": [
    [
      "@viro-community/react-viro",
      {
        "androidXrMode": [
          "GVR",
          "AR",
          "OVR_MOBILE"
        ]
      }
    ]
  ]
}

5. Add Camera Permissions

For iOS, add this code to `app.json` in the ‘ios’ key

{
  "ios": {
    "infoPlist": {
      "NSCameraUsageDescription": "$(PRODUCT_NAME) uses the camera for AR functionality"
    }
  }
}

6. Create and configure Metro Config.

Create a metro.config.js file in your project directory with the following contents. We are adding the extensions "glb" and "vrx" to list of assets.

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.assetExts.push(
	// Adds support for `.vrx`
	"vrx"
);

config.resolver.assetExts.push(
	// Adds support for `.glb`
	"glb"
);
config.resolver.assetExts.push(
	// Adds support for `.gltf`
	"gltf"
);
module.exports = config;

7. Generate native code

expo prebuild

8. Build and run application

Make sure to run the application on a physical device as ViroReact is not supported on Simulators

expo run:ios

9. Edit your App.js/tsx file to add the below code

import React, { useState } from "react";
import { StyleSheet } from "react-native";
import {
	ViroARScene,
	ViroText,
	ViroTrackingStateConstants,
	ViroARSceneNavigator,
	ViroNode,
	ViroAmbientLight,
	ViroSpotLight,
	ViroScene,
	Viro3DObject,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {
	const [text, setText] = useState("Initializing AR...");

	function onInitialized(state, reason) {
		console.log(state, reason);
		if (state === 3) {
			setText("Hello World!");
		} else if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
			// Handle loss of tracking
		}
	}

	return (
		<ViroARScene onTrackingUpdated={onInitialized}>
			<ViroText
				text={text}
				scale={[0.1, 0.1, 0.1]}
				height={1}
				width={4}
				position={[0, 0.5, -1]}
				style={styles.helloWorldTextStyle}
			/>

			<ViroAmbientLight color={"#aaaaaa"} />
			<ViroSpotLight
				innerAngle={5}
				outerAngle={90}
				direction={[0, -1, -0.2]}
				position={[0, 3, 1]}
				color="#ffffff"
				castsShadow={true}
			/>

			<Viro3DObject
				source={require("./assets/modern_chair.glb")}
				position={[0, -0.5, -1]}
				scale={[0.4, 0.4, 0.4]}
				type="GLB"
				dragType="FixedDistance"
				onDrag={() => {}} // allows user to drag 3D object around with finger
			/>
		</ViroARScene>
	);
};

export default () => {
	return (
		<ViroARSceneNavigator
			autofocus={true}
			initialScene={{
				scene: HelloWorldSceneAR,
			}}
			style={styles.f1}
		/>
	);
};

var styles = StyleSheet.create({
	f1: { flex: 1 },
	helloWorldTextStyle: {
		fontFamily: "Arial",
		fontSize: 56,
		color: "#ffffff",
		textAlignVertical: "center",
		textAlign: "center",
	},
});

Note: When starting the expo development server, you have to use

expo start --dev-client

If you run into the following issue while building iOS

No such module 'ExpoModulesCore'

Open the .xcworkspace inside `ios` directory in Xcode and from Project settings, remove arm64 from excluded architectures

Reference: Github Issue

And that's it, we now have a chair rendered in AR inside an Expo application. The same codebase can run on Android, iOS as well as Web.

Here's the result:

Next Steps

Now that you have an AR Application working with Expo, you can implement custom AR Scenes and Object models using components available in react-viro.

Checkout the documentation here.

If you are looking to integrate more native functionality in your React Native application, with Byteplexure, you can focus on tasks that actually matter and let us handle the hard part.