diff --git a/releases/next/docs/embedded-app-ios.html b/releases/next/docs/embedded-app-ios.html index 96ceac15c43..fb2d13ac1a8 100644 --- a/releases/next/docs/embedded-app-ios.html +++ b/releases/next/docs/embedded-app-ios.html @@ -40,7 +40,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?platform=ios"]; +@end

NOTE For Swift apps there is no need for that.

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"]; @@ -52,7 +52,25 @@ 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 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.

Update App Transport Security #

On iOS 9 and above the app won't be a able to connect over http to localhost unless specifically told so. See this thread for alternatives and instructions: http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http.

It is recommended that you add an App Transport Security exception for localhost in your app's Info.plist file:

<key>NSAppTransportSecurity</key> +rootView.frame = self.bounds;

Swift apps #

Add the following to ReactView.swift file:

import UIKit +import React + +class ReactView: UIView { + + let rootView: RCTRootView = RCTRootView(bundleURL: NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios"), + moduleName: "SimpleApp", initialProperties: nil, launchOptions: nil) + + override func layoutSubviews() { + super.layoutSubviews() + + loadReact() + } + + func loadReact () { + addSubview(rootView) + rootView.frame = self.bounds + } +}

And then make sure your view is added in a ViewContainer or story board file.

Start Development Server #

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

(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.

Update App Transport Security #

On iOS 9 and above the app won't be a able to connect over http to localhost unless specifically told so. See this thread for alternatives and instructions: http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http.

It is recommended that you add an App Transport Security exception for localhost in your app's Info.plist file:

<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict>