ViroReact Sample App

A showcase of AR capabilities using ViroReact

Features • Installation • Usage • Demos • Development

---

Overview

This is a sample application demonstrating the different uses of @reactvision/viro - a library that enables developers to rapidly build AR (Augmented Reality) and VR (Virtual Reality) experiences using React Native. This repo contains old samples which we recently began updating. Not all samples are back to full functionality so please check the table below to see the status of samples.

Features

Current Overview

Demo Name	Type	Status	Description
AR Sample	AR	✅	A demo scene demonstrating the basics.
AR Car Marker	AR	✅	Place a 3D Car Model on top of a tracker image.
AR Car Driving	AR	✅	An interactive AR driving experience.
AR Poster Demo	AR	❌	Perform some 3D interactions with a poster in the real world.
AR Image Tracking	AR	❌	Continuously Track and Display Details near a 2D Image
360° Photo Tour	VR	❌	Demo scenes demonstrating the basics.
Human Body 3D	VR	❌	View 3D Models of Human Body Parts in VR
VR Media Player	VR	❌	A VR theater experience
Product Showcase	VR	❌	View 3D Models of Products in VR

Prerequisites

Before you begin, ensure you have the following installed:

• Expo CLI (installed automatically with the project)
• ARCore-compatible Android device or ARKit-compatible iOS device

Device Requirements

• Android: Device with ARCore support (Android 7.0 or higher)
• iOS: Device with ARKit support (iOS 11.0 or higher)

⚠️ Note: AR features require a physical device. Emulators/simulators do not support AR functionality.

Installation

1. Clone the repository

   git clone https://github.com/ReactVision/sample-app.git
   cd sample-app

2. Install dependencies

   npm install
   # or
   yarn install

Usage

Development Mode

Run on Android

npm run android
# or
expo run:android

Run on iOS

npm run ios
# or
expo run:ios

Project Structure

sample-app/
├── App.tsx                      # Main app component with navigation
│
├── Screens/
│   ├── Home.tsx                # Home screen with demo list
│   │
│   ├── ARSample/
│   │   ├── ARSample.tsx        # Basic AR objects demo
│   │   └── assets/             # 3D models and textures for AR Sample
│   │
│   ├── ARCarMarker/
│   │   ├── ARCarMarker.tsx     # Image marker AR demo
│   │   └── assets/             # Car model and target image
│   │
│   └── ARDrivingCarDemo/
│       ├── ARDrivingCar.tsx    # Main driving demo component
│       ├── ARDrivingCarScene.tsx # AR scene logic
│       ├── Joystick.tsx        # Custom joystick control
│       └── res/                # Models, textures, sounds, HDR
│
├── assets/                     # App-level assets
│   ├── adaptive-icon.png
│   ├── icon.png
│   └── splash-icon.png

Development

Adding a New Demo

1. Create a new screen component

   // Screens/MyNewDemo/MyNewDemo.tsx
   import React from "react";
   import { ViroARSceneNavigator } from "@reactvision/react-viro";
   
   const MyNewDemo = () => {
       return <ViroARSceneNavigator initialScene={{ scene: MyARScene }} />;
   };
   
   function MyARScene() {
       return <ViroARScene>{/* Your AR content here */}</ViroARScene>;
   }
   
   export default MyNewDemo;

2. Register the route in App.tsx

   import MyNewDemo from "./Screens/MyNewDemo/MyNewDemo";
   
   // Add to Stack.Navigator
   <Stack.Screen name="MyNewDemo" component={MyNewDemo} />;

3. Add to the demo list in Home.tsx

   {
     id: "X",
     title: "My New Demo",
     description: "Description of what it does",
     badge: "AR",
     screen: "MyNewDemo",
     available: true,
   }

Resources

Documentation

• React Viro Official Docs

Learning Materials

• React Viro Samples
• ARCore Developer Guide
• ARKit Developer Guide

Community

• React Viro Discord
• GitHub Issues

Future Work

Contributions are welcome! Just open a PR with your demo implementation or improvements to existing ones.

License

Please refer to the React Viro License for details.

Acknowledgments

• React Viro Team - For the amazing AR/VR framework

---

Built with ❤️ using ViroReact

⬆ Back to Top