Virtual Reality (VR) has emerged as an era-defining technology that brings the real world representations through audiovisual virtual reality engulfing the senses of the viewers. The simulations created by VR technology have great roles to play across many industries and sectors.
If as a React Native developer you want to build a VR app, you can access a platform called ViroReact. This is the widely acclaimed platform for implementing VR and AR in a React Native app.
Throughout this post, we are going to explain about building a VR app by using the React Native framework and ViroReact tool.
Basic Requirements For The Developers
To begin with, a VR app project you need to have a basic and working knowledge of React Native framework. The computer developers use should also create a setup for React Native development. Secondly, for using the ViroReact tool for iOS platform you need to install the updated version of the
Xcode on your computer. For building the same for Android platforms you need to install the SDK platforms and tools.
Lastly, as you are building a VR app, having your own Google Cardboard is essential. This will help you to optimize the game display for the viewers. In the end, you need to login for the Viro Media API key that can be utilized for accessing the relevant API.
ViroReact tool which is used by React makes use of ARCore and ARKit for development. While ARCore is used for building AR apps on Android, ARKit is used for AR apps on iOS platforms. Both tools utilize the accelerometer and gyroscope of the device for mapping the surroundings as the user moves with the device. Thanks to this users can enjoy a really immersive AR experience while wandering around with the device in hand.
ARCore and ARKit do not support all devices across their respective platforms and provide support mostly for the latest flagships and a limited number of devices. Most recent devices enjoy the support of these two toolkits.
Two Principal Components of ViroReact
ViroReact, the React Native library for building VR apps offers two components, respectively as a native 3D rendering engine for rendering all objects to deliver optimum hardware performance and React components for rendering different objects, controls, and simulated scenes.
Setup and Installation
In the beginning, you need to use a React Native project created by Crowdbotics App Builder. For creating such a project you need login access by using your email address or the Github profile. After completing the login process and you land on the Create Application page, go to the Mobile App section and select the React Native template. After choosing the template click on the button
Create my app. Now in a few moments, your project is created for work.
Now for progressing with the project some of the key elements that should be already installed in your computer include Node.js, watchman (OSX/Linux only)
Python2, JDK (windows only), ngrok package installed as a global module, react-native-cli and react-viro-cli. Ensure using the latest react-viro-cli version.
Viro API and Testbed App setup
Viro platform offers developers a testbed application and you need to install the same on an actual device for testing the built project all along the way and evaluate how the app is working in an actual device. The platform for your understanding also provides some sample testbed apps created by using the ViroReact core.
You also need the Viro Media App for iOS devices and this you can download and install from the Apple App Store. For the same on the Android platform, you can install the respective app from the Play store. We already advised you to log in and create your API key for Viro React.
Once all of these are done, you just need to run the sample testbed app coming with each Viro project and for this, you have to use the CLI tool. To do this effectively you have to add the API key within the App.js file. After this is done, open a new terminal window and run npm start.
Actual App Development
After all these preliminary steps come to completion, you are ready to work on your VR project.
The Hello World app built inside the ViroReact CLI tool needs to be customized for the project. To do this, you need to drop the screen prompts on selecting the preferred rendering environment for testing AR or VR apps. As the project is about VR, we have to include the VR specific render() function right within the App.js file.
As for navigation, you have method _getVRNavigator() that will allow navigating the scenes for an ideal virtual experience. This scene navigator works as the starting point for the Viro app project. After this step is completed, within the App.js file you need to update the recently rendered scene.
Creating Scenes with Text
The Viro React apps apart from coming with rendered scenes can also appear with layers of text. For this, you only have to change the rendering function and use the ViroText component. This component allows developers to use two-dimensional text. The component offers all text-specific attributes such as main text, width, position, textAlign, font size, and many others. From the React Native Core, you can also use styling elements. On top of all these, you can also use the 3D text by utilizing a prop such as extrusion depth.
If you have already set up the testbed app you might have tested the app. In this testbed app, there is a background image that offers a countenance similar to 360 spheres. Such 360-degree spherical images are common in VR apps of all types. If you want to add the same in your current project, you need to find and download the respective assets from the web. There are many free assets for this purpose out there on the web.
For adding the image to the app project you have a Viro React API component referred to as Viro360Image. All you need to do is to import the component from react-viro. The component by using the gyroscope of the device offers a spherical 360-degree view. You need to add this component right within ViroScene.
From the above-mentioned guidelines, it is quite clear that the React Native tool called ViroReact is perfect for building robust VR apps. The toolset is complete with everything you need for building standard VR apps. React Native is increasingly becoming a popular framework for building VR apps mainly thanks to this toolset.
Olivia is the senior developer at CMARIX TechnoLabs Pvt. Ltd., a react native development company with years of experience. She loves to write on react native technical blogs and She believes in spreading tech trends. She is an avid reader and loves thinking out of the box to promote new technologies.