After reading the article of Airbnb on VR my desire to test the potential of React VR has grown exponentially, this is why I tried to write a short application in VR to recreate a simple twitter timeline.

What is React VR

React VR is a JavaScript framework developed by Oculus (Facebook) to build virtual reality applications for the Web. The framework is built on React Native and this is absolutely great for all the developers that have just start to using React and React Native.

React VR have the same react-primitive used in React Native, like <View> , <Text> , <Image> in addition to adding of its own VR-specific primitives, such as <Pano> , <Box> and implements the same flexbox-based layout and styling engine (cross-compiled from C into JavaScript).

Also React VR provides the <CylindricalPanel> component that is used for rendering 2d contents (flat) in a 3d spaces giving it a “2.5D” feel.

Start with React VR

Facebook makes available a CLI to generate a new project. Use your preferred package manager (npm or yarn) to globally install the CLI

npm install -g react-vr-cli

Now we can use the React VR CLI tool to create a new application

react-vr init TwitterVR

Well, after this we can enter inside the folder and just start the project using

npm start

Starting Develop

First, we will be creating our component folder

mkdir components

And we will create the first component to wrap the Text primitive

mkdir components/Twtext

touch index.js import React from ‘react’;

import {Text} from ‘react-vr’; //And inside the class export default class Twtext extends React.Component { render() {

return (

<Text

style={{

backgroundColor: ‘#777879’,

fontSize: 0.8,

fontWeight: ‘400’,

layoutOrigin: [0.5, 0.5],

paddingLeft: 0.2,

paddingRight: 0.2,

textAlign: ‘center’,

textAlignVertical: ‘center’,

transform: [{translate: [0, 0, -5]}],

}}>

{this.props.message}

</Text>

);

}

};

Our structure now will be like:

You will find the final code on Github

Mock the twitter timeline

To give the twitter timeline we, in this repo, don’t use the twitter official API but we will mock a twitter user_timeline API response (taker here). We will add this timeline.json inside the folder mocks and we will import it into our index.vr.js

import twitterTimeline from ‘./mocks/timeline.json’

Create the CylindricalPanel

CylindricalPanel is a special component in React VR that allows drawing the child components to the inner surface of a cylinder. This will make us able to make a fake 3d effect writing just a 2d interface. By default the cylinder will be placed at the center position of the scene.

<CylindricalPanel

layer={{

width:4096,

height: 720

}}

>

The units in React VR styling is in meters. The width property is set to 4096 meters because is the maximun width and will cover almost all 360 degrees of the scene. Also we could change the density property but we will use the default value (4680)

Adding Flexbox View

React VR use the same React Native’s flexbox-based layout and styling engine, with a few tweaks to allow transforms in 3 dimensions.

For our scope we will create a simple view to show all tweets side by side

<View

style={{

flexDirection: ‘row’,

alignItems: ‘center’,

justifyContent: ‘center’,

width:_width,

height: _height

}}

>

{boxes}

</View>

The flexDirection refers to how the container will display the items, in this case will be a row

refers to how the container will display the items, in this case will be a row The alignItems refers to how items will be laid out across the cross axis, center will have items centered on the cross axis

refers to how items will be laid out across the cross axis, will have items centered on the cross axis The justifyContent refers to how an item is laid out across the main axis, space-around means that the items would be justified evenly across the main axis and equal space around the start and end

Create tweet card

To create the tweet card we will create a new component, called Twcard in our components folder

mkdir components/Twtweet

touch components/Twteet/index.js

touch components/Twteet/style.js

The style.js will define the style of the component using the StyleSheet , this will be helpful in case of big stylesheet

Our Twcard will be very simple

import React from ‘react’;

import {View} from ‘react-vr’;

import Twimage from ‘../Twimage/’

import Twtext from ‘../Twtext/’

import style from ‘./style’ export default class Twtweet extends React.Component {

render() {

let props = this.props.tweet

return (

<View style={style.default}>

<Twimage source={{uri: props.user.profile_image_url_https }} />

<Twtext type={‘top’} message={‘@’+props.user.screen_name} /

<Twtext type={‘bottom’} message={props.text} />

</View>

);

}

};

for every card we will have:

The user image

The user nick

The tweet

The style.js of the card will be also more simple:

import {StyleSheet} from ‘react-vr’; export default styles = StyleSheet.create({

default:{

margin: 16,

width: 200,

height:200,

backgroundColor: ‘black’,

position: ‘relative’

}

});

Our card will be 200x200 meters and will have a black bacground in case the profile image is unavailable.

After creating the other components we will have an interface like this:

All the code it’s on the Github repo

Build for “production”

To build our project for a production-like environment we will just run the build script

npm run bundle

This command will create the *.bundle.js files that we will change inside our /vr/index.html file:

<body>

<script src="./build/client.bundle.js"></script>

<script>

// Initialize the React VR application

ReactVR.init(

// When you’re ready to deploy your app, update this line to point to

// your compiled index.bundle.js

‘./build/index.bundle.js’,

// Attach it to the body tag

document.body

{ assetRoot: '../static_assets/' }

);

</script>

</body>

after the document.body (the tag to attach our application), we will add the {assetRoot:'../static_assets/'} to give to the application the information for the assets path (it could be a cdn link)

Now with the /vr folder and the assets folder we will able to upload our work in a static nginx configuration like: https://thecreazy.github.io/twitter-timeline-in-react-vr/

Complete code

You can find the complete repository on github: https://github.com/thecreazy/twitter-timeline-in-react-vr

Conclusion

React vr gives you the ability, within a few hours, to create or re-use a 2D interface giving it a 3d look, but using threejs internally you can do a lot more.

The possibility of reusing an interface already written in React Native or easily bringing an interface designed for apple tv in VR should not be underestimated.

How would you be able to see netflix or a course on udemy in a no distraction environment?