The Viro Developer Hub

Welcome to the Viro developer hub. You'll find comprehensive guides and sample code to help you start working with Viro as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Assets

Loading resources into your scenes

Assets are text or binary resources that are needed for your app. These include images, textures, sounds, videos, and more. For the vast majority of components, including <ViroImage>, <ViroSound>, <ViroVideo>, and more, the asset to be used is specified via the source attribute.

The source asset accepts both local and remote resources. To use a local resource, use the require function as shown:

<Viro360Image source={require('./res/360_park.jpg')} />

In debug builds, local resources are pulled from your running package server. In release builds, local resources are bundled with your application.

To use a remote resource, simply set the source URI, as in the following example:

<Viro360Image source={{uri:"https://www.mywebsite.com/360_park.jpg"}} />

Asset naming guidelines

  1. The package server and asset bundler will not properly serve assets that have spaces, hyphens, parenthesis, or other symbols in their name.

  2. Assets with the same name but different extensions will not work on Android. Provide each asset a unique name.

Supported Assets

The following assets are supported out of the box by React Native, meaning they will be bundled with your application in release mode, and vended by your package server in debug mode.

Image formats: 'jpg', 'jpeg', 'png', 'gif'
Video formats: 'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm'
Audio formats: 'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav'

In addition, Viro adds support for 3D object assets:

3D Object formats: obj, mtl, vrx (Viro Custom 3d model format), gltf, glb, bin, arobject

Viro adds support for these formats only for projects created through the react-viro-cli script. For projects not created with this script, these formats must be added manually, as per the next section.

Adding Asset Types

Case Sensitivity

Asset types are case sensitive! For example, 'JPG' is not supported as an extension by default, while 'jpg' is.

To add additional asset types, edit (or create if it does not exist) the rn-cli.config file at your project's root (the folder where node_modules is contained). In this file, edit getAssetExts() to return the additional asset types you would like to include.

'use strict';

const blacklist = require('react-native/packager/blacklist');
const path = require('path');

module.exports = {
  getProjectRoots() {
    return this._getRoots();
  },

  getAssetRoots() {
    return this._getRoots();
  },

  getAssetExts() {
    return ["obj", "mtl", "JPG", "vrx", "hdr", "gltf", "glb", "bin", "arobject", "gif"];
  },

  getBlacklistRE() {
    return blacklist();
  },

  _getRoots() {
    // match on either path separator
    if (__dirname.match(/node_modules[\/\\]react-native[\/\\]packager$/)) {
      // packager is running from node_modules of another project
      return [path.resolve(__dirname, '../../..')];
    } else if (__dirname.match(/Pods\/React\/packager$/)) {
      // packager is running from node_modules of another project
      return [path.resolve(__dirname, '../../..')];
    } else {
      return [path.resolve(__dirname, '.')];
    }
  },

  getTransformModulePath() {
    return require.resolve('react-native/packager/transformer');
  },

};

Assets


Loading resources into your scenes

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.