diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 284645fd6ce..696a357619f 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -44,7 +44,6 @@ React.AppRegistry// curl http://localhost:8081/index.ios.bundle -o main.jsbundle RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"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 →
+ \ No newline at end of file diff --git a/docs/tutorial.html b/docs/tutorial.html index 300d1f6bfed..a89d6fa5b3b 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -147,7 +147,7 @@ style={styles.listView} /> ); - },

The DataSource is an interface that ListView is using to determine which rows have changed over the course of updates.

You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by getInitialState. Also, now that we're storing the data in dataSource, we should no longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.

getInitialState: function() { + },

The dataSource is an interface that ListView is using to determine which rows have changed over the course of updates.

You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by getInitialState. Also, now that we're storing the data in dataSource, we should no longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.

getInitialState: function() { return { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2,