{"_id":"5b18d58b180d310003a74e4b","project":"578c4badbd223d2000cc1441","version":{"_id":"5b17376c3b44af00030764f0","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b1703c7039ee2000354f000","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b17376c3b44af0003076468","5b17376c3b44af0003076469","5b17376c3b44af000307646a","5b17376c3b44af000307646b","5b17376c3b44af000307646c","5b17376c3b44af000307646d","5b17376c3b44af000307646e","5b17376c3b44af000307646f","5b17376c3b44af0003076470"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.7.3","version":"2.7.3"},"category":{"_id":"5b17376c3b44af0003076469","version":"5b17376c3b44af00030764f0","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-03-17T18:59:29.780Z","from_sync":false,"order":1,"slug":"getting-started-ios","title":"iOS - Platform Setup"},"user":"579fce4e1435850e00dfbbbb","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-06-07T06:49:47.339Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"This documentation was adapted from React Native's [Integration with Existing Apps](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html) guide.\n\nThe instructions below explain how to integrate ViroReact with your existing iOS Swift based project. We use the following Github project as an example: https://github.com/austinzheng/swift-2048.\n\nWe'll take this app and modify it by adding a ViroReact AR view to the application. This doc will show you how to:\n1) Add React Native and ViroReact to your existing Swift application.\n2) Launch ViroReact from your existing Swift Application.\n3) Pass parameters from your native app to Viro.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note the following has been tested with React Native 0.55.1, XCode 9 and Swift Ver. 4\",\n  \"body\": \"There are no guarantees the following will work when using different versions of the above dependencies.\"\n}\n[/block]\n## Checkout an existing Swift app\n\nSince we're modifying the [iOS-2048](https://github.com/austinzheng/swift-2048) app, we'll need to pull it down. From your terminal, navigate to where you'd like to check out the project and run:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"git clone https://github.com/austinzheng/swift-2048\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nThis should pull the repository down into an `iOS-2048` directory.\n\n## Adding package.json and node_modules to your project.\n\n### package.json\n\nIn the root of the project (`/iOS-2048/`) create a file with the following content and name it `package.json`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"name\\\": \\\"MyReactNativeApp\\\",\\n  \\\"version\\\": \\\"0.0.1\\\",\\n  \\\"private\\\": true,\\n  \\\"scripts\\\": {\\n    \\\"start\\\": \\\"node node_modules/react-native/local-cli/cli.js start\\\"\\n  },\\n  \\\"dependencies\\\": {\\n    \\\"react\\\": \\\"16.3.1\\\",\\n    \\\"react-native\\\": \\\"0.55.1\\\",\\n    \\\"react-viro\\\": \\\"2.7.3\\\"\\n  }\\n}\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nAfter you've added the file, run the follow command at the project root:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n## Podfiles\n\nSince this project does not already use Cocoapods, we'll create a new podfile under the project root. Type the following at the command line:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"pod init\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nEdit your Podfile to look like the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"platform :ios, '9.3'\\nuse_frameworks!\\n\\n# The target name is most likely the name of your project.\\ntarget 'swift-2048' do\\n\\n  # Your 'node_modules' directory is probably in the root of your project,\\n  # but if not, adjust the `:path` accordingly\\n  pod 'React', :path => './node_modules/react-native', :subspecs => [\\n    'Core',\\n    'CxxBridge', # Include this for RN >= 0.47\\n    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43\\n    'RCTText',\\n    'RCTNetwork',\\n    'RCTWebSocket', # needed for debugging\\n    # Add any other subspecs you want to use in your project\\n  ]\\n  # Explicitly include Yoga if you are using RN >= 0.42.0\\n  pod \\\"yoga\\\", :path => \\\"./node_modules/react-native/ReactCommon/yoga\\\"\\n\\n  # Third party deps podspec link\\n  pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'\\n  pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'\\n  pod 'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'\\n  \\n  # Viro Dependencies\\n  pod 'ViroReact', :path => './node_modules/react-viro/ios/'\\n  pod 'ViroKit', :path => './node_modules/react-viro/ios/dist/ViroRenderer/'\\nend\\n\",\n      \"language\": \"yaml\"\n    }\n  ]\n}\n[/block]\n### Editing React Native Podfiles\nNow this is where things get a bit tricky. Ideally here you'd run ```pod install``` and we can move on to integration code.  These steps are needed to get React Native 0.55.1 working with Swift. Hopefully in future React Native releases they won't be needed.\n\n**1)** Modify the yoga.podspec under node_modules/react-native/ReactCommon/yoga/yoga.podspec\n    Add the following line to the podspec: \n\n   ```spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h' ```\n\n **2)** Edit the node_modules/react-native/React.podspec.\n     Edit the 'Core' subspec field  ```ss.exclude_files``` and add the following as files to be excluded: \n    ```\"React/Fabric/*\". ```\n\n### Run Pod Install\nFrom the command line type ```pod install``` to install the pods. \n\n## Adding React Javascript App Code\nNow let's add a sample example AR app written in Javascript and React that will connect to our existing app. Our app will consist of two files, index.js and TestScene.js\n\n## index.js\nFirst will be our index.js that will be in our project root directory:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"'use strict';\\n\\nimport React, { Component } from 'react';\\n\\nimport { AppRegistry } from 'react-native';\\n\\nimport {\\n  ViroARSceneNavigator,\\n} from 'react-viro';\\n\\nvar createReactClass = require('create-react-class');\\n\\nvar HelloWorldScene = require('./js/TestScene');\\n\\nvar ViroSample = createReactClass({\\n  render: function() {\\n    // The 'viroAppProps={{...this.props}}' line below is used to pass\\n    // the initial properties from this base component to the ViroARSceneNavigator\\n    // which will allow the scenes to access them.\\n    let viroAppProps = {...this.props};\\n    \\n    return (\\n      <ViroARSceneNavigator\\n        initialScene={{\\n          scene: HelloWorldScene,\\n        }}\\n        viroAppProps={viroAppProps}\\n        apiKey={\\\"API_KEY_GOES_HERE\\\"}\\n      />\\n    );\\n  }\\n});\\n\\nAppRegistry.registerComponent('RNHighScores', () => ViroSample);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n### TestScene.js\n\nThe index.js file will load TestScene.js initially. This file will be located under the js/TestScene.js from your project root. This scene will just display the high score text in front us in AR:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"'use strict';\\n\\nimport React, { Component } from 'react';\\n\\nimport {StyleSheet} from 'react-native';\\n\\nimport {\\n  ViroARScene,\\n  ViroText,\\n} from 'react-viro';\\n  \\nvar createReactClass = require('create-react-class');\\n\\nvar TestScene = createReactClass({\\n\\n  render: function() {\\n   \\n    var highScore = \\\"High Score: \\\" + this.props.sceneNavigator.viroAppProps.highScore;\\n    return (\\n     <ViroARScene>\\n       <ViroText width={2} text={highScore} style={styles.helloWorldTextStyle} position={[0, 0, -4]} />\\n     </ViroARScene>\\n    );\\n  },\\n});\\n\\nvar styles = StyleSheet.create({\\n helloWorldTextStyle: {\\n    fontFamily: 'Arial',\\n    fontSize: 30,\\n    color: '#ffffff',\\n    textAlignVertical: 'center',\\n    textAlign: 'center',\\n  },\\n});\\n\\nmodule.exports = TestScene;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Modify Native Code\nAlmost there. Now open up the XCode workspace created after running pod install, ```swift-2048.xcworkspace```\n\nModify the React Native files in your project:\n**1)** Open the file ```RCTReconnectingWebSocket.m```. In the file search for the following ```#import \"<fishhook/fishhook.h>\"  ``` and rename the import to ```#import \"fishhook.h\"  ```.\n\n**2)** Open the file ```RCTSurfaceSizeMeasureMode.h``` and search for the following block:\n```\nRCT_EXTERN void RCTSurfaceMinimumSizeAndMaximumSizeFromSizeAndSizeMeasureMode(\n  CGSize size,\n  RCTSurfaceSizeMeasureMode sizeMeasureMode,\n  CGSize &minimumSize,\n  CGSize &maximumSize\n);\n```\n\nAdd an **#ifdef __cplusplus** around the block so the code looks like:\n```\n#ifdef __cplusplus\nRCT_EXTERN void RCTSurfaceMinimumSizeAndMaximumSizeFromSizeAndSizeMeasureMode(\n  CGSize size,\n  RCTSurfaceSizeMeasureMode sizeMeasureMode,\n  CGSize &minimumSize,\n  CGSize &maximumSize\n);\n#endif\n```\n## Modify Xcode Build Settings\n1) Goto to the project target in Xcode. Under 'Build Settings', set the the 'Enable Bitcoin' flag to 'No'.\n2) Find the Info.plist file for the project under Supporting files. In Xcode, add the NSCameraUsageDescription property to the Info.plist. This flag is also known as 'Privacy - Camera Usage Description'. Add 'For AR' as the description or whatever description you think fits. \n\n## Adding a React Root Controller\nNow we are finally ready to add our Viro React component to our app! \n\nNow open the ```ViewController.swift``` file in XCode, and add the following function:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \":::at:::IBAction func highScoreButtonTapped(_ sender : UIButton) {\\n   // our code to start React Native will go here. \\n}\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\n\nEdit the ```Main.Storyboard```, cut and paste the Start Game text and create new Text called 'High Score'.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8d58baf-Screen_Shot_2018-06-07_at_10.20.53_AM.png\",\n        \"Screen Shot 2018-06-07 at 10.20.53 AM.png\",\n        1592,\n        1028,\n        \"#dededd\"\n      ]\n    }\n  ]\n}\n[/block]\nHook up the ```highScoreButtonTapped``` function to our High Score Text in Interface Builder like below:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c124161-Screen_Shot_2018-06-07_at_2.53.46_PM.png\",\n        \"Screen Shot 2018-06-07 at 2.53.46 PM.png\",\n        716,\n        806,\n        \"#363636\"\n      ]\n    }\n  ]\n}\n[/block]\nNow our text is hooked up to the function and will execute on tap. Let's fill in the method ```highScoreButtonTapped```. Below we add code to the function that creates our root React View, attaches that view to a new UIViewController and invokes our javascript module which is called \"RNHighScores\". This will present our AR View over the current UIViewController. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" @IBAction func highScoreButtonTapped(_ sender : UIButton) {\\n  var jsCodeLocation = URL(string: \\\"http://10.57.107.245:8081/index.bundle?    platform=ios\\\")\\n#if !DEBUG\\n        jsCodeLocation = Bundle.main.url(forResource: \\\"main\\\", withExtension: \\\" jsbundle\\\")\\n#endif\\n    let mockData:NSDictionary = [\\\"highScore\\\": \\\"40\\\"]\\n    \\n    let rootView = RCTRootView(\\n        bundleURL: jsCodeLocation,\\n        moduleName: \\\"RNHighScores\\\",\\n        initialProperties: mockData as [NSObject : AnyObject],\\n        launchOptions: nil\\n    )\\n    let vc = UIViewController()\\n    vc.view = rootView\\n    self.present(vc, animated: true, completion: nil)\\n  }\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nMake sure to fill in the proper IP address in the above code if you are in Debug. \n\nNow to run your app do the following:\n**1)** Goto your terminal. In your project directory type ```npm start``` to start the packager.\n**2)** In XCode, goto your app and run your application. Now compile and run! \n\nWhen the app launches, tap the high scores text and React Native will launch with a Viro AR View that displays the high score text :)\n\n## Building for Production\n\nWhen you are ready to build for release, there is one more step needed. You'll need to add a bundle step to build your assets for release. Selected the project target, goto 'Build Phases', add the following Build Phase called ** 'Bundling for React Native'**:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"export NODE_BINARY=node\\n../node_modules/react-native/scripts/react-native-xcode.sh\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"integrating-existing-projectsios-swift","type":"basic","title":"Integrating Existing Projects(iOS - Swift)"}

Integrating Existing Projects(iOS - Swift)


This documentation was adapted from React Native's [Integration with Existing Apps](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html) guide. The instructions below explain how to integrate ViroReact with your existing iOS Swift based project. We use the following Github project as an example: https://github.com/austinzheng/swift-2048. We'll take this app and modify it by adding a ViroReact AR view to the application. This doc will show you how to: 1) Add React Native and ViroReact to your existing Swift application. 2) Launch ViroReact from your existing Swift Application. 3) Pass parameters from your native app to Viro. [block:callout] { "type": "info", "title": "Note the following has been tested with React Native 0.55.1, XCode 9 and Swift Ver. 4", "body": "There are no guarantees the following will work when using different versions of the above dependencies." } [/block] ## Checkout an existing Swift app Since we're modifying the [iOS-2048](https://github.com/austinzheng/swift-2048) app, we'll need to pull it down. From your terminal, navigate to where you'd like to check out the project and run: [block:code] { "codes": [ { "code": "git clone https://github.com/austinzheng/swift-2048", "language": "text" } ] } [/block] This should pull the repository down into an `iOS-2048` directory. ## Adding package.json and node_modules to your project. ### package.json In the root of the project (`/iOS-2048/`) create a file with the following content and name it `package.json`. [block:code] { "codes": [ { "code": "{\n \"name\": \"MyReactNativeApp\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node node_modules/react-native/local-cli/cli.js start\"\n },\n \"dependencies\": {\n \"react\": \"16.3.1\",\n \"react-native\": \"0.55.1\",\n \"react-viro\": \"2.7.3\"\n }\n}", "language": "text" } ] } [/block] After you've added the file, run the follow command at the project root: [block:code] { "codes": [ { "code": "npm install", "language": "text" } ] } [/block] ## Podfiles Since this project does not already use Cocoapods, we'll create a new podfile under the project root. Type the following at the command line: [block:code] { "codes": [ { "code": "pod init", "language": "text" } ] } [/block] Edit your Podfile to look like the following: [block:code] { "codes": [ { "code": "platform :ios, '9.3'\nuse_frameworks!\n\n# The target name is most likely the name of your project.\ntarget 'swift-2048' do\n\n # Your 'node_modules' directory is probably in the root of your project,\n # but if not, adjust the `:path` accordingly\n pod 'React', :path => './node_modules/react-native', :subspecs => [\n 'Core',\n 'CxxBridge', # Include this for RN >= 0.47\n 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43\n 'RCTText',\n 'RCTNetwork',\n 'RCTWebSocket', # needed for debugging\n # Add any other subspecs you want to use in your project\n ]\n # Explicitly include Yoga if you are using RN >= 0.42.0\n pod \"yoga\", :path => \"./node_modules/react-native/ReactCommon/yoga\"\n\n # Third party deps podspec link\n pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'\n pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'\n pod 'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'\n \n # Viro Dependencies\n pod 'ViroReact', :path => './node_modules/react-viro/ios/'\n pod 'ViroKit', :path => './node_modules/react-viro/ios/dist/ViroRenderer/'\nend\n", "language": "yaml" } ] } [/block] ### Editing React Native Podfiles Now this is where things get a bit tricky. Ideally here you'd run ```pod install``` and we can move on to integration code. These steps are needed to get React Native 0.55.1 working with Swift. Hopefully in future React Native releases they won't be needed. **1)** Modify the yoga.podspec under node_modules/react-native/ReactCommon/yoga/yoga.podspec Add the following line to the podspec: ```spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h' ``` **2)** Edit the node_modules/react-native/React.podspec. Edit the 'Core' subspec field ```ss.exclude_files``` and add the following as files to be excluded: ```"React/Fabric/*". ``` ### Run Pod Install From the command line type ```pod install``` to install the pods. ## Adding React Javascript App Code Now let's add a sample example AR app written in Javascript and React that will connect to our existing app. Our app will consist of two files, index.js and TestScene.js ## index.js First will be our index.js that will be in our project root directory: [block:code] { "codes": [ { "code": "'use strict';\n\nimport React, { Component } from 'react';\n\nimport { AppRegistry } from 'react-native';\n\nimport {\n ViroARSceneNavigator,\n} from 'react-viro';\n\nvar createReactClass = require('create-react-class');\n\nvar HelloWorldScene = require('./js/TestScene');\n\nvar ViroSample = createReactClass({\n render: function() {\n // The 'viroAppProps={{...this.props}}' line below is used to pass\n // the initial properties from this base component to the ViroARSceneNavigator\n // which will allow the scenes to access them.\n let viroAppProps = {...this.props};\n \n return (\n <ViroARSceneNavigator\n initialScene={{\n scene: HelloWorldScene,\n }}\n viroAppProps={viroAppProps}\n apiKey={\"API_KEY_GOES_HERE\"}\n />\n );\n }\n});\n\nAppRegistry.registerComponent('RNHighScores', () => ViroSample);", "language": "javascript" } ] } [/block] ### TestScene.js The index.js file will load TestScene.js initially. This file will be located under the js/TestScene.js from your project root. This scene will just display the high score text in front us in AR: [block:code] { "codes": [ { "code": "'use strict';\n\nimport React, { Component } from 'react';\n\nimport {StyleSheet} from 'react-native';\n\nimport {\n ViroARScene,\n ViroText,\n} from 'react-viro';\n \nvar createReactClass = require('create-react-class');\n\nvar TestScene = createReactClass({\n\n render: function() {\n \n var highScore = \"High Score: \" + this.props.sceneNavigator.viroAppProps.highScore;\n return (\n <ViroARScene>\n <ViroText width={2} text={highScore} style={styles.helloWorldTextStyle} position={[0, 0, -4]} />\n </ViroARScene>\n );\n },\n});\n\nvar styles = StyleSheet.create({\n helloWorldTextStyle: {\n fontFamily: 'Arial',\n fontSize: 30,\n color: '#ffffff',\n textAlignVertical: 'center',\n textAlign: 'center',\n },\n});\n\nmodule.exports = TestScene;", "language": "javascript" } ] } [/block] ## Modify Native Code Almost there. Now open up the XCode workspace created after running pod install, ```swift-2048.xcworkspace``` Modify the React Native files in your project: **1)** Open the file ```RCTReconnectingWebSocket.m```. In the file search for the following ```#import "<fishhook/fishhook.h>" ``` and rename the import to ```#import "fishhook.h" ```. **2)** Open the file ```RCTSurfaceSizeMeasureMode.h``` and search for the following block: ``` RCT_EXTERN void RCTSurfaceMinimumSizeAndMaximumSizeFromSizeAndSizeMeasureMode( CGSize size, RCTSurfaceSizeMeasureMode sizeMeasureMode, CGSize &minimumSize, CGSize &maximumSize ); ``` Add an **#ifdef __cplusplus** around the block so the code looks like: ``` #ifdef __cplusplus RCT_EXTERN void RCTSurfaceMinimumSizeAndMaximumSizeFromSizeAndSizeMeasureMode( CGSize size, RCTSurfaceSizeMeasureMode sizeMeasureMode, CGSize &minimumSize, CGSize &maximumSize ); #endif ``` ## Modify Xcode Build Settings 1) Goto to the project target in Xcode. Under 'Build Settings', set the the 'Enable Bitcoin' flag to 'No'. 2) Find the Info.plist file for the project under Supporting files. In Xcode, add the NSCameraUsageDescription property to the Info.plist. This flag is also known as 'Privacy - Camera Usage Description'. Add 'For AR' as the description or whatever description you think fits. ## Adding a React Root Controller Now we are finally ready to add our Viro React component to our app! Now open the ```ViewController.swift``` file in XCode, and add the following function: [block:code] { "codes": [ { "code": "@IBAction func highScoreButtonTapped(_ sender : UIButton) {\n // our code to start React Native will go here. \n}", "language": "objectivec" } ] } [/block] Edit the ```Main.Storyboard```, cut and paste the Start Game text and create new Text called 'High Score'. [block:image] { "images": [ { "image": [ "https://files.readme.io/8d58baf-Screen_Shot_2018-06-07_at_10.20.53_AM.png", "Screen Shot 2018-06-07 at 10.20.53 AM.png", 1592, 1028, "#dededd" ] } ] } [/block] Hook up the ```highScoreButtonTapped``` function to our High Score Text in Interface Builder like below: [block:image] { "images": [ { "image": [ "https://files.readme.io/c124161-Screen_Shot_2018-06-07_at_2.53.46_PM.png", "Screen Shot 2018-06-07 at 2.53.46 PM.png", 716, 806, "#363636" ] } ] } [/block] Now our text is hooked up to the function and will execute on tap. Let's fill in the method ```highScoreButtonTapped```. Below we add code to the function that creates our root React View, attaches that view to a new UIViewController and invokes our javascript module which is called "RNHighScores". This will present our AR View over the current UIViewController. [block:code] { "codes": [ { "code": " @IBAction func highScoreButtonTapped(_ sender : UIButton) {\n var jsCodeLocation = URL(string: \"http://10.57.107.245:8081/index.bundle? platform=ios\")\n#if !DEBUG\n jsCodeLocation = Bundle.main.url(forResource: \"main\", withExtension: \" jsbundle\")\n#endif\n let mockData:NSDictionary = [\"highScore\": \"40\"]\n \n let rootView = RCTRootView(\n bundleURL: jsCodeLocation,\n moduleName: \"RNHighScores\",\n initialProperties: mockData as [NSObject : AnyObject],\n launchOptions: nil\n )\n let vc = UIViewController()\n vc.view = rootView\n self.present(vc, animated: true, completion: nil)\n }", "language": "objectivec" } ] } [/block] Make sure to fill in the proper IP address in the above code if you are in Debug. Now to run your app do the following: **1)** Goto your terminal. In your project directory type ```npm start``` to start the packager. **2)** In XCode, goto your app and run your application. Now compile and run! When the app launches, tap the high scores text and React Native will launch with a Viro AR View that displays the high score text :) ## Building for Production When you are ready to build for release, there is one more step needed. You'll need to add a bundle step to build your assets for release. Selected the project target, goto 'Build Phases', add the following Build Phase called ** 'Bundling for React Native'**: [block:code] { "codes": [ { "code": "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh", "language": "shell" } ] } [/block]