{"_id":"5a06037134873d0010b39208","category":{"_id":"5a06037134873d0010b391ff","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-25T23:36:45.975Z","from_sync":false,"order":0,"slug":"basics","title":"Getting Started"},"user":"57bb7e47afc18c0e00529cf3","project":"578c4badbd223d2000cc1441","parentDoc":null,"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-11-16T00:32:47.911Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Every react-viro release has a `Compatible with react-native` version\",\n  \"body\": \"This means that we have extensively tested ViroReact to work with that version of react-native. While older or newer versions of react-native may work with Viro, there may be issues or differences that cause ViroReact to not work properly with older or newer versions of react-native.\"\n}\n[/block]\n#react-viro v2.1.0 | react-viro-cli v2.1.0 (Compatible with React Native v0.49.3)\n\nViro React's v2.1.0 release coincides with the Android-only [ViroCore](https://virocore.viromedia.com/) Java API which allows Android/Java developers to write AR/VR apps using the same renderer we use in Viro React. In this release, we've updated the platform with ARCore support on Android, added a few more features and fixed some bugs detailed below.\n \n### Updates\n**Android AR Support** - We now support building AR apps on Android using the same AR components we released in v2.0.0 using Google's ARCore API on the following [devices](https://developers.google.com/ar/discover/#supported_devices).\n**Updated ARPlane** - Developers can now listen for all plane anchors found and manually select the plane they want to use (See `id` prop of [ViroARPlane](doc:viroarplane)).\n**AR Point Cloud** - The platform can now draw AR point clouds and developers can customize how it looks (See `displayPointCloud` prop of [ViroARScene](doc:viroarscene)).\n**HLS Video Support for Android** - We missed this in our previous releases, but the platform now supports HLS videos on [ViroVideo](doc:virovideo-2-compare) and [Viro360Video](doc:viro360video-1) components.\n**AR Camera Hit Test** - We added the ability to constantly perform and retrieve hit test results based on where the user is looking.\n\n### Upgrade Instructions\n\n**Updating `package.json`**\n\nYour `package.json` should like the following:\n\n```\n  \"dependencies\": {\n    \"react\": \"16.0.0-beta.5\",\n    \"react-native\": \"0.49.3\",\n    \"react-viro\": \"2.1.0\"\n  },\n  \"devDependencies\": {\n    \"babel-jest\": \"21.2.0\",\n    \"babel-preset-react-native\": \"4.0.0\",\n    \"jest\": \"21.2.1\",\n    \"react-test-renderer\": \"16.0.0-beta.5\"\n  },\n```\n\nAfter updating the file, run `npm install`\n\n**Migration from `index.ios|android.js` to single `index.js`**\n\nMove/merge your `index.ios|android.js` files into a single `index.js` file.\n\nFor legacy testbed support, update your `index.ios|android.js` files to look like the following:\n\n```\nimport { AppRegistry } from 'react-native';\nimport MainIndex from './index.js';\n\nAppRegistry.registerComponent('ViroSample', () => MainIndex);\n```\n\n**Update `React.createClass` to `create-react-class`**\n\nIn React Native 0.49.3, `React.createClass` is no longer supported, as a result, you should use the `create-react-class` drop in substitute (explained below) or migrate over to ES6 classes (one example [here](https://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes)).\n\nIn every file where `React.createClass` is present, simply add this line:\n\n```\nvar createReactClass = require('create-react-class');\n```\n\nThen simply replace usages of `React.createClass()` with `createReactClass()`.\n\n**Adding ARCore to Existing Projects**\n\nModifying `<project_root>/android/settings.gradle` by adding/updating the following lines:\n\n```\n...\ninclude ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'\nproject(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client')\n...\n```\n\nUpdate `<project_root>/android/app/build.gradle` by adding the line `compile project(':arcore_client')` in the `dependencies` section after the `compile 'com.facebook.react:react-native:+'` line.\n\n2017.11.16\n\n#react-viro v2.0.1 | react-viro-cli v2.0.1 (Compatible with React Native v0.47.2)\n\nA new release with some bug fixes! \n\n### Updates\n- Fixed bug in ViroFBX binary so now multiple animations supported. \n- Fix crash on Adreno cards caused by large UBO.\n- Fixed onFuse reticle UI so it's no longer so large.\n- Fixed onFuse crash bug that occurs due to triggering invalid delegates.\n- Fixed Stereoscopic for Mono Mode.\n\n### Upgrade Instructions\nTo use `react-viro v2.0.1` in new projects upgrade our cli by doing `npm update -g react-viro-cli`. Then do 'react viro init MyProjectName' to use the new version.\n\nFor existing projects using 2.0, upgrade the `react-viro` package to 2.0.1 in your package.json and then reinstall the react viro module: `rm -rf node_modules/react-viro && npm install` from your project directory.\n\n#react-viro v2.0.0 | react-viro-cli v2.0.0 (Compatible with React Native v0.47.2)\n\nIt's here! We're happy to announce the release of ViroReact v2.0 with support for [Augmented Reality (AR)](doc:augmented-reality-ar) w/ Apple's ARKit! That means that you, everyone you know, and everyone you don't (because we're free to use) can use ViroReact to build the AR experiences you've been dreaming of building! Don't worry VR users, we didn't forget about you either! There are a lot of features that we've added to the core ViroReact platform like a full fledged *Physics* engine and *Particle* support (iOS only for now)! Read the notes below to see what other goodies we've packed into our v2.0 release!\n\n### Updates\n\n**AR Support** - With our new Augmented Reality (AR) support, we've Augmented your world with our platform so that you can build AR stuff too! (iOS 11+ support only)\n**Physics Support** - Ever feel like you just weren't connecting with your objects? Well, with our new physics engine support, now you can! (All platforms supported!)\n**FBX Object Support** - FBX is to OBJ as cars are to horse-led carriages, it's that much better! Check out the [3D Objects](doc:3d-objects) guide. (All platforms supported!)\n**Particles Support** - Having a bad day? How about adding some confetti? Or fireworks? Or maybe some snow because you just can't wait for ski season to start? It's now a possibility with our platform! (iOS support only)\n**Shadows Support** - With Viro 1.0, we had lights. We've worked really hard, but now we also have shadows (iOS support only)\n**Animation Changes** - With Viro 2.0, we've decided to retire [ViroAnimatedComponent](doc:viroanimatedcomponent), but never fear, we've just decided to go with an `animation` prop on our components! Check out our [Animation](doc:animation) guide for more details.\n**Many Other Changes** - We've changed a whole lot, added a lot more callbacks and methods on various components. It's too long to list here, but they've all been added below!\n\nWe're looking forward to the amazing things everyone will build on the platform!\n\n*2017.09.19*\n\n#react-viro v1.1.0 | react-viro-cli v1.1.0 (Compatible with React Native v0.43)\n\n### New Features\n\n**Stereoscopic Image/Video Support** - We added support for stereoscopic 3D assets! Check out the new `stereoMode` prop for image and video components in the API References.\n**onFuse Callbacks** - Another frequently requested feature, we added onFuse callbacks to all interactable components so you can now fuse to your heart's content.\n**Image Fill Types** - Allows developers to better control the display and size of their images. Refer to [ViroImage](doc:viroimage).\n**Normal Materials** - Support for normal materials will make scenes and objects look even more realistic. Best if use in conjunction with lights.\n**Buffering Start/End Notification** - Buffering notification support for videos. Now you can display an awesome [ViroSpinner](doc:virospinner) if your videos buffer!\n**Additional SceneNavigation Functionality** - Read more about it at [Scene Navigation](doc:scene-navigation).\n** New Code Samples ** - Product Showcase and VR Media Player - We just added two more new and awesome code samples with which to play and get started! Check them out here: [Code Samples](doc:code-samples).\n\n### Fixes\n- Too many to list here, but our platform is now more stable and performs better! If you see anything, feel free to contact us or file an issue at the link at the top of this page.\n\n### Upgrade Instructions\n\nFor those of you running `react-viro v1.0.0`, the following instructions will guide you through updating your Viro project.\n\n1. In your terminal, run the command `npm update -g react-viro-cli` - this will update your react-viro-cli to the latest and will ensure that you won't need to perform this step every time you do `react-viro init`\n2. Change these dependencies in your Viro project's `package.json` file:\n  - react 15.4.2 -> 16.0.0-alpha.6\n  - react-native 0.41.2 -> 0.43.3\n  - react-viro 1.0.0 -> 1.1.0\n  - react-test-renderer 15.4.2 -> 16.0.0-alpha.6\n\n  Your package.json dependencies should now look like the following:\n  ```\n  \"dependencies\": {\n    \"react\": \"16.0.0-alpha.6\",\n    \"react-native\": \"0.43.3\",\n    \"react-viro\": \"1.1.0\"\n  },\n  \"devDependencies\": {\n    \"babel-jest\": \"19.0.0\",\n    \"babel-preset-react-native\": \"1.9.1\",\n    \"jest\": \"19.0.2\",\n    \"react-test-renderer\": \"16.0.0-alpha.6\"\n  },\n```\n3. Also in your `package.json` add the following line to the `scripts` section: `    \"prestart\": \"./node_modules/react-viro/bin/run_ngrok.sh\",`\n4. Simply run `npm install`. Once that completes, you should now be able to use our v1.1.0 features!\n\n#react-viro v1.0.0 (Compatible with react-native v0.41.2)\n\nThis is it! We've launched our v1.0.0 and with it we have Cardboard for Android/iOS, GearVR and Daydream support! We're excited for you to get started developing, so head on over to our website and [sign up](http://www.viromedia.com/signup) for a key to access Viro!\n\np.s. As with all new releases (especially one as grand as this), there may be a few small issues so bear with us as we iron out the kinks. Check out the links at the top of this page if you need to contact us.","excerpt":"","slug":"releases","type":"basic","title":"Releases"}
[block:callout] { "type": "info", "title": "Every react-viro release has a `Compatible with react-native` version", "body": "This means that we have extensively tested ViroReact to work with that version of react-native. While older or newer versions of react-native may work with Viro, there may be issues or differences that cause ViroReact to not work properly with older or newer versions of react-native." } [/block] #react-viro v2.1.0 | react-viro-cli v2.1.0 (Compatible with React Native v0.49.3) Viro React's v2.1.0 release coincides with the Android-only [ViroCore](https://virocore.viromedia.com/) Java API which allows Android/Java developers to write AR/VR apps using the same renderer we use in Viro React. In this release, we've updated the platform with ARCore support on Android, added a few more features and fixed some bugs detailed below. ### Updates **Android AR Support** - We now support building AR apps on Android using the same AR components we released in v2.0.0 using Google's ARCore API on the following [devices](https://developers.google.com/ar/discover/#supported_devices). **Updated ARPlane** - Developers can now listen for all plane anchors found and manually select the plane they want to use (See `id` prop of [ViroARPlane](doc:viroarplane)). **AR Point Cloud** - The platform can now draw AR point clouds and developers can customize how it looks (See `displayPointCloud` prop of [ViroARScene](doc:viroarscene)). **HLS Video Support for Android** - We missed this in our previous releases, but the platform now supports HLS videos on [ViroVideo](doc:virovideo-2-compare) and [Viro360Video](doc:viro360video-1) components. **AR Camera Hit Test** - We added the ability to constantly perform and retrieve hit test results based on where the user is looking. ### Upgrade Instructions **Updating `package.json`** Your `package.json` should like the following: ``` "dependencies": { "react": "16.0.0-beta.5", "react-native": "0.49.3", "react-viro": "2.1.0" }, "devDependencies": { "babel-jest": "21.2.0", "babel-preset-react-native": "4.0.0", "jest": "21.2.1", "react-test-renderer": "16.0.0-beta.5" }, ``` After updating the file, run `npm install` **Migration from `index.ios|android.js` to single `index.js`** Move/merge your `index.ios|android.js` files into a single `index.js` file. For legacy testbed support, update your `index.ios|android.js` files to look like the following: ``` import { AppRegistry } from 'react-native'; import MainIndex from './index.js'; AppRegistry.registerComponent('ViroSample', () => MainIndex); ``` **Update `React.createClass` to `create-react-class`** In React Native 0.49.3, `React.createClass` is no longer supported, as a result, you should use the `create-react-class` drop in substitute (explained below) or migrate over to ES6 classes (one example [here](https://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes)). In every file where `React.createClass` is present, simply add this line: ``` var createReactClass = require('create-react-class'); ``` Then simply replace usages of `React.createClass()` with `createReactClass()`. **Adding ARCore to Existing Projects** Modifying `<project_root>/android/settings.gradle` by adding/updating the following lines: ``` ... include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer' project(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client') ... ``` Update `<project_root>/android/app/build.gradle` by adding the line `compile project(':arcore_client')` in the `dependencies` section after the `compile 'com.facebook.react:react-native:+'` line. 2017.11.16 #react-viro v2.0.1 | react-viro-cli v2.0.1 (Compatible with React Native v0.47.2) A new release with some bug fixes! ### Updates - Fixed bug in ViroFBX binary so now multiple animations supported. - Fix crash on Adreno cards caused by large UBO. - Fixed onFuse reticle UI so it's no longer so large. - Fixed onFuse crash bug that occurs due to triggering invalid delegates. - Fixed Stereoscopic for Mono Mode. ### Upgrade Instructions To use `react-viro v2.0.1` in new projects upgrade our cli by doing `npm update -g react-viro-cli`. Then do 'react viro init MyProjectName' to use the new version. For existing projects using 2.0, upgrade the `react-viro` package to 2.0.1 in your package.json and then reinstall the react viro module: `rm -rf node_modules/react-viro && npm install` from your project directory. #react-viro v2.0.0 | react-viro-cli v2.0.0 (Compatible with React Native v0.47.2) It's here! We're happy to announce the release of ViroReact v2.0 with support for [Augmented Reality (AR)](doc:augmented-reality-ar) w/ Apple's ARKit! That means that you, everyone you know, and everyone you don't (because we're free to use) can use ViroReact to build the AR experiences you've been dreaming of building! Don't worry VR users, we didn't forget about you either! There are a lot of features that we've added to the core ViroReact platform like a full fledged *Physics* engine and *Particle* support (iOS only for now)! Read the notes below to see what other goodies we've packed into our v2.0 release! ### Updates **AR Support** - With our new Augmented Reality (AR) support, we've Augmented your world with our platform so that you can build AR stuff too! (iOS 11+ support only) **Physics Support** - Ever feel like you just weren't connecting with your objects? Well, with our new physics engine support, now you can! (All platforms supported!) **FBX Object Support** - FBX is to OBJ as cars are to horse-led carriages, it's that much better! Check out the [3D Objects](doc:3d-objects) guide. (All platforms supported!) **Particles Support** - Having a bad day? How about adding some confetti? Or fireworks? Or maybe some snow because you just can't wait for ski season to start? It's now a possibility with our platform! (iOS support only) **Shadows Support** - With Viro 1.0, we had lights. We've worked really hard, but now we also have shadows (iOS support only) **Animation Changes** - With Viro 2.0, we've decided to retire [ViroAnimatedComponent](doc:viroanimatedcomponent), but never fear, we've just decided to go with an `animation` prop on our components! Check out our [Animation](doc:animation) guide for more details. **Many Other Changes** - We've changed a whole lot, added a lot more callbacks and methods on various components. It's too long to list here, but they've all been added below! We're looking forward to the amazing things everyone will build on the platform! *2017.09.19* #react-viro v1.1.0 | react-viro-cli v1.1.0 (Compatible with React Native v0.43) ### New Features **Stereoscopic Image/Video Support** - We added support for stereoscopic 3D assets! Check out the new `stereoMode` prop for image and video components in the API References. **onFuse Callbacks** - Another frequently requested feature, we added onFuse callbacks to all interactable components so you can now fuse to your heart's content. **Image Fill Types** - Allows developers to better control the display and size of their images. Refer to [ViroImage](doc:viroimage). **Normal Materials** - Support for normal materials will make scenes and objects look even more realistic. Best if use in conjunction with lights. **Buffering Start/End Notification** - Buffering notification support for videos. Now you can display an awesome [ViroSpinner](doc:virospinner) if your videos buffer! **Additional SceneNavigation Functionality** - Read more about it at [Scene Navigation](doc:scene-navigation). ** New Code Samples ** - Product Showcase and VR Media Player - We just added two more new and awesome code samples with which to play and get started! Check them out here: [Code Samples](doc:code-samples). ### Fixes - Too many to list here, but our platform is now more stable and performs better! If you see anything, feel free to contact us or file an issue at the link at the top of this page. ### Upgrade Instructions For those of you running `react-viro v1.0.0`, the following instructions will guide you through updating your Viro project. 1. In your terminal, run the command `npm update -g react-viro-cli` - this will update your react-viro-cli to the latest and will ensure that you won't need to perform this step every time you do `react-viro init` 2. Change these dependencies in your Viro project's `package.json` file: - react 15.4.2 -> 16.0.0-alpha.6 - react-native 0.41.2 -> 0.43.3 - react-viro 1.0.0 -> 1.1.0 - react-test-renderer 15.4.2 -> 16.0.0-alpha.6 Your package.json dependencies should now look like the following: ``` "dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.43.3", "react-viro": "1.1.0" }, "devDependencies": { "babel-jest": "19.0.0", "babel-preset-react-native": "1.9.1", "jest": "19.0.2", "react-test-renderer": "16.0.0-alpha.6" }, ``` 3. Also in your `package.json` add the following line to the `scripts` section: ` "prestart": "./node_modules/react-viro/bin/run_ngrok.sh",` 4. Simply run `npm install`. Once that completes, you should now be able to use our v1.1.0 features! #react-viro v1.0.0 (Compatible with react-native v0.41.2) This is it! We've launched our v1.0.0 and with it we have Cardboard for Android/iOS, GearVR and Daydream support! We're excited for you to get started developing, so head on over to our website and [sign up](http://www.viromedia.com/signup) for a key to access Viro! p.s. As with all new releases (especially one as grand as this), there may be a few small issues so bear with us as we iron out the kinks. Check out the links at the top of this page if you need to contact us.