{"_id":"5ade3c170916ec000353aba6","category":{"_id":"5ade3c170916ec000353ab99","version":"5ade3c170916ec000353ab98","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":"5ade3c170916ec000353ab98","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5ade3c170916ec000353ab99","5ade3c170916ec000353ab9a","5ade3c170916ec000353ab9b","5ade3c170916ec000353ab9c","5ade3c170916ec000353ab9d","5ade3c170916ec000353ab9e"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.6.1","version":"2.6.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. Viro React 2.6.1 was tested with React Native version 0.55.1 It's strongly recommended you use the RN version recommended in the Releases tab. Add the following to your dependencies in your package.json:\n```\n \"dependencies\": {\n    \"react\": \"16.3.1\",\n    \"react-native\": \"0.55.1\",\n    \"react-viro\": \"2.6.1\"\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. Viro React 2.6.1 was tested with React Native version 0.55.1 It's strongly recommended you use the RN version recommended in the Releases tab. Add the following to your dependencies in your package.json: ``` "dependencies": { "react": "16.3.1", "react-native": "0.55.1", "react-viro": "2.6.1" }, ``` 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.