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:

JavaScript

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

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:

JavaScript

<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 to React Native

🚧

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 metro.config.js file at your project's root (the folder where node_modules is contained). In this file, edit assetExts to return the additional asset types you would like to include.

JavaScript

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: [
        ...assetExts,
        "obj",
        "mtl",
        "mp3",
        "JPG",
        "vrx",
        "hdr",
        "gltf",
        "glb",
        "bin",
        "arobject",
        "gif",
      ],
    },
  };
})();

Adding Asset Types to Expo

The only difference between this configuration and the react native configuration is the getDefaultConfig comes from expo in the expo config.

JavaScript

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts },
  } = await getDefaultConfig(__dirname);

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: [
        ...assetExts,
        "obj",
        "mtl",
        "mp3",
        "JPG",
        "vrx",
        "hdr",
        "gltf",
        "glb",
        "bin",
        "arobject",
        "gif",
      ],
    },
  };
})();