GuidesIssuesSupportGet API Key

Integrating with React Native Projects

ViroReact was built with React Native integration in mind. The top-level ViroSceneNavigator component was built to work alongside and with other React Native components.

An example app using React Native components combined with Viro components:

Our "Hello World" application created with react-viro init in Quick Start (Mac/Linux) also is an example of a "hybrid" React Native/ViroReact app.

Adding Viro to an Existing React Native project

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 page):
 "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.1",
    "react-viro": "2.7.3"

  1. Run npm install to install the Viro React module.
  2. Make sure you have cocoapods. Type 'brew install cocoapods' to install.
  3. Create a podfile. The podfile will go under your <project_name>/ios directory and look like the following:
target '<project name>' do
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'
  1. Run pod install from the <project_name>/ios directory to install the react-viro pods.
  2. Open the <project_name>.xcworkspace file that was created with from the 'pod install' command.
  3. In Xcode->Build Settings set 'Enable Bitcode' to 'No'.
  4. In your Info.plist file add the 'Privacy - Camera Usage Description' Key with description being 'Used for AR/VR'.
  5. Build the App.


Note: Possible linking error with vlog_is_on.oo

If you run into a linking error with vlog_is_on.oo( do the following:

a) In XCode open node_modules/react-native/third-party/glog-0.3.4/src/
b) Edit line 52, change the line to(rename v to v2): GLOG_DEFINE_int32(v2, 0, "Show all VLOG(m) messages for m <= this."
c) Edit line 55: change the line frome GLOG_DEFINE_string(vmodule... to GLOG_DEFINE_string(vmodule2...
d) Edit line 133: Change the line to const char* vmodule = FLAGS_vmodule2.c_str()
e) Recompile, the app should link.

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:

Note: If you aren't developing for Samsung Gear(OVR) you can ignore the OVR related changes specified in the Git gist.