{"_id":"5a06037234873d0010b3924a","category":{"_id":"5a06037134873d0010b39202","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"user":"578c4a62bd223d2000cc143e","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T18:29:28.276Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"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.\n\nThe ```source``` asset accepts both local and remote resources. To use a local resource, use the ```require``` function as shown:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Viro360Image source={require('./res/360_park.jpg')} />\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn debug builds, local resources are pulled from your running package server. In release builds, local resources are bundled with your application. \n\nTo use a remote resource, simply set the ```source``` URI, as in the following example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Viro360Image source={{uri:\\\"https://www.mywebsite.com/360_park.jpg\\\"}} />\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Asset naming guidelines\",\n  \"body\": \"1. The package server and asset bundler will not properly serve assets that have spaces, hyphens, parenthesis, or other symbols in their name.\\n\\n2. Assets with the same name but different extensions will not work on Android. Provide each asset a unique name.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Supported Assets\"\n}\n[/block]\nThe 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.\n\n**Image formats**: 'bmp', 'gif', 'jpg', 'jpeg', 'png', 'psd', 'svg', 'webp'\n**Video formats**: 'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm'\n**Audio formats**: 'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav'\n**Document formats**: 'html', 'pdf'\n\nIn addition, Viro adds support for 3D object assets:\n\n**3D Object formats**: obj, mtl\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"\",\n  \"body\": \"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.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Adding Asset Types\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Case Sensitivity\",\n  \"body\": \"Asset types are case sensitive! For example, 'JPG' is not supported as an extension by default, while 'jpg' is.\"\n}\n[/block]\nTo 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. For example, to add support for OBJ and MTL files, you would change rn-cli.config to the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"'use strict';\\n\\nconst blacklist = require('react-native/packager/blacklist');\\nconst path = require('path');\\n\\nmodule.exports = {\\n  getProjectRoots() {\\n    return this._getRoots();\\n  },\\n\\n  getAssetRoots() {\\n    return this._getRoots();\\n  },\\n\\n  getAssetExts() {\\n    return [\\\"obj\\\", \\\"mtl\\\"];\\n  },\\n\\n  getBlacklistRE() {\\n    return blacklist();\\n  },\\n\\n  _getRoots() {\\n    // match on either path separator\\n    if (__dirname.match(/node_modules[\\\\/\\\\\\\\]react-native[\\\\/\\\\\\\\]packager$/)) {\\n      // packager is running from node_modules of another project\\n      return [path.resolve(__dirname, '../../..')];\\n    } else if (__dirname.match(/Pods\\\\/React\\\\/packager$/)) {\\n      // packager is running from node_modules of another project\\n      return [path.resolve(__dirname, '../../..')];\\n    } else {\\n      return [path.resolve(__dirname, '.')];\\n    }\\n  },\\n\\n  getTransformModulePath() {\\n    return require.resolve('react-native/packager/transformer');\\n  },\\n\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{}\n[/block]","excerpt":"Loading resources into your scenes","slug":"importing-assets","type":"basic","title":"Assets"}

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: [block:code] { "codes": [ { "code": "<Viro360Image source={require('./res/360_park.jpg')} />", "language": "javascript" } ] } [/block] 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: [block:code] { "codes": [ { "code": "<Viro360Image source={{uri:\"https://www.mywebsite.com/360_park.jpg\"}} />", "language": "javascript" } ] } [/block] [block:callout] { "type": "warning", "title": "Asset naming guidelines", "body": "1. The package server and asset bundler will not properly serve assets that have spaces, hyphens, parenthesis, or other symbols in their name.\n\n2. Assets with the same name but different extensions will not work on Android. Provide each asset a unique name." } [/block] [block:api-header] { "title": "Supported Assets" } [/block] 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**: 'bmp', 'gif', 'jpg', 'jpeg', 'png', 'psd', 'svg', 'webp' **Video formats**: 'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm' **Audio formats**: 'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav' **Document formats**: 'html', 'pdf' In addition, Viro adds support for 3D object assets: **3D Object formats**: obj, mtl [block:callout] { "type": "info", "title": "", "body": "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." } [/block] [block:api-header] { "title": "Adding Asset Types" } [/block] [block:callout] { "type": "warning", "title": "Case Sensitivity", "body": "Asset types are case sensitive! For example, 'JPG' is not supported as an extension by default, while 'jpg' is." } [/block] 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. For example, to add support for OBJ and MTL files, you would change rn-cli.config to the following: [block:code] { "codes": [ { "code": "'use strict';\n\nconst blacklist = require('react-native/packager/blacklist');\nconst path = require('path');\n\nmodule.exports = {\n getProjectRoots() {\n return this._getRoots();\n },\n\n getAssetRoots() {\n return this._getRoots();\n },\n\n getAssetExts() {\n return [\"obj\", \"mtl\"];\n },\n\n getBlacklistRE() {\n return blacklist();\n },\n\n _getRoots() {\n // match on either path separator\n if (__dirname.match(/node_modules[\\/\\\\]react-native[\\/\\\\]packager$/)) {\n // packager is running from node_modules of another project\n return [path.resolve(__dirname, '../../..')];\n } else if (__dirname.match(/Pods\\/React\\/packager$/)) {\n // packager is running from node_modules of another project\n return [path.resolve(__dirname, '../../..')];\n } else {\n return [path.resolve(__dirname, '.')];\n }\n },\n\n getTransformModulePath() {\n return require.resolve('react-native/packager/transformer');\n },\n\n};", "language": "javascript" } ] } [/block] [block:api-header] {} [/block]