diff --git a/releases/next/docs/embedded-app-ios.html b/releases/next/docs/embedded-app-ios.html index ca2149138d5..d46022c71af 100644 --- a/releases/next/docs/embedded-app-ios.html +++ b/releases/next/docs/embedded-app-ios.html @@ -70,7 +70,7 @@ class ReactViewaddSubview(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> +}

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 ReactComponent 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> @@ -80,7 +80,7 @@ class ReactViewtrue/> </dict> </dict> -</dict>

If you don't do this, you will see the error - Could not connect to development server. when connecting to your server over http.

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 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 #

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 →