From 3955bebb74f10e6585713a0633cc64aca8df9271 Mon Sep 17 00:00:00 2001 From: DougBanksPersonal Date: Wed, 16 Dec 2015 10:50:40 -0800 Subject: [PATCH] Update EmbeddedAppIOS.md --- docs/EmbeddedAppIOS.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/EmbeddedAppIOS.md b/docs/EmbeddedAppIOS.md index b82c608d1..4c4b99952 100644 --- a/docs/EmbeddedAppIOS.md +++ b/docs/EmbeddedAppIOS.md @@ -15,7 +15,11 @@ Since React makes no assumptions about the rest of your technology stack – it - [Node.js](http://nodejs.org) - Install **nvm** with [its setup instructions here](https://github.com/creationix/nvm#installation). Then run `nvm install node && nvm alias default node`, which installs the latest version of Node.js and sets up your terminal so you can run it by typing `node`. With nvm you can install multiple versions of Node.js and easily switch between them. - If you are using Node 5.0 or newer, we recommend installing npm 2, which is much faster than npm 3. After installing Node, run `npm install -g npm@2` -- Install your copy of React Native under your `node_modules` directory where your JS resides. +- Install the `react-native` package from npm by running the following command in the root directory of your project: + - `npm install react-native` + +At this point you should have the React Native package installed under a directory named `node_modules` as a sibling to your `.xcodeproj` file. + ## Install React Native Using CocoaPods @@ -26,7 +30,7 @@ When you are ready to work with CocoaPods, add the following lines to `Podfile`. ```ruby # Depending on how your project is organized, your node_modules directory may be # somewhere else; tell CocoaPods where you've installed react-native from npm -pod 'React', :path => '../node_modules/react-native', :subspecs => [ +pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'RCTImage', 'RCTNetwork', @@ -126,7 +130,7 @@ Ready for the most interesting part? Now we shall create the `RCTRootView`, wher In `ReactView.m`, we need to first initiate `RCTRootView` with the URI of your `index.ios.bundle`. `index.ios.bundle` will be created by packager and served by React Native server, which will be discussed later on. ``` -NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; +NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; // For production use, this `NSURL` could instead point to a pre-bundled file on disk: // // NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; @@ -152,7 +156,7 @@ rootView.frame = self.bounds; In root directory, we need to start React Native development server. ``` -(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR) +(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR) ``` This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The `--root` option indicates the root of your React Native apps – this will be our `ReactComponents` directory containing the single `index.ios.js` file. This running server will package up the `index.ios.bundle` file accessible via `http://localhost:8081/index.ios.bundle`. @@ -163,7 +167,7 @@ Now compile and run your app. You shall now see your React Native app running in ![Example](/react-native/img/EmbeddedAppExample.png) -Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C `UIView` subclass. +Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -> Preprocessor Macros). You've got a simple React component totally encapsulated behind an Objective-C `UIView` subclass. ## Conclusion