Introduction to React 360

Published on March 7, 2019
Introduction to React 360

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

React 360 (or React VR) is a library used to create virtual reality experiences with React and uses Three.js for rendering. As it is a React project, the API should be familiar to those that already know React.

Usage of React 360 is similar to that of React Native, it is a library that uses custom components and does not interface with the DOM as we know it.

Installing the React 360 CLI

Firstly, ensure that you have Node.js installed on your machine. Next, we’ll need to download the React 360 CLI from npm:

$ npm install -g react-360-cli

We’ll now be able to use react-360 globally on our machine.

Create a new project

Using the CLI, we can create a new project with the init command:

$ react-360 init hello-vr

$ cd hello-vr

$ code .

$ npm run start

This’ll create a new directory named hello-vr and scaffold a new project here. By running npm run start inside of this directory, we’re starting the Metro bundler and our application appears at http://localhost:8081/index.html

Screenshot: our starting app

You can hold down the left mouse button to pan around the screen. React 360 (as referenced by the name) is built to work with 180-360 degree equirectangular photos/videos, and the power of this can be seen with the starting project.

It also comes with a variety of inbuilt UI components that we can use. Examples of these are: View, Image, Entity, and VrButton.


Let’s take a look at how this works by diving into client.js:

import { ReactInstance } from 'react-360-web';

function init (bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen : true,

  // Render your app content to the default cylinder surface
        /* initial props */

  // Load the initial environment

window.React360 = { init };

We’re setting the root with r360.createRoot to the hello_vr React component found in index.js, note how this is referenced by string name.

We can interact with the environment by using the VrButton component:

import React from 'react';
import { AppRegistry, StyleSheet, Text, View, VrButton } from 'react-360';

export default class hello_vr extends React.Component {
  state = {
    counter : 0

  _incrementCounter = () => {
      counter : (this.state.counter += 1)

  render () {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <VrButton onClick={this._incrementCounter}>
            <Text style={styles.greeting}>You've clicked me {this.state.counter} times.</Text>

const styles = StyleSheet.create({
  panel       : {
    // Fill the entire surface
    width           : 1000,
    height          : 600,
    backgroundColor : 'rgba(255, 255, 255, 0.4)',
    justifyContent  : 'center',
    alignItems      : 'center'
  greetingBox : {
    padding         : 20,
    backgroundColor : '#000000',
    borderColor     : '#639dda',
    borderWidth     : 2
  greeting    : {
    fontSize : 30

AppRegistry.registerComponent('hello_vr', () => hello_vr);

Each time that we click the button, our counter is increased:

Screenshot: counter increased


To generate a production build for our React 360 project, run the following in your terminal:

$ npm run bundle

You should then be able to access your newly build production files in ./build.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel