Introduction to React 360

Paul Halliday

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.

↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site 🙏

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.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#