{"_id":"5b36797811baf70003a1536c","category":{"_id":"5b36797811baf70003a1535c","version":"5b36797811baf70003a153e5","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"},"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","parentDoc":null,"version":{"_id":"5b36797811baf70003a153e5","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b17376c3b44af00030764f0","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b36797811baf70003a1535c","5b36797811baf70003a1535d","5b36797811baf70003a1535e","5b36797811baf70003a1535f","5b36797811baf70003a15360","5b36797811baf70003a15361","5b36797811baf70003a15362","5b36797811baf70003a15363","5b36797811baf70003a15364"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.8.1","version":"2.8.1"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-11-14T21:53:03.747Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"ViroReact was built with React Native integration in mind. The top-level [ViroSceneNavigator](doc:viroscenenavigator) component was built to work alongside and with other React Native components.\n\nAn example app using React Native components combined with Viro components:\n\nhttps://github.com/viromedia/ViroARSampleApp\n\nOur \"Hello World\" application created with `react-viro init` in [Quick Start (Mac/Linux)](doc:quick-start)  also is an example of a \"hybrid\" React Native/ViroReact app.\n[block:api-header]\n{\n  \"title\": \"Adding Viro to an Existing React Native project\"\n}\n[/block]\nIf you already have a React Native app and want to add Viro React as dependency you'll need to follow the following steps:\n\n**For iOS:**\n1) Edit your <project_name>/package.json to include Viro React. It's strongly recommended you use the RN version recommended in the Releases tab. Add the following to your dependencies in your package.json (for the \"react-viro\" line use the latest version of ViroReact, found in the [Release](https://docs.viromedia.com/docs/releases) page):\n```\n \"dependencies\": {\n    \"react\": \"16.3.1\",\n    \"react-native\": \"0.55.1\",\n    \"react-viro\": \"2.7.3\"\n  },\n\n```\n\n2) Run `npm install` to install the Viro React module.\n3) Make sure you have cocoapods. Type 'brew install cocoapods'  to install.\n4) Create a podfile. The podfile will go under your `<project_name>/ios` directory and look like the following:\n```\ntarget '<project name>' do\n  use_frameworks!\n  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'\n  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'\nend\n```\n5) Run pod install from the `<project_name>/ios` directory to install the `react-viro` pods. \n6) Open the `<project_name>.xcworkspace` file that was created with from the 'pod install' command.\n7) In Xcode->Build Settings set 'Enable Bitcode' to 'No'.\n8) In your `Info.plist` file add the 'Privacy - Camera Usage Description' Key with description being 'Used for AR/VR'.\n9) Build the App.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note: Possible linking error with vlog_is_on.oo\",\n  \"body\": \"If you run into a linking error with vlog_is_on.oo(https://github.com/facebook/react-native/issues/18022) do the following:\\n\\na) In XCode open node_modules/react-native/third-party/glog-0.3.4/src/vlog_is_on.cc\\nb) Edit line 52, change the line  to(rename v to v2): GLOG_DEFINE_int32(v2, 0, \\\"Show all VLOG(m) messages for m <= this.\\\"\\nc) Edit line 55: change the line frome  GLOG_DEFINE_string(vmodule... to  GLOG_DEFINE_string(vmodule2...\\nd) Edit line 133: Change the line to  const char* vmodule = FLAGS_vmodule2.c_str()\\ne) Recompile, the app should link.\"\n}\n[/block]\n**For Android:**\n\nFor Android, do the following:\n1) Do steps 1 and 2 from the the iOS instructions above if you haven't already.\n2) Go through the following git gist which shows the difference between a newly created React Native project config files and the changes needed to add Viro React. And add the proper lines to your Android Manifest and Gradle files: https://gist.github.com/achuvm/fe0136818158bec2cdf4d1cd11053f6d\n\n**Note:** If you aren't developing for Samsung Gear(OVR) you can ignore the OVR related changes specified in the Git gist.","excerpt":"","slug":"integrating-with-react-native-projects","type":"basic","title":"Integrating with React Native Projects"}

Integrating with React Native Projects


ViroReact was built with React Native integration in mind. The top-level [ViroSceneNavigator](doc:viroscenenavigator) component was built to work alongside and with other React Native components. An example app using React Native components combined with Viro components: https://github.com/viromedia/ViroARSampleApp Our "Hello World" application created with `react-viro init` in [Quick Start (Mac/Linux)](doc:quick-start) also is an example of a "hybrid" React Native/ViroReact app. [block:api-header] { "title": "Adding Viro to an Existing React Native project" } [/block] If you already have a React Native app and want to add Viro React as dependency you'll need to follow the following steps: **For iOS:** 1) Edit your <project_name>/package.json to include Viro React. It's strongly recommended you use the RN version recommended in the Releases tab. Add the following to your dependencies in your package.json (for the "react-viro" line use the latest version of ViroReact, found in the [Release](https://docs.viromedia.com/docs/releases) page): ``` "dependencies": { "react": "16.3.1", "react-native": "0.55.1", "react-viro": "2.7.3" }, ``` 2) Run `npm install` to install the Viro React module. 3) Make sure you have cocoapods. Type 'brew install cocoapods' to install. 4) Create a podfile. The podfile will go under your `<project_name>/ios` directory and look like the following: ``` target '<project name>' do use_frameworks! pod 'ViroReact', :path => '../node_modules/react-viro/ios/' pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/' end ``` 5) Run pod install from the `<project_name>/ios` directory to install the `react-viro` pods. 6) Open the `<project_name>.xcworkspace` file that was created with from the 'pod install' command. 7) In Xcode->Build Settings set 'Enable Bitcode' to 'No'. 8) In your `Info.plist` file add the 'Privacy - Camera Usage Description' Key with description being 'Used for AR/VR'. 9) Build the App. [block:callout] { "type": "info", "title": "Note: Possible linking error with vlog_is_on.oo", "body": "If you run into a linking error with vlog_is_on.oo(https://github.com/facebook/react-native/issues/18022) do the following:\n\na) In XCode open node_modules/react-native/third-party/glog-0.3.4/src/vlog_is_on.cc\nb) Edit line 52, change the line to(rename v to v2): GLOG_DEFINE_int32(v2, 0, \"Show all VLOG(m) messages for m <= this.\"\nc) Edit line 55: change the line frome GLOG_DEFINE_string(vmodule... to GLOG_DEFINE_string(vmodule2...\nd) Edit line 133: Change the line to const char* vmodule = FLAGS_vmodule2.c_str()\ne) Recompile, the app should link." } [/block] **For Android:** For Android, do the following: 1) Do steps 1 and 2 from the the iOS instructions above if you haven't already. 2) Go through the following git gist which shows the difference between a newly created React Native project config files and the changes needed to add Viro React. And add the proper lines to your Android Manifest and Gradle files: https://gist.github.com/achuvm/fe0136818158bec2cdf4d1cd11053f6d **Note:** If you aren't developing for Samsung Gear(OVR) you can ignore the OVR related changes specified in the Git gist.