diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 2016172832d..abaece9bafa 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,6 +1,6 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • Install nvm with its setup instructions here. 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 React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following lines to Podfile. If you don't have one, then create it under the root directory of your project.

# Depending on how your project is organized, your node_modules directory may be +Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • Install nvm with its setup instructions here. 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 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 #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following lines to Podfile. If you don't have one, then create it under the root directory of your project.

# 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', @@ -41,7 +41,7 @@ React.AppRegistryViewController () @property (weak, nonatomic) IBOutlet ReactView *reactView; -@end

Here I disabled AutoLayout for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.

Add RCTRootView To Container View #

Ready for the most interesting part? Now we shall create the RCTRootView, where your React Native app lives.

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"]; +@end

Here I disabled AutoLayout for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.

Add RCTRootView To Container View #

Ready for the most interesting part? Now we shall create the RCTRootView, where your React Native app lives.

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?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"]; @@ -53,7 +53,7 @@ React.AppRegistry: @"SimpleApp" initialProperties:nil launchOptions:nil];

Then add it as a subview of the ReactView.

[self addSubview:rootView]; -rootView.frame = self.bounds;

Start Development Server #

In root directory, we need to start React Native development server.

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; 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.

Compile And Run #

Now compile and run your app. You shall now see your React Native app running inside of the ReactView.

Example

Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C UIView subclass.

Conclusion #

So under the hood, when RCTRootView is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the RCTRootView – the RCTRootView ingests your bundled JS and renders your React components. Bravo!

You can checkout full source code of a sample application here.

Next →
© 2015 Facebook Inc.