[Website] Load React Native Web Player from MaxCDN.

This reverts commit 07936faa39.

.eslintrc

@@ -221,17 +221,19 @@
 
     "react/display-name": 0,
     "react/jsx-boolean-value": 0,
+    "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 1,
     "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 0,
+    "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "react/no-did-mount-set-state": [1, "allow-in-func"],
     "react/no-did-update-set-state": [1, "allow-in-func"],
     "react/no-multi-comp": 0,
+    "react/no-string-refs": 1,
     "react/no-unknown-property": 0,
     "react/prop-types": 0,
-    "react/react-in-jsx-scope": 0,
+    "react/react-in-jsx-scope": 1,
     "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
   }
 }

.flowconfig

@@ -1,68 +1,13 @@
 [ignore]
 
 # We fork some components by platform.
-.*/*.web.js
 .*/*.android.js
 
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
-
-# Ugh
-.*/node_modules/babel.*
-.*/node_modules/babylon.*
-.*/node_modules/invariant.*
-
-# Ignore react and fbjs where there are overlaps, but don't ignore
-# anything that react-native relies on
-.*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/ErrorUtils.js
-
-# Flow has a built-in definition for the 'react' module which we prefer to use
-# over the currently-untyped source
-.*/node_modules/react/react.js
-.*/node_modules/react/lib/React.js
-.*/node_modules/react/lib/ReactDOM.js
-
-.*/__mocks__/.*
-.*/__tests__/.*
-
-.*/commoner/test/source/widget/share.js
-
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
-
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
-
-# Ignore jest
-.*/node_modules/jest-cli/.*
-
-# Ignore Website
-.*/website/.*
-
-# Ignore generators
+# Ignore templates with `@flow` in header
 .*/local-cli/generator.*
 
-# Ignore BUCK generated folders
-.*\.buckd/
-
-.*/node_modules/is-my-json-valid/test/.*\.json
-.*/node_modules/iconv-lite/encodings/tables/.*\.json
+# Ignore malformed json
 .*/node_modules/y18n/test/.*\.json
-.*/node_modules/spdx-license-ids/spdx-license-ids.json
-.*/node_modules/spdx-exceptions/index.json
-.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
-.*/node_modules/resolve/lib/core.json
-.*/node_modules/jsonparse/samplejson/.*\.json
-.*/node_modules/json5/test/.*\.json
-.*/node_modules/ua-parser-js/test/.*\.json
-.*/node_modules/builtin-modules/builtin-modules.json
-.*/node_modules/binary-extensions/binary-extensions.json
-.*/node_modules/url-regex/tlds.json
-.*/node_modules/joi/.*\.json
-.*/node_modules/isemail/.*\.json
-.*/node_modules/tr46/.*\.json
-
 
 [include]
 
@@ -76,6 +21,8 @@ module.system=haste
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 
+experimental.strict_type_args=true
+
 munge_underscores=true
 
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
@@ -85,9 +32,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.24.0
+^0.27.0

.gitignore

@@ -49,3 +49,6 @@ node_modules
 
 # OS X
 .DS_Store
+
+# Test generated files
+/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js

.npmignore

@@ -0,0 +1,2 @@
+# rnpm
+/local-cli/rnpm

.travis.yml

@@ -5,6 +5,7 @@ osx_image: xcode7.3
 install:
   - mkdir -p /Users/travis/build/facebook/.nvm
   - export NVM_DIR="/Users/travis/build/facebook/.nvm"
+  - brew install nvm
   - source $(brew --prefix nvm)/nvm.sh
   # testing with npm@2 for diversity, Circle tests with npm@3
   - nvm install 4.4.3

CONTRIBUTING.md

@@ -14,22 +14,29 @@ We will do our best to keep `master` in good shape, with tests passing at all ti
 
 The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
 
+Please submit your pull request on the *master* branch. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.
+
 *Before* submitting a pull request, please make sure the following is done…
 
 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
 4. If you've updated the docs, verify the website locally and submit screenshots if applicable
-```
-$ cd website
-$ npm install && npm start
-go to: http://localhost:8079/react-native/index.html
-```
+
+    ```
+    $ cd website
+    $ npm install && npm start
+    go to: http://localhost:8079/react-native/index.html
+    ```
+
 5. Add the copyright notice to the top of any new files you've added.
 6. Ensure tests pass on Travis and Circle CI.
 7. Make sure your code lints (`node linter.js <files touched>`).
-8. Squash your commits (`git rebase -i`).
-9. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
+8. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
+9. Squash your commits (`git rebase -i`).
+   one intent alongs with one commit makes it clearer for people to review and easier to understand your intention
+
+Note: It is not necessary to keep clicking `Merge master to your branch` on PR page. You would want to merge master if there are conflicts or tests are failing. The facebook-bot ultimately squashes all commits to a single one before merging your PR.
 
 #### Copyright Notice for files
 

Examples/Movies/SearchBar.android.js

@@ -21,7 +21,7 @@ var ReactNative = require('react-native');
 var {
   Image,
   Platform,
-  ProgressBarAndroid,
+  ActivityIndicator,
   TextInput,
   StyleSheet,
   TouchableNativeFeedback,
@@ -32,17 +32,6 @@ var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
 
 var SearchBar = React.createClass({
   render: function() {
-    var loadingView;
-    if (this.props.isLoading) {
-      loadingView = (
-        <ProgressBarAndroid
-          styleAttr="Large"
-          style={styles.spinner}
-        />
-      );
-    } else {
-      loadingView = <View style={styles.spinner} />;
-    }
     var background = IS_RIPPLE_EFFECT_SUPPORTED ?
       TouchableNativeFeedback.SelectableBackgroundBorderless() :
       TouchableNativeFeedback.SelectableBackground();
@@ -69,7 +58,12 @@ var SearchBar = React.createClass({
           onFocus={this.props.onFocus}
           style={styles.searchBarInput}
         />
-        {loadingView}
+        <ActivityIndicator
+          animating={this.props.isLoading}
+          color="white"
+          size="large"
+          style={styles.spinner}
+        />
       </View>
     );
   }
@@ -94,6 +88,7 @@ var styles = StyleSheet.create({
   spinner: {
     width: 30,
     height: 30,
+    marginRight: 16,
   },
   icon: {
     width: 24,

Examples/Movies/SearchBar.ios.js

@@ -19,7 +19,7 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicatorIOS,
+  ActivityIndicator,
   TextInput,
   StyleSheet,
   View,
@@ -37,7 +37,7 @@ var SearchBar = React.createClass({
           onFocus={this.props.onFocus}
           style={styles.searchBarInput}
         />
-        <ActivityIndicatorIOS
+        <ActivityIndicator
           animating={this.props.isLoading}
           style={styles.spinner}
         />

Examples/Movies/SearchScreen.js

@@ -18,10 +18,9 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicatorIOS,
+  ActivityIndicator,
   ListView,
   Platform,
-  ProgressBarAndroid,
   StyleSheet,
   Text,
   View,
@@ -250,15 +249,8 @@ var SearchScreen = React.createClass({
     if (!this.hasMore() || !this.state.isLoadingTail) {
       return <View style={styles.scrollSpinner} />;
     }
-    if (Platform.OS === 'ios') {
-      return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
-    } else {
-      return (
-        <View  style={{alignItems: 'center'}}>
-          <ProgressBarAndroid styleAttr="Large"/>
-        </View>
-      );
-    }
+
+    return <ActivityIndicator style={styles.scrollSpinner} />;
   },
 
   renderSeparator: function(

Examples/Movies/android/app/src/main/AndroidManifest.xml

@@ -12,6 +12,7 @@
       android:targetSdkVersion="22" />
 
     <application
+      android:name=".MoviesApplication"
       android:allowBackup="true"
       android:label="@string/app_name"
       android:icon="@drawable/rotten_tomatoes_icon"

Examples/Movies/android/app/src/main/java/com/facebook/react/movies/MoviesActivity.java

@@ -14,39 +14,10 @@
 package com.facebook.react.movies;
 
 import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-import javax.annotation.Nullable;
 
 public class MoviesActivity extends ReactActivity {
   @Override
   protected String getMainComponentName() {
     return "MoviesApp";
   }
-
-  @Override
-  protected @Nullable String getBundleAssetName() {
-    return "MoviesApp.android.bundle";
-  };
-
-  @Override
-  protected String getJSMainModuleName() {
-    return "Examples/Movies/MoviesApp.android";
-  }
-
-  @Override
-  protected boolean getUseDeveloperSupport() {
-    return true;
-  }
-
-  @Override
-  protected List<ReactPackage> getPackages() {
-    return Arrays.<ReactPackage>asList(
-      new MainReactPackage()
-    );
-  }
 }

Examples/Movies/android/app/src/main/java/com/facebook/react/movies/MoviesApplication.java

@@ -0,0 +1,58 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+package com.facebook.react.movies;
+
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+
+import java.util.Arrays;
+import java.util.List;
+
+import javax.annotation.Nullable;
+
+public class MoviesApplication extends Application implements ReactApplication {
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public String getJSMainModuleName() {
+      return "Examples/Movies/MoviesApp.android";
+    }
+
+    @Override
+    public @Nullable String getBundleAssetName() {
+      return "MoviesApp.android.bundle";
+    }
+
+    @Override
+    protected boolean getUseDeveloperSupport() {
+      return true;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+        new MainReactPackage()
+      );
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+}

Examples/UIExplorer/AccessibilityIOSExample.js

@@ -61,6 +61,6 @@ exports.description = 'Interface to show iOS\' accessibility samples';
 exports.examples = [
   {
     title: 'Accessibility elements',
-    render(): ReactElement { return <AccessibilityIOSExample />; }
+    render(): ReactElement<any> { return <AccessibilityIOSExample />; }
   },
 ];

Examples/UIExplorer/ActionSheetIOSExample.js

@@ -198,27 +198,27 @@ exports.description = 'Interface to show iOS\' action sheets';
 exports.examples = [
   {
     title: 'Show Action Sheet',
-    render(): ReactElement { return <ActionSheetExample />; }
+    render(): ReactElement<any> { return <ActionSheetExample />; }
   },
   {
     title: 'Show Action Sheet with tinted buttons',
-    render(): ReactElement { return <ActionSheetTintExample />; }
+    render(): ReactElement<any> { return <ActionSheetTintExample />; }
   },
   {
     title: 'Show Share Action Sheet',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <ShareActionSheetExample url="https://code.facebook.com" />;
     }
   },
   {
     title: 'Share Local Image',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <ShareActionSheetExample url="bunny.png" />;
     }
   },
   {
     title: 'Share Screenshot',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <ShareScreenshotExample />;
     }
   }

Examples/UIExplorer/ActivityIndicatorExample.js

@@ -15,41 +15,38 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  ActivityIndicatorIOS,
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  ActivityIndicator,
   StyleSheet,
   View,
 } = ReactNative;
-var TimerMixin = require('react-timer-mixin');
+const TimerMixin = require('react-timer-mixin');
 
-var ToggleAnimatingActivityIndicator = React.createClass({
+const ToggleAnimatingActivityIndicator = React.createClass({
   mixins: [TimerMixin],
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       animating: true,
     };
   },
 
-  setToggleTimeout: function() {
-    this.setTimeout(
-      () => {
-        this.setState({animating: !this.state.animating});
-        this.setToggleTimeout();
-      },
-      1200
-    );
+  setToggleTimeout() {
+    this.setTimeout(() => {
+      this.setState({animating: !this.state.animating});
+      this.setToggleTimeout();
+    }, 2000);
   },
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.setToggleTimeout();
   },
 
-  render: function() {
+  render() {
     return (
-      <ActivityIndicatorIOS
+      <ActivityIndicator
         animating={this.state.animating}
         style={[styles.centering, {height: 80}]}
         size="large"
@@ -60,31 +57,31 @@ var ToggleAnimatingActivityIndicator = React.createClass({
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<ActivityIndicatorIOS>';
+exports.title = '<ActivityIndicator>';
 exports.description = 'Animated loading indicators.';
 
 exports.examples = [
   {
     title: 'Default (small, white)',
-    render: function() {
+    render() {
       return (
-        <ActivityIndicatorIOS
-          style={[styles.centering, styles.gray, {height: 40}]}
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
           color="white"
-          />
+        />
       );
     }
   },
   {
     title: 'Gray',
-    render: function() {
+    render() {
       return (
         <View>
-          <ActivityIndicatorIOS
-            style={[styles.centering, {height: 40}]}
+          <ActivityIndicator
+            style={[styles.centering]}
           />
-          <ActivityIndicatorIOS
-            style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
+          <ActivityIndicator
+            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
           />
         </View>
       );
@@ -92,23 +89,23 @@ exports.examples = [
   },
   {
     title: 'Custom colors',
-    render: function() {
+    render() {
       return (
         <View style={styles.horizontal}>
-          <ActivityIndicatorIOS color="#0000ff" />
-          <ActivityIndicatorIOS color="#aa00aa" />
-          <ActivityIndicatorIOS color="#aa3300" />
-          <ActivityIndicatorIOS color="#00aa00" />
+          <ActivityIndicator color="#0000ff" />
+          <ActivityIndicator color="#aa00aa" />
+          <ActivityIndicator color="#aa3300" />
+          <ActivityIndicator color="#00aa00" />
         </View>
       );
     }
   },
   {
     title: 'Large',
-    render: function() {
+    render() {
       return (
-        <ActivityIndicatorIOS
-          style={[styles.centering, styles.gray, {height: 80}]}
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
           color="white"
           size="large"
         />
@@ -117,22 +114,22 @@ exports.examples = [
   },
   {
     title: 'Large, custom colors',
-    render: function() {
+    render() {
       return (
         <View style={styles.horizontal}>
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#0000ff"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#aa00aa"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#aa3300"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#00aa00"
           />
@@ -142,16 +139,28 @@ exports.examples = [
   },
   {
     title: 'Start/stop',
-    render: function(): ReactElement {
+    render() {
       return <ToggleAnimatingActivityIndicator />;
     }
   },
+  {
+    title: 'Custom size',
+    render() {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, {transform: [{scale: 1.5}]}]}
+          size="large"
+        />
+      );
+    }
+  },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   centering: {
     alignItems: 'center',
     justifyContent: 'center',
+    padding: 8,
   },
   gray: {
     backgroundColor: '#cccccc',
@@ -159,5 +168,6 @@ var styles = StyleSheet.create({
   horizontal: {
     flexDirection: 'row',
     justifyContent: 'space-around',
+    padding: 8,
   },
 });

Examples/UIExplorer/AdSupportIOSExample.js

@@ -31,7 +31,7 @@ exports.description = 'Example of using the ad support API.';
 exports.examples = [
   {
     title: 'Ad Support IOS',
-    render: function(): ReactElement {
+    render: function(): ReactElement<any> {
       return <AdSupportIOSExample />;
     },
   }

Examples/UIExplorer/AlertIOSExample.js

@@ -38,7 +38,7 @@ exports.examples = [{
 },
 {
   title: 'Prompt Options',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return <PromptOptions />;
   }
 },

Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js

@@ -82,7 +82,7 @@ class Circle extends React.Component {
     });
   }
 
-  render(): ReactElement {
+  render(): ReactElement<any> {
     if (this.state.panResponder) {
       var handlers = this.state.panResponder.panHandlers;
       var dragStyle = {                 //  Used to position while dragging
@@ -183,7 +183,7 @@ class AnExApp extends React.Component {
     this._onMove = this._onMove.bind(this);
   }
 
-  render(): ReactElement {
+  render(): ReactElement<any> {
     var circles = this.state.keys.map((key, idx) => {
       if (key === this.state.activeKey) {
         return <Circle key={key + 'd'} dummy={true} />;
@@ -281,7 +281,6 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
 var styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 64, // push content below nav bar
   },
   grid: {
     flex: 1,

Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js

@@ -89,7 +89,7 @@ class AnExBobble extends React.Component {
     });
   }
 
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return (
       <View style={styles.bobbleContainer}>
         {this.state.bobbles.map((_, i) => {

Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js

@@ -45,7 +45,7 @@ class AnExSet extends React.Component {
       openColor: randColor(),
     };
   }
-  render(): ReactElement {
+  render(): ReactElement<any> {
     var backgroundColor = this.props.openVal ?
       this.props.openVal.interpolate({
         inputRange: [0, 1],

Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js

@@ -90,7 +90,7 @@ class AnExTilt extends React.Component {
     this._startBurnsZoom();
   }
 
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return (
       <Animated.View
         {...this.state.tiltPanResponder.panHandlers}

Examples/UIExplorer/AppStateExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -16,9 +23,9 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   AppState,
   Text,
   View
@@ -29,13 +36,19 @@ var AppStateSubscription = React.createClass({
     return {
       appState: AppState.currentState,
       previousAppStates: [],
+      memoryWarnings: 0,
     };
   },
   componentDidMount: function() {
     AppState.addEventListener('change', this._handleAppStateChange);
+    AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
   },
   componentWillUnmount: function() {
     AppState.removeEventListener('change', this._handleAppStateChange);
+    AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
+  },
+  _handleMemoryWarning: function() {
+    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
   },
   _handleAppStateChange: function(appState) {
     var previousAppStates = this.state.previousAppStates.slice();
@@ -46,6 +59,13 @@ var AppStateSubscription = React.createClass({
     });
   },
   render() {
+    if (this.props.showMemoryWarnings) {
+      return (
+        <View>
+          <Text>{this.state.memoryWarnings}</Text>
+        </View>
+      );
+    }
     if (this.props.showCurrentOnly) {
       return (
         <View>
@@ -72,10 +92,16 @@ exports.examples = [
   {
     title: 'Subscribed AppState:',
     description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
+    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; }
   },
   {
     title: 'Previous states:',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
+    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; }
+  },
+  {
+    platform: 'ios',
+    title: 'Memory Warnings',
+    description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
+    render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
   },
 ];

Examples/UIExplorer/AppStateIOSExample.js

@@ -1,99 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule AppStateIOSExample
- * @flow
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  AppStateIOS,
-  Text,
-  View
-} = ReactNative;
-
-var AppStateSubscription = React.createClass({
-  getInitialState() {
-    return {
-      appState: AppStateIOS.currentState,
-      previousAppStates: [],
-      memoryWarnings: 0,
-    };
-  },
-  componentDidMount: function() {
-    AppStateIOS.addEventListener('change', this._handleAppStateChange);
-    AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
-  },
-  componentWillUnmount: function() {
-    AppStateIOS.removeEventListener('change', this._handleAppStateChange);
-    AppStateIOS.removeEventListener('memoryWarning', this._handleMemoryWarning);
-  },
-  _handleMemoryWarning: function() {
-    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
-  },
-  _handleAppStateChange: function(appState) {
-    var previousAppStates = this.state.previousAppStates.slice();
-    previousAppStates.push(this.state.appState);
-    this.setState({
-      appState,
-      previousAppStates,
-    });
-  },
-  render() {
-    if (this.props.showMemoryWarnings) {
-      return (
-        <View>
-          <Text>{this.state.memoryWarnings}</Text>
-        </View>
-      );
-    }
-    if (this.props.showCurrentOnly) {
-      return (
-        <View>
-          <Text>{this.state.appState}</Text>
-        </View>
-      );
-    }
-    return (
-      <View>
-        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
-      </View>
-    );
-  }
-});
-
-exports.title = 'AppStateIOS';
-exports.description = 'iOS app background status';
-exports.examples = [
-  {
-    title: 'AppStateIOS.currentState',
-    description: 'Can be null on app initialization',
-    render() { return <Text>{AppStateIOS.currentState}</Text>; }
-  },
-  {
-    title: 'Subscribed AppStateIOS:',
-    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
-  },
-  {
-    title: 'Previous states:',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
-  },
-  {
-    title: 'Memory Warnings',
-    description: 'In the simulator, hit Shift+Command+M to simulate a memory warning.',
-    render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; }
-  },
-];

Examples/UIExplorer/AsyncStorageExample.js

@@ -115,6 +115,6 @@ exports.description = 'Asynchronous local disk storage.';
 exports.examples = [
   {
     title: 'Basics - getItem, setItem, removeItem',
-    render(): ReactElement { return <BasicStorageExample />; }
+    render(): ReactElement<any> { return <BasicStorageExample />; }
   },
 ];

Examples/UIExplorer/CameraRollExample.js

@@ -20,7 +20,7 @@ const ReactNative = require('react-native');
 const {
   CameraRoll,
   Image,
-  SliderIOS,
+  Slider,
   StyleSheet,
   Switch,
   Text,
@@ -51,7 +51,7 @@ const CameraRollExample = React.createClass({
           onValueChange={this._onSwitchChange}
           value={this.state.bigImages} />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
-        <SliderIOS
+        <Slider
           value={this.state.sliderValue}
           onValueChange={this._onSliderChange}
         />
@@ -137,6 +137,6 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
 exports.examples = [
   {
     title: 'Photos',
-    render(): ReactElement { return <CameraRollExample />; }
+    render(): ReactElement<any> { return <CameraRollExample />; }
   }
 ];

Examples/UIExplorer/CameraRollView.js

@@ -19,7 +19,7 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicatorIOS,
+  ActivityIndicator,
   CameraRoll,
   Image,
   ListView,
@@ -141,7 +141,7 @@ var CameraRollView = React.createClass({
       groupTypes: this.props.groupTypes,
       assetType: this.props.assetType,
     };
-    if (Platform.OS === "android") {
+    if (Platform.OS === 'android') {
       // not supported in android
       delete fetchParams.groupTypes;
     }
@@ -191,7 +191,7 @@ var CameraRollView = React.createClass({
 
   _renderFooterSpinner: function() {
     if (!this.state.noMore) {
-      return <ActivityIndicatorIOS style={styles.spinner} />;
+      return <ActivityIndicator style={styles.spinner} />;
     }
     return null;
   },

Examples/UIExplorer/DatePickerIOSExample.js

@@ -132,7 +132,7 @@ exports.description = 'Select dates and times using the native UIDatePicker.';
 exports.examples = [
 {
   title: '<DatePickerIOS>',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <DatePickerExample />;
   },
 }];

Examples/UIExplorer/GeolocationExample.js

@@ -32,7 +32,7 @@ exports.description = 'Examples of using the Geolocation API.';
 exports.examples = [
   {
     title: 'navigator.geolocation',
-    render: function(): ReactElement {
+    render: function(): ReactElement<any> {
       return <GeolocationExample />;
     },
   }

Examples/UIExplorer/ImageExample.js

@@ -25,12 +25,12 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
+  ActivityIndicator,
   Image,
   Platform,
   StyleSheet,
   Text,
   View,
-  ActivityIndicatorIOS
 } = ReactNative;
 
 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
@@ -108,7 +108,7 @@ var NetworkImageExample = React.createClass({
     var loader = this.state.loading ?
       <View style={styles.progress}>
         <Text>{this.state.progress}%</Text>
-        <ActivityIndicatorIOS style={{marginLeft:5}}/>
+        <ActivityIndicator style={{marginLeft:5}} />
       </View> : null;
     return this.state.error ?
       <Text>{this.state.error}</Text> :
@@ -156,6 +156,63 @@ var ImageSizeExample = React.createClass({
   },
 });
 
+var MultipleSourcesExample = React.createClass({
+  getInitialState: function() {
+    return {
+      width: 30,
+      height: 30,
+    };
+  },
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text
+            style={styles.touchableText}
+            onPress={this.decreaseImageSize} >
+            Decrease image size
+          </Text>
+          <Text
+            style={styles.touchableText}
+            onPress={this.increaseImageSize} >
+            Increase image size
+          </Text>
+        </View>
+        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
+        <View
+          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
+          <Image
+            style={{flex: 1}}
+            source={[
+              {uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
+              {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
+              {uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
+            ]}
+          />
+        </View>
+      </View>
+    );
+  },
+  increaseImageSize: function() {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  },
+  decreaseImageSize: function() {
+    if (this.state.width <= 10) {
+      return;
+    }
+    this.setState({
+      width: this.state.width - 10,
+      height: this.state.height - 10,
+    });
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -509,7 +566,16 @@ exports.examples = [
     render: function() {
       return <ImageSizeExample source={fullImage} />;
     },
-    platform: 'ios',
+  },
+  {
+    title: 'MultipleSourcesExample',
+    description:
+      'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
+      'to diplay based on the size of the of the target image',
+    render: function() {
+      return <MultipleSourcesExample />;
+    },
+    platform: 'android',
   },
 ];
 
@@ -568,4 +634,8 @@ var styles = StyleSheet.create({
     height: 50,
     resizeMode: 'contain',
   },
+  touchableText: {
+    fontWeight: '500',
+    color: 'blue',
+  },
 });

Examples/UIExplorer/KeyboardAvoidingViewExample.js

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule KeyboardAvoidingViewExample
+ */
+'use strict';
+
+const React = require('React');
+const ReactNative = require('react-native');
+const {
+  KeyboardAvoidingView,
+  Modal,
+  SegmentedControlIOS,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+const UIExplorerBlock = require('./UIExplorerBlock');
+const UIExplorerPage = require('./UIExplorerPage');
+
+const KeyboardAvoidingViewExample = React.createClass({
+  statics: {
+    title: '<KeyboardAvoidingView>',
+    description: 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.',
+  },
+
+  getInitialState() {
+    return {
+      behavior: 'padding',
+      modalOpen: false,
+    };
+  },
+
+  onSegmentChange(segment: String) {
+    this.setState({behavior: segment.toLowerCase()});
+  },
+
+  renderExample() {
+    return (
+      <View style={styles.outerContainer}>
+        <Modal animationType="fade" visible={this.state.modalOpen}>
+          <KeyboardAvoidingView behavior={this.state.behavior} style={styles.container}>
+            <SegmentedControlIOS
+              onValueChange={this.onSegmentChange}
+              selectedIndex={this.state.behavior === 'padding' ? 0 : 1}
+              style={styles.segment}
+              values={['Padding', 'Position']} />
+            <TextInput
+              placeholder="<TextInput />"
+              style={styles.textInput} />
+          </KeyboardAvoidingView>
+          <TouchableHighlight
+            onPress={() => this.setState({modalOpen: false})}
+            style={styles.closeButton}>
+            <Text>Close</Text>
+          </TouchableHighlight>
+        </Modal>
+
+        <TouchableHighlight onPress={() => this.setState({modalOpen: true})}>
+          <Text>Open Example</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+
+  render() {
+    return (
+      <UIExplorerPage title="Keyboard Avoiding View">
+        <UIExplorerBlock title="Keyboard-avoiding views move out of the way of the keyboard.">
+          {this.renderExample()}
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+  },
+  textInput: {
+    borderRadius: 5,
+    borderWidth: 1,
+    height: 44,
+    paddingHorizontal: 10,
+  },
+  segment: {
+    marginBottom: 10,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 30,
+    left: 10,
+  }
+});
+
+module.exports = KeyboardAvoidingViewExample;

Examples/UIExplorer/LayoutAnimationExample.js

@@ -160,12 +160,12 @@ exports.title = 'Layout Animation';
 exports.description = 'Layout animation';
 exports.examples = [{
   title: 'Add and remove views',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return <AddRemoveExample />;
   },
 }, {
   title: 'Cross fade views',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return <CrossFadeExample />;
   },
 }];

Examples/UIExplorer/LayoutEventsExample.js

@@ -158,7 +158,7 @@ exports.description = 'Examples that show how Layout events can be used to ' +
 exports.examples = [
 {
   title: 'LayoutEventExample',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <LayoutEventExample />;
   },
 }];

Examples/UIExplorer/LayoutExample.js

@@ -29,11 +29,12 @@ var UIExplorerPage = require('./UIExplorerPage');
 var Circle = React.createClass({
   render: function() {
     var size = this.props.size || 20;
+    var backgroundColor = this.props.bgColor || '#527fe4';
     return (
       <View
         style={{
           borderRadius: size / 2,
-          backgroundColor: '#527fe4',
+          backgroundColor: backgroundColor,
           width: size,
           height: size,
           margin: 1,
@@ -69,16 +70,32 @@ var LayoutExample = React.createClass({
   displayName: 'LayoutExample',
 
   render: function() {
+    var fiveColoredCircles = [
+      <Circle bgColor="#527fe4" key="blue" />,
+      <Circle bgColor="#D443E3" key="violet" />,
+      <Circle bgColor="#FF9049" key="orange" />,
+      <Circle bgColor="#FFE649" key="yellow" />,
+      <Circle bgColor="#7FE040" key="green" />
+    ];
+
     return (
       <UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
         <UIExplorerBlock title="Flex Direction">
           <Text>row</Text>
           <CircleBlock style={{flexDirection: 'row'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
+          </CircleBlock>
+          <Text>row-reverse</Text>
+          <CircleBlock style={{flexDirection: 'row-reverse'}}>
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>column</Text>
           <CircleBlock style={{flexDirection: 'column'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
+          </CircleBlock>
+          <Text>column-reverse</Text>
+          <CircleBlock style={{flexDirection: 'column-reverse'}}>
+            {fiveColoredCircles}
           </CircleBlock>
           <View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
             <Text>{'top: 15, left: 160'}</Text>
@@ -88,23 +105,23 @@ var LayoutExample = React.createClass({
         <UIExplorerBlock title="Justify Content - Main Direction">
           <Text>flex-start</Text>
           <CircleBlock style={{justifyContent: 'flex-start'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>center</Text>
           <CircleBlock style={{justifyContent: 'center'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>flex-end</Text>
           <CircleBlock style={{justifyContent: 'flex-end'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>space-between</Text>
           <CircleBlock style={{justifyContent: 'space-between'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>space-around</Text>
           <CircleBlock style={{justifyContent: 'space-around'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
         </UIExplorerBlock>
         <UIExplorerBlock title="Align Items - Other Direction">

Examples/UIExplorer/LinkingExample.js

@@ -19,7 +19,7 @@ var {
   Linking,
   StyleSheet,
   Text,
-  TouchableNativeFeedback,
+  TouchableOpacity,
   View,
 } = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');
@@ -42,12 +42,12 @@ var OpenURLButton = React.createClass({
 
   render: function() {
     return (
-      <TouchableNativeFeedback
+      <TouchableOpacity
         onPress={this.handleClick}>
         <View style={styles.button}>
           <Text style={styles.text}>Open {this.props.url}</Text>
         </View>
-      </TouchableNativeFeedback>
+      </TouchableOpacity>
     );
   }
 });

Examples/UIExplorer/ListViewExample.js

@@ -58,17 +58,20 @@ var ListViewSimpleExample = React.createClass({
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
           renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
+          renderSeparator={this._renderSeperator}
         />
       </UIExplorerPage>
     );
   },
 
-  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
+  _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
-      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
+      <TouchableHighlight onPress={() => {
+          this._pressRow(rowID);
+          highlightRow(sectionID, rowID);
+        }}>
         <View>
           <View style={styles.row}>
             <Image style={styles.thumb} source={imgSource} />
@@ -96,6 +99,18 @@ var ListViewSimpleExample = React.createClass({
       this._genRows(this._pressData)
     )});
   },
+
+  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: adjacentRowHighlighted ? 4 : 1,
+          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
+        }}
+      />
+    );
+  }
 });
 
 var THUMB_URLS = [
@@ -130,10 +145,6 @@ var styles = StyleSheet.create({
     padding: 10,
     backgroundColor: '#F6F6F6',
   },
-  separator: {
-    height: 1,
-    backgroundColor: '#CCCCCC',
-  },
   thumb: {
     width: 64,
     height: 64,

Examples/UIExplorer/ListViewPagingExample.js

@@ -131,7 +131,7 @@ var ListViewPagingExample = React.createClass({
     };
   },
 
-  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement {
+  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement<any> {
     return (<Thumb text={rowData}/>);
   },
 

Examples/UIExplorer/MapViewExample.js

@@ -252,6 +252,56 @@ var AnnotationExample = React.createClass({
 
 });
 
+var DraggableAnnotationExample = React.createClass({
+
+  createAnnotation(longitude, latitude) {
+    return {
+      longitude,
+      latitude,
+      draggable: true,
+      onDragStateChange: (event) => {
+        if (event.state === 'idle') {
+          this.setState({
+            annotations: [this.createAnnotation(event.longitude, event.latitude)],
+          });
+        }
+        console.log('Drag state: ' + event.state);
+      },
+    };
+  },
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },
+
+  render() {
+    if (this.state.isFirstLoad) {
+      var onRegionChangeComplete = (region) => {
+        //When the MapView loads for the first time, we can create the annotation at the
+        //region that was loaded.
+        this.setState({
+          isFirstLoad: false,
+          annotations: [this.createAnnotation(region.longitude, region.latitude)],
+        });
+      };
+    }
+
+    return (
+      <MapView
+        style={styles.map}
+        onRegionChangeComplete={onRegionChangeComplete}
+        region={this.state.mapRegion}
+        annotations={this.state.annotations}
+      />
+    );
+  },
+
+});
+
 var styles = StyleSheet.create({
   map: {
     height: 150,
@@ -338,12 +388,7 @@ exports.examples = [
   {
     title: 'Draggable pin',
     render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        draggable: true,
-        onDragStateChange: (event) => {
-          console.log('Drag state: ' + event.state);
-        },
-      }}/>;
+      return <DraggableAnnotationExample/>;
     }
   },
   {

Examples/UIExplorer/NativeAnimationsExample.js

@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  View,
+  Text,
+  Animated,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} = ReactNative;
+var UIExplorerButton = require('./UIExplorerButton');
+
+var Tester = React.createClass({
+  current: 0,
+  getInitialState() {
+    return {
+      native: new Animated.Value(0),
+      js: new Animated.Value(0),
+    };
+  },
+
+  onPress() {
+    this.current = this.current ? 0 : 1;
+    const config = {
+      ...this.props.config,
+      toValue: this.current,
+    };
+    try {
+      Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
+    } catch (e) {
+      // uncomment this if you want to get the redbox errors!
+      throw e;
+    }
+    Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
+  },
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this.onPress}>
+        <View>
+          <View>
+            <Text>Native:</Text>
+          </View>
+          <View style={styles.row}>
+            {this.props.children(this.state.native)}
+          </View>
+          <View>
+            <Text>JavaScript:</Text>
+          </View>
+          <View style={styles.row}>
+            {this.props.children(this.state.js)}
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 10,
+    zIndex: 1,
+  },
+  block: {
+    width: 50,
+    height: 50,
+    backgroundColor: 'blue',
+  },
+});
+
+exports.framework = 'React';
+exports.title = 'Native Animated Example';
+exports.description = 'Test out Native Animations';
+
+exports.examples = [
+{
+    title: 'Multistage With Multiply and rotation',
+    description: 'description',
+    render: function() {
+      return (
+          <Tester
+            type="timing"
+            config={{ duration: 1000 }}
+          >
+            {anim => (
+              <Animated.View
+                style={[
+                  styles.block,
+                  {
+                    transform: [
+                      {
+                        translateX: anim.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0, 200],
+                        })
+                      },
+                      {
+                        translateY: anim.interpolate({
+                          inputRange: [0, 0.5, 1],
+                          outputRange: [0, 50, 0],
+                        })
+                      },
+                      {
+                        rotate: anim.interpolate({
+                          inputRange: [0, 0.5, 1],
+                          outputRange: ['0deg', '90deg', '0deg'],
+                        })
+                      }
+                    ],
+                    opacity: Animated.multiply(
+                      anim.interpolate({
+                        inputRange: [0,1],
+                        outputRange: [1,0]
+                      }), anim.interpolate({
+                        inputRange: [0,1],
+                        outputRange: [0.25,1]
+                    })
+                    )
+                  }
+                ]}
+              />
+            )}
+          </Tester>
+      );
+    },
+  },
+  {
+    title: 'Multistage With Multiply',
+    description: 'description',
+    render: function() {
+      return (
+          <Tester
+            type="timing"
+            config={{ duration: 1000 }}
+          >
+            {anim => (
+              <Animated.View
+                style={[
+                  styles.block,
+                  {
+                    transform: [
+                      {
+                        translateX: anim.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0, 200],
+                        })
+                      },
+                      {
+                        translateY: anim.interpolate({
+                          inputRange: [0, 0.5, 1],
+                          outputRange: [0, 50, 0],
+                        })
+                      }
+                    ],
+                    opacity: Animated.multiply(
+                      anim.interpolate({
+                        inputRange: [0,1],
+                        outputRange: [1,0]
+                      }), anim.interpolate({
+                        inputRange: [0,1],
+                        outputRange: [0.25,1]
+                    })
+                    )
+                  }
+                ]}
+              />
+            )}
+          </Tester>
+      );
+    },
+  },
+  {
+    title: 'Scale interpolation',
+    description: 'description',
+    render: function() {
+      return (
+        <Tester
+          type="timing"
+          config={{ duration: 1000 }}
+        >
+          {anim => (
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  transform: [
+                    {
+                      scale: anim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, 1.4],
+                      })
+                    }
+                  ],
+                }
+              ]}
+            />
+          )}
+        </Tester>
+      );
+    },
+  },
+  {
+    title: 'Opacity without interpolation',
+    description: 'description',
+    render: function() {
+      return (
+        <Tester
+          type="timing"
+          config={{ duration: 1000 }}
+        >
+          {anim => (
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  opacity: anim
+                }
+              ]}
+            />
+          )}
+        </Tester>
+      );
+    },
+  },
+  {
+    title: 'Rotate interpolation',
+    description: 'description',
+    render: function() {
+      return (
+        <Tester
+          type="timing"
+          config={{ duration: 1000 }}
+        >
+          {anim => (
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  transform: [
+                    {
+                      rotate: anim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: ['0deg', '90deg'],
+                      })
+                    }
+                  ],
+                }
+              ]}
+            />
+          )}
+        </Tester>
+      );
+    },
+  },
+  {
+    title: 'translateX => Animated.spring',
+    description: 'description',
+    render: function() {
+      return (
+        <Tester
+          type="spring"
+          config={{ bounciness: 0 }}
+        >
+          {anim => (
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  transform: [
+                    {
+                      translateX: anim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, 100],
+                      })
+                    }
+                  ],
+                }
+              ]}
+            />
+          )}
+        </Tester>
+      );
+    },
+  },
+];

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/BreadcrumbNavSample.js

@@ -1,165 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity
-} = ReactNative;
-
-var _getRandomRoute = function() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var BreadcrumbNavSample = React.createClass({
-
-  componentWillMount: function() {
-    this._navBarRouteMapper = {
-      rightContentForRoute: function(route, navigator) {
-        return null;
-      },
-      titleContentForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => navigator.push(_getRandomRoute())}>
-            <Text style={styles.titleText}>{route.title}</Text>
-          </TouchableOpacity>
-        );
-      },
-      iconForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => { navigator.popToRoute(route); }}
-            style={styles.crumbIconPlaceholder}
-          />
-        );
-      },
-      separatorForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={navigator.pop}
-            style={styles.crumbSeparatorPlaceholder}
-          />
-        );
-      }
-    };
-  },
-
-  _renderScene: function(route, navigator) {
-    return (
-      <ScrollView style={styles.scene}>
-        <NavButton
-          onPress={() => { navigator.push(_getRandomRoute()); }}
-          text="Push"
-        />
-        <NavButton
-          onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]); }}
-          text="Reset w/ 2 scenes"
-        />
-        <NavButton
-          onPress={() => { navigator.popToTop(); }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => { navigator.replace(_getRandomRoute()); }}
-          text="Replace"
-        />
-        <NavButton
-          onPress={() => { this.props.navigator.pop(); }}
-          text="Close breadcrumb example"
-        />
-      </ScrollView>
-    );
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        style={styles.container}
-        initialRoute={_getRandomRoute()}
-        renderScene={this._renderScene}
-        navigationBar={
-          <Navigator.BreadcrumbNavigationBar
-            routeMapper={this._navBarRouteMapper}
-          />
-        }
-      />
-    );
-  },
-
-
-
-});
-
-var styles = StyleSheet.create({
-  scene: {
-    paddingTop: 50,
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  container: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  titleText: {
-    fontSize: 18,
-    color: '#666666',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    lineHeight: 32,
-  },
-  crumbIconPlaceholder: {
-    flex: 1,
-    backgroundColor: '#666666',
-  },
-  crumbSeparatorPlaceholder: {
-    flex: 1,
-    backgroundColor: '#aaaaaa',
-  },
-});
-
-module.exports = BreadcrumbNavSample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/JumpingNavSample.js

@@ -1,219 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  TabBarIOS,
-  Text,
-  TouchableHighlight,
-  View,
-} = ReactNative;
-
-var _getRandomRoute = function() {
-  return {
-    randNumber: Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var ROUTE_STACK = [
-  _getRandomRoute(),
-  _getRandomRoute(),
-  _getRandomRoute(),
-];
-var INIT_ROUTE_INDEX = 1;
-
-class JumpingNavBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tabIndex: props.initTabIndex,
-    };
-  }
-  handleWillFocus(route) {
-    var tabIndex = ROUTE_STACK.indexOf(route);
-    this.setState({ tabIndex, });
-  }
-  render() {
-    return (
-      <View style={styles.tabs}>
-        <TabBarIOS>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_notification')}
-            selected={this.state.tabIndex === 0}
-            onPress={() => {
-              this.props.onTabIndex(0);
-              this.setState({ tabIndex: 0, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_list')}
-            selected={this.state.tabIndex === 1}
-            onPress={() => {
-              this.props.onTabIndex(1);
-              this.setState({ tabIndex: 1, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_settings')}
-            selected={this.state.tabIndex === 2}
-            onPress={() => {
-              this.props.onTabIndex(2);
-              this.setState({ tabIndex: 2, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-        </TabBarIOS>
-      </View>
-    );
-  }
-}
-
-var JumpingNavSample = React.createClass({
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        ref={(navigator) => {
-          this._navigator = navigator;
-        }}
-        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
-        initialRouteStack={ROUTE_STACK}
-        renderScene={this.renderScene}
-        configureScene={() => ({
-          ...Navigator.SceneConfigs.HorizontalSwipeJump,
-        })}
-        navigationBar={
-          <JumpingNavBar
-            ref={(navBar) => { this.navBar = navBar; }}
-            initTabIndex={INIT_ROUTE_INDEX}
-            routeStack={ROUTE_STACK}
-            onTabIndex={(index) => {
-              this._navigator.jumpTo(ROUTE_STACK[index]);
-            }}
-          />
-        }
-      />
-    );
-  },
-
-  renderScene: function(route, navigator) {
-    var backBtn;
-    var forwardBtn;
-    if (ROUTE_STACK.indexOf(route) !== 0) {
-      backBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpBack();
-          }}
-          text="jumpBack"
-        />
-      );
-    }
-    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
-      forwardBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpForward();
-          }}
-          text="jumpForward"
-        />
-      );
-    }
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>#{route.randNumber}</Text>
-        {backBtn}
-        {forwardBtn}
-        <NavButton
-          onPress={() => {
-            navigator.jumpTo(ROUTE_STACK[1]);
-          }}
-          text="jumpTo middle route"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Exit Navigation Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Came from jumping example',
-            });
-          }}
-          text="Nav Menu"
-        />
-      </ScrollView>
-    );
-  },
-});
-
-var styles = StyleSheet.create({
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  appContainer: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-  tabs: {
-    height: 50,
-  }
-});
-
-module.exports = JumpingNavSample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/LegacyNavigatorExample.js

@@ -1,220 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} = ReactNative;
-
-var BreadcrumbNavSample = require('./BreadcrumbNavSample');
-var NavigationBarSample = require('./NavigationBarSample');
-var JumpingNavSample = require('./JumpingNavSample');
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-class NavMenu extends React.Component {
-  render() {
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>{this.props.message}</Text>
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe right to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
-            });
-          }}
-          text="Float in from right"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe down to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
-            });
-          }}
-          text="Float in from bottom"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Pop"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.popToTop();
-          }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'navbar' });
-          }}
-          text="Navbar Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'jumping' });
-          }}
-          text="Jumping Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'breadcrumbs' });
-          }}
-          text="Breadcrumbs Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.onExampleExit();
-          }}
-          text="Exit <LegacyNavigator> Example"
-        />
-      </ScrollView>
-    );
-  }
-}
-
-var TabBarExample = React.createClass({
-
-  statics: {
-    title: '<LegacyNavigator> (Experimental)',
-    description: 'Experimental navigator that ports the API of the current ' +
-      'Navigator component',
-  },
-
-  renderScene: function(route, nav) {
-    switch (route.id) {
-      case 'navbar':
-        return <NavigationBarSample navigator={nav} />;
-      case 'breadcrumbs':
-        return <BreadcrumbNavSample navigator={nav} />;
-      case 'jumping':
-        return <JumpingNavSample navigator={nav} />;
-      default:
-        return (
-          <NavMenu
-            message={route.message}
-            navigator={nav}
-            onExampleExit={this.props.onExampleExit}
-          />
-        );
-    }
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        ref={this._setNavigatorRef}
-        style={styles.container}
-        initialRoute={{ message: 'First Scene', }}
-        renderScene={this.renderScene}
-        configureScene={(route) => {
-          if (route.sceneConfig) {
-            return route.sceneConfig;
-          }
-          return Navigator.SceneConfigs.FloatFromBottom;
-        }}
-      />
-    );
-  },
-
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  _setNavigatorRef: function(navigator) {
-    if (navigator !== this._navigator) {
-      this._navigator = navigator;
-
-      if (navigator) {
-        var callback = (event) => {
-          console.log(
-            `LegacyNavigator: event ${event.type}`,
-            {
-              route: JSON.stringify(event.data.route),
-              target: event.target,
-              type: event.type,
-            }
-          );
-        };
-        // Observe focus change events from the owner.
-        this._listeners = [
-          navigator.navigationContext.addListener('willfocus', callback),
-          navigator.navigationContext.addListener('didfocus', callback),
-        ];
-      }
-    }
-  },
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  container: {
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#ccc',
-  }
-});
-
-TabBarExample.external = true;
-
-module.exports = TabBarExample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/NavigationBarSample.js

@@ -1,202 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-} = ReactNative;
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var NavigationBarRouteMapper = {
-
-  LeftButton: function(route, navigator, index, navState) {
-    if (index === 0) {
-      return null;
-    }
-
-    var previousRoute = navState.routeStack[index - 1];
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.pop()}
-        style={styles.navBarLeftButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          {previousRoute.title}
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  RightButton: function(route, navigator, index, navState) {
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.push(newRandomRoute())}
-        style={styles.navBarRightButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          Next
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  Title: function(route, navigator, index, navState) {
-    return (
-      <Text style={[styles.navBarText, styles.navBarTitleText]}>
-        {route.title} [{index}]
-      </Text>
-    );
-  },
-
-};
-
-function newRandomRoute() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-}
-
-var NavigationBarSample = React.createClass({
-
-  componentWillMount: function() {
-    var navigator = this.props.navigator;
-
-    var callback = (event) => {
-      console.log(
-        `NavigationBarSample : event ${event.type}`,
-        {
-          route: JSON.stringify(event.data.route),
-          target: event.target,
-          type: event.type,
-        }
-      );
-    };
-
-    // Observe focus change events from this component.
-    this._listeners = [
-      navigator.navigationContext.addListener('willfocus', callback),
-      navigator.navigationContext.addListener('didfocus', callback),
-    ];
-  },
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        initialRoute={newRandomRoute()}
-        renderScene={(route, navigator) => (
-          <ScrollView style={styles.scene}>
-            <Text style={styles.messageText}>{route.content}</Text>
-            <NavButton
-              onPress={() => {
-                navigator.immediatelyResetRouteStack([
-                  newRandomRoute(),
-                  newRandomRoute(),
-                  newRandomRoute(),
-                ]);
-              }}
-              text="Reset w/ 3 scenes"
-            />
-            <NavButton
-              onPress={() => {
-                this.props.navigator.pop();
-              }}
-              text="Exit NavigationBar Example"
-            />
-          </ScrollView>
-        )}
-        navigationBar={
-          <Navigator.NavigationBar
-            routeMapper={NavigationBarRouteMapper}
-            style={styles.navBar}
-          />
-        }
-      />
-    );
-  },
-
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  navBar: {
-    backgroundColor: 'white',
-  },
-  navBarText: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-  navBarTitleText: {
-    color: '#373E4D',
-    fontWeight: '500',
-    marginVertical: 9,
-  },
-  navBarLeftButton: {
-    paddingLeft: 10,
-  },
-  navBarRightButton: {
-    paddingRight: 10,
-  },
-  navBarButtonText: {
-    color: '#5890FF',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-});
-
-module.exports = NavigationBarSample;

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -1,161 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const React = require('react');
-const ReactNative = require('react-native');
-
-const {
-  Animated,
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-} = ReactNative;
-
-const  NavigationExampleRow = require('./NavigationExampleRow');
-
-const  {
-  AnimatedView: NavigationAnimatedView,
-  Card: NavigationCard,
-  Header: NavigationHeader,
-  Reducer: NavigationReducer,
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
-
-const NavigationBasicReducer = NavigationReducer.StackReducer({
-  getPushedReducerForAction: (action) => {
-    if (action.type === 'push') {
-      return (state) => state || {key: action.key};
-    }
-    return null;
-  },
-  getReducerForState: (initialState) => (state) => state || initialState,
-  initialState: {
-    key: 'AnimatedExampleStackKey',
-    index: 0,
-    children: [
-      {key: 'First Route'},
-    ],
-  },
-});
-
-class NavigationAnimatedExample extends React.Component {
-  componentWillMount() {
-    this._renderCard = this._renderCard.bind(this);
-    this._renderHeader = this._renderHeader.bind(this);
-    this._renderNavigation = this._renderNavigation.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-    this._renderTitleComponent = this._renderTitleComponent.bind(this);
-  }
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        persistenceKey="NavigationAnimExampleState"
-        renderNavigation={this._renderNavigation}
-      />
-    );
-  }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-  _renderNavigation(navigationState, onNavigate) {
-    if (!navigationState) {
-      return null;
-    }
-    return (
-      <NavigationAnimatedView
-        navigationState={navigationState}
-        style={styles.animatedView}
-        renderOverlay={this._renderHeader}
-        applyAnimation={(pos, navState) => {
-          Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
-        }}
-        renderScene={this._renderCard}
-      />
-    );
-  }
-
-  _renderHeader(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <NavigationHeader
-        {...props}
-        renderTitleComponent={this._renderTitleComponent}
-      />
-    );
-  }
-
-  _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <NavigationHeader.Title>
-        {props.scene.navigationState.key}
-      </NavigationHeader.Title>
-    );
-  }
-
-  _renderCard(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <NavigationCard
-        {...props}
-        key={'card_' + props.scene.navigationState.key}
-        renderScene={this._renderScene}
-      />
-    );
-  }
-
-  _renderScene(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text={props.scene.navigationState.key}
-        />
-        <NavigationExampleRow
-          text="Push!"
-          onPress={() => {
-            props.onNavigate({
-              type: 'push',
-              key: 'Route #' + props.scenes.length,
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Animated Nav Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  animatedView: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: NavigationHeader.HEIGHT,
-  },
-});
-
-module.exports = NavigationAnimatedExample;

Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js

@@ -1,101 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const React = require('react');
-const ReactNative = require('react-native');
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-} = ReactNative;
-const NavigationExampleRow = require('./NavigationExampleRow');
-const {
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-const StackReducer = NavigationReducer.StackReducer;
-
-const NavigationBasicReducer = NavigationReducer.StackReducer({
-  getPushedReducerForAction: (action) => {
-    if (action.type === 'push') {
-      return (state) => state || {key: action.key};
-    }
-    return null;
-  },
-  getReducerForState: (initialState) => (state) => state || initialState,
-  initialState: {
-    key: 'BasicExampleStackKey',
-    index: 0,
-    children: [
-      {key: 'First Route'},
-    ],
-  },
-});
-
-const NavigationBasicExample = React.createClass({
-  render: function() {
-    return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        persistenceKey="NavigationBasicExampleState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navState, onNavigate) => {
-          if (!navState) { return null; }
-          return (
-            <ScrollView style={styles.topView}>
-              <NavigationExampleRow
-                text={`Current page: ${navState.children[navState.index].key}`}
-              />
-              <NavigationExampleRow
-                text={`Push page #${navState.children.length}`}
-                onPress={() => {
-                  onNavigate({ type: 'push', key: 'page #' + navState.children.length });
-                }}
-              />
-              <NavigationExampleRow
-                text="pop"
-                onPress={() => {
-                  onNavigate(NavigationRootContainer.getBackAction());
-                }}
-              />
-              <NavigationExampleRow
-                text="Exit Basic Nav Example"
-                onPress={this.props.onExampleExit}
-              />
-            </ScrollView>
-          );
-        }}
-      />
-    );
-  },
-
-  handleBackAction: function() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  },
-
-});
-
-const styles = StyleSheet.create({
-  topView: {
-    backgroundColor: '#E9E9EF',
-    flex: 1,
-    paddingTop: 30,
-  },
-});
-
-module.exports = NavigationBasicExample;

Examples/UIExplorer/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js

@@ -0,0 +1,488 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ReactNative = require('react-native');
+
+/**
+ * Basic example that shows how to use <NavigationCardStack /> to build
+ * an app with composite navigation system.
+ */
+
+const {
+  Component,
+  PropTypes,
+} = React;
+
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  Header: NavigationHeader,
+  PropTypes: NavigationPropTypes,
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+// First Step.
+// Define what app navigation state will look like.
+function createAppNavigationState(): Object {
+  return  {
+    // Three tabs.
+    tabs: {
+      index: 0,
+      routes: [
+        {key: 'apple'},
+        {key: 'banana'},
+        {key: 'orange'},
+      ],
+    },
+    // Scenes for the `apple` tab.
+    apple: {
+      index: 0,
+      routes: [{key: 'Apple Home'}],
+    },
+    // Scenes for the `banana` tab.
+    banana: {
+      index: 0,
+      routes: [{key: 'Banana Home'}],
+    },
+    // Scenes for the `orange` tab.
+    orange: {
+      index: 0,
+      routes: [{key: 'Orange Home'}],
+    },
+  };
+}
+
+// Next step.
+// Define what app navigation state shall be updated.
+function updateAppNavigationState(
+  state: Object,
+  action: Object,
+): Object {
+  let {type} = action;
+  if (type === 'BackAction') {
+    type = 'pop';
+  }
+
+  switch (type) {
+    case 'push': {
+      // Push a route into the scenes stack.
+      const route: Object = action.route;
+      const {tabs} = state;
+      const tabKey = tabs.routes[tabs.index].key;
+      const scenes = state[tabKey];
+      const nextScenes = NavigationStateUtils.push(scenes, route);
+      if (scenes !== nextScenes) {
+        return {
+          ...state,
+          [tabKey]: nextScenes,
+        };
+      }
+      break;
+    }
+
+    case 'pop': {
+      // Pops a route from the scenes stack.
+      const {tabs} = state;
+      const tabKey = tabs.routes[tabs.index].key;
+      const scenes = state[tabKey];
+      const nextScenes = NavigationStateUtils.pop(scenes);
+      if (scenes !== nextScenes) {
+        return {
+          ...state,
+          [tabKey]: nextScenes,
+        };
+      }
+      break;
+    }
+
+    case 'selectTab': {
+      // Switches the tab.
+      const tabKey: string = action.tabKey;
+      const tabs = NavigationStateUtils.jumpTo(state.tabs, tabKey);
+      if (tabs !== state.tabs) {
+        return {
+          ...state,
+          tabs,
+        };
+      }
+    }
+  }
+  return state;
+}
+
+// Next step.
+// Defines a helper function that creates a HOC (higher-order-component)
+// which provides a function `navigate` through component props. The
+// `navigate` function will be used to invoke navigation changes.
+// This serves a convenient way for a component to navigate.
+function createAppNavigationContainer(ComponentClass) {
+  const key = '_yourAppNavigationContainerNavigateCall';
+
+  class Container extends Component {
+    static contextTypes = {
+      [key]: PropTypes.func,
+    };
+
+    static childContextTypes = {
+      [key]: PropTypes.func.isRequired,
+    };
+
+    static propTypes = {
+      navigate: PropTypes.func,
+    };
+
+    getChildContext(): Object {
+      return {
+        [key]: this.context[key] || this.props.navigate,
+      };
+    }
+
+    render(): ReactElement {
+      const navigate = this.context[key] || this.props.navigate;
+      return <ComponentClass {...this.props} navigate={navigate} />;
+    }
+  }
+
+  return Container;
+}
+
+// Next step.
+// Define a component for your application that owns the navigation state.
+class YourApplication extends Component {
+
+  static propTypes = {
+    onExampleExit: PropTypes.func,
+  };
+
+  // This sets up the initial navigation state.
+  constructor(props, context) {
+    super(props, context);
+    // This sets up the initial navigation state.
+    this.state = createAppNavigationState();
+    this._navigate = this._navigate.bind(this);
+  }
+
+  render(): ReactElement {
+    // User your own navigator (see next step).
+    return (
+      <YourNavigator
+        appNavigationState={this.state}
+        navigate={this._navigate}
+      />
+    );
+  }
+
+  // This public method is optional. If exists, the UI explorer will call it
+  // the "back button" is pressed. Normally this is the cases for Android only.
+  handleBackAction(): boolean {
+    return this._navigate({type: 'pop'});
+  }
+
+  // This handles the navigation state changes. You're free and responsible
+  // to define the API that changes that navigation state. In this exmaple,
+  // we'd simply use a `updateAppNavigationState` to update the navigation
+  // state.
+  _navigate(action: Object): void {
+    if (action.type === 'exit') {
+      // Exits the example. `this.props.onExampleExit` is provided
+      // by the UI Explorer.
+      this.props.onExampleExit && this.props.onExampleExit();
+      return;
+    }
+
+    const state = updateAppNavigationState(
+      this.state,
+      action,
+    );
+
+    // `updateAppNavigationState` (which uses NavigationStateUtils) gives you
+    // back the same `state` if nothing has changed. You could use
+    // that to avoid redundant re-rendering.
+    if (this.state !== state) {
+      this.setState(state);
+    }
+  }
+}
+
+// Next step.
+// Define your own controlled navigator.
+const YourNavigator = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    appNavigationState: PropTypes.shape({
+      apple: NavigationPropTypes.navigationState.isRequired,
+      banana: NavigationPropTypes.navigationState.isRequired,
+      orange: NavigationPropTypes.navigationState.isRequired,
+      tabs: NavigationPropTypes.navigationState.isRequired,
+    }),
+    navigate: PropTypes.func.isRequired,
+  };
+
+  // This sets up the methods (e.g. Pop, Push) for navigation.
+  constructor(props: any, context: any) {
+    super(props, context);
+    this._back = this._back.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  // Now use the `NavigationCardStack` to render the scenes.
+  render(): ReactElement {
+    const {appNavigationState} = this.props;
+    const {tabs} = appNavigationState;
+    const tabKey = tabs.routes[tabs.index].key;
+    const scenes = appNavigationState[tabKey];
+
+    return (
+      <View style={styles.navigator}>
+        <NavigationCardStack
+          key={'stack_' + tabKey}
+          onNavigateBack={this._back}
+          navigationState={scenes}
+          renderOverlay={this._renderHeader}
+          renderScene={this._renderScene}
+          style={styles.navigatorCardStack}
+        />
+        <YourTabs
+          navigationState={tabs}
+        />
+      </View>
+    );
+  }
+
+  // Render the header.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderHeader(sceneProps: Object): ReactElement {
+    return (
+      <YourHeader
+        {...sceneProps}
+      />
+    );
+  }
+
+  // Render a scene for route.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderScene(sceneProps: Object): ReactElement {
+    return (
+      <YourScene
+        {...sceneProps}
+      />
+    );
+  }
+
+  _back() {
+    this.props.navigate({type: 'pop'});
+  }
+});
+
+// Next step.
+// Define your own header.
+const YourHeader = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    ...NavigationPropTypes.SceneRendererProps,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._back = this._back.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.bind(this);
+  }
+
+  render(): ReactElement {
+    return (
+      <NavigationHeader
+        {...this.props}
+        renderTitleComponent={this._renderTitleComponent}
+        onNavigateBack={this._back}
+      />
+    );
+  }
+
+  _back(): void {
+    this.props.navigate({type: 'pop'});
+  }
+
+  _renderTitleComponent(): ReactElement {
+    return (
+      <NavigationHeader.Title>
+        {this.props.scene.route.key}
+      </NavigationHeader.Title>
+    );
+  }
+});
+
+// Next step.
+// Define your own scene.
+const YourScene = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    ...NavigationPropTypes.SceneRendererProps,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._exit = this._exit.bind(this);
+    this._popRoute = this._popRoute.bind(this);
+    this._pushRoute = this._pushRoute.bind(this);
+  }
+
+  render(): ReactElement {
+    return (
+      <ScrollView style={styles.scrollView}>
+        <NavigationExampleRow
+          text="Push Route"
+          onPress={this._pushRoute}
+        />
+        <NavigationExampleRow
+          text="Pop Route"
+          onPress={this._popRoute}
+        />
+        <NavigationExampleRow
+          text="Exit Header + Scenes + Tabs Example"
+          onPress={this._exit}
+        />
+      </ScrollView>
+    );
+  }
+
+  _pushRoute(): void {
+    // Just push a route with a new unique key.
+    const route = {key: '[' + this.props.scenes.length + ']-' + Date.now()};
+    this.props.navigate({type: 'push', route});
+  }
+
+  _popRoute(): void {
+    this.props.navigate({type: 'pop'});
+  }
+
+  _exit(): void {
+    this.props.navigate({type: 'exit'});
+  }
+});
+
+// Next step.
+// Define your own tabs.
+const YourTabs = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    navigationState: NavigationPropTypes.navigationState.isRequired,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+  }
+
+  render(): ReactElement {
+    return (
+      <View style={styles.tabs}>
+        {this.props.navigationState.routes.map(this._renderTab, this)}
+      </View>
+    );
+  }
+
+  _renderTab(route: Object, index: number): ReactElement {
+    return (
+      <YourTab
+        key={route.key}
+        route={route}
+        selected={this.props.navigationState.index === index}
+      />
+    );
+  }
+});
+
+// Next step.
+// Define your own Tab
+const YourTab = createAppNavigationContainer(class extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func.isRequired,
+    route: NavigationPropTypes.navigationRoute.isRequired,
+    selected: PropTypes.bool.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._onPress = this._onPress.bind(this);
+  }
+
+  render(): ReactElement {
+    const style = [styles.tabText];
+    if (this.props.selected) {
+      style.push(styles.tabSelected);
+    }
+    return (
+      <TouchableOpacity style={styles.tab} onPress={this._onPress}>
+        <Text style={style}>
+          {this.props.route.key}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  _onPress() {
+    this.props.navigate({type: 'selectTab', tabKey: this.props.route.key});
+  }
+});
+
+const styles = StyleSheet.create({
+  navigator: {
+    flex: 1,
+  },
+  navigatorCardStack: {
+    flex: 20,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+  tabs: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tab: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  tabText: {
+    color: '#222',
+    fontWeight: '500',
+  },
+  tabSelected: {
+    color: 'blue',
+  },
+});
+
+module.exports = YourApplication;

Examples/UIExplorer/NavigationExperimental/NavigationCardStack-example.js

@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ReactNative = require('react-native');
+
+/**
+ * Basic example that shows how to use <NavigationCardStack /> to build
+ * an app with controlled navigation system.
+ */
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+// Step 1:
+// Define a component for your application.
+class YourApplication extends React.Component {
+
+  // This sets up the initial navigation state.
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      // This defines the initial navigation state.
+      navigationState: {
+        index: 0, // starts with first route focused.
+        routes: [{key: 'Welcome'}], // starts with only one route.
+      },
+    };
+
+    this._exit = this._exit.bind(this);
+    this._onNavigationChange = this._onNavigationChange.bind(this);
+  }
+
+  // User your own navigator (see Step 2).
+  render(): ReactElement {
+    return (
+      <YourNavigator
+        navigationState={this.state.navigationState}
+        onNavigationChange={this._onNavigationChange}
+        onExit={this._exit}
+      />
+    );
+  }
+
+  // This handles the navigation state changes. You're free and responsible
+  // to define the API that changes that navigation state. In this exmaple,
+  // we'd simply use a `function(type: string)` to update the navigation state.
+  _onNavigationChange(type: string): void {
+    let {navigationState} = this.state;
+    switch (type) {
+      case 'push':
+        // push a new route.
+        const route = {key: 'route-' + Date.now()};
+        navigationState = NavigationStateUtils.push(navigationState, route);
+        break;
+
+      case 'pop':
+        navigationState = NavigationStateUtils.pop(navigationState);
+        break;
+    }
+
+    // NavigationStateUtils gives you back the same `navigationState` if nothing
+    // has changed. You could use that to avoid redundant re-rendering.
+    if (this.state.navigationState !== navigationState) {
+      this.setState({navigationState});
+    }
+  }
+
+  // Exits the example. `this.props.onExampleExit` is provided
+  // by the UI Explorer.
+  _exit(): void {
+    this.props.onExampleExit && this.props.onExampleExit();
+  }
+
+  // This public method is optional. If exists, the UI explorer will call it
+  // the "back button" is pressed. Normally this is the cases for Android only.
+  handleBackAction(): boolean {
+    return this._onNavigationChange('pop');
+  }
+}
+
+// Step 2:
+// Define your own controlled navigator.
+//
+//      +------------+
+//    +-+            |
+//  +-+ |            |
+//  | | |            |
+//  | | |   Active   |
+//  | | |   Scene    |
+//  | | |            |
+//  +-+ |            |
+//    +-+            |
+//      +------------+
+//
+class YourNavigator extends React.Component {
+
+  // This sets up the methods (e.g. Pop, Push) for navigation.
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
+    this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
+
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  // Now use the `NavigationCardStack` to render the scenes.
+  render(): ReactElement {
+    return (
+      <NavigationCardStack
+        onNavigateBack={this._onPopRoute}
+        navigationState={this.props.navigationState}
+        renderScene={this._renderScene}
+        style={styles.navigator}
+      />
+    );
+  }
+
+  // Render a scene for route.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderScene(sceneProps: Object): ReactElement {
+    return (
+      <YourScene
+        route={sceneProps.scene.route}
+        onPushRoute={this._onPushRoute}
+        onPopRoute={this._onPopRoute}
+        onExit={this.props.onExit}
+      />
+    );
+  }
+}
+
+// Step 3:
+// Define your own scene.
+class YourScene extends React.Component {
+  render() {
+    return (
+      <ScrollView style={styles.scrollView}>
+        <NavigationExampleRow
+          text={'route = ' + this.props.route.key}
+        />
+        <NavigationExampleRow
+          text="Push Route"
+          onPress={this.props.onPushRoute}
+        />
+        <NavigationExampleRow
+          text="Pop Route"
+          onPress={this.props.onPopRoute}
+        />
+        <NavigationExampleRow
+          text="Exit Card Stack Example"
+          onPress={this.props.onExit}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  navigator: {
+    flex: 1,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+});
+
+module.exports = YourApplication;

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -1,157 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-const {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-} = ReactNative;
-
-const {
-  CardStack: NavigationCardStack,
-  StateUtils: NavigationStateUtils,
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
-
-function createReducer(initialState) {
-  return (currentState, action) => {
-    switch (action.type) {
-      case 'RootContainerInitialAction':
-        return initialState;
-
-      case 'push':
-        return NavigationStateUtils.push(currentState, {key: action.key});
-
-      case 'back':
-      case 'pop':
-        return currentState.index > 0 ?
-          NavigationStateUtils.pop(currentState) :
-          currentState;
-
-      default:
-        return currentState;
-    }
-  };
-}
-
-const ExampleReducer = createReducer({
-  index: 0,
-  key: 'exmaple',
-  children: [{key: 'First Route'}],
-});
-
-class NavigationCardStackExample extends React.Component {
-
-  constructor(props, context) {
-    super(props, context);
-    this.state = {isHorizontal: true};
-  }
-
-  componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-    this._toggleDirection = this._toggleDirection.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleReducer}
-        renderNavigation={this._renderNavigation}
-        style={styles.main}
-      />
-    );
-  }
-
-  _renderNavigation(navigationState, onNavigate) {
-    return (
-      <NavigationCardStack
-        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
-        navigationState={navigationState}
-        onNavigate={onNavigate}
-        renderScene={this._renderScene}
-        style={styles.main}
-      />
-    );
-  }
-
-  _renderScene(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text={
-            this.state.isHorizontal ?
-            'direction = "horizontal"' :
-            'direction = "vertical"'
-          }
-          onPress={this._toggleDirection}
-        />
-        <NavigationExampleRow
-          text={'route = ' + props.scene.navigationState.key}
-        />
-        <NavigationExampleRow
-          text="Push Route"
-          onPress={() => {
-            props.onNavigate({
-              type: 'push',
-              key: 'Route ' + props.scenes.length,
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Pop Route"
-          onPress={() => {
-            props.onNavigate({
-              type: 'pop',
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Card Stack Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-
-  _toggleDirection() {
-    this.setState({
-      isHorizontal: !this.state.isHorizontal,
-    });
-  }
-
-}
-
-const styles = StyleSheet.create({
-  main: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: 64
-  },
-});
-
-module.exports = NavigationCardStackExample;

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -1,322 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-const React = require('react');
-const ReactNative = require('react-native');
-const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationExampleTabBar = require('./NavigationExampleTabBar');
-
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  View,
-} = ReactNative;
-
-const {
-  CardStack: NavigationCardStack,
-  Container: NavigationContainer,
-  Header: NavigationHeader,
-  Reducer: NavigationReducer,
-  RootContainer: NavigationRootContainer,
-  View: NavigationView,
-} = NavigationExperimental;
-
-
-import type {
-  NavigationParentState,
-  NavigationSceneRenderer,
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
-
-type Action = {
-  isExitAction?: boolean,
-};
-
-const ExampleExitAction = () => ({
-  isExitAction: true,
-});
-
-ExampleExitAction.match = (action: Action) => (
-  action && action.isExitAction === true
-);
-
-const PageAction = (type) => ({
-  type,
-  isPageAction: true,
-});
-
-PageAction.match = (action) => (
-  action && action.isPageAction === true
-);
-
-const ExampleProfilePageAction = (type) => ({
-  ...PageAction(type),
-  isProfilePageAction: true,
-});
-
-ExampleProfilePageAction.match = (action) => (
-  action && action.isProfilePageAction === true
-);
-
-const ExampleInfoAction = () => PageAction('InfoPage');
-
-const ExampleNotifProfileAction = () => ExampleProfilePageAction('NotifProfilePage');
-
-const _jsInstanceUniqueId = '' + Date.now();
-
-let _uniqueIdCount = 0;
-
-function pageStateActionMap(action) {
-  return {
-    key: 'page-' + _jsInstanceUniqueId + '-' + (_uniqueIdCount++),
-    type: action.type,
-  };
-}
-
-const ExampleAppReducer = NavigationReducer.TabsReducer({
-  key: 'AppNavigationState',
-  initialIndex: 0,
-  tabReducers: [
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'notifs',
-        index: 0,
-        children: [
-          {key: 'base', type: 'NotifsPage'},
-        ],
-      },
-    }),
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'settings',
-        index: 0,
-        children: [
-          {key: 'base', type: 'SettingsPage'},
-        ],
-      },
-    }),
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) || ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'profile',
-        index: 0,
-        children: [
-          {key: 'base', type: 'ProfilePage'},
-        ],
-      },
-    }),
-  ],
-});
-
-function stateTypeTitleMap(pageState: any) {
-  switch (pageState.type) {
-    case 'ProfilePage':
-      return 'Profile Page';
-    case 'NotifsPage':
-      return 'Notifications';
-    case 'SettingsPage':
-      return 'Settings';
-    case 'InfoPage':
-      return 'Info Page';
-    case 'NotifProfilePage':
-      return 'Page in Profile';
-  }
-}
-
-class ExampleTabScreen extends React.Component {
-  _renderCard: NavigationSceneRenderer;
-  _renderHeader: NavigationSceneRenderer;
-  _renderScene: NavigationSceneRenderer;
-
-  componentWillMount() {
-    this._renderHeader = this._renderHeader.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationCardStack
-        style={styles.tabContent}
-        navigationState={this.props.navigationState}
-        renderOverlay={this._renderHeader}
-        renderScene={this._renderScene}
-      />
-    );
-  }
-  _renderHeader(props: NavigationSceneRendererProps) {
-    return (
-      <NavigationHeader
-        {...props}
-        renderTitleComponent={this._renderTitleComponent}
-      />
-    );
-  }
-
-  _renderTitleComponent(props: NavigationSceneRendererProps) {
-    return (
-      <NavigationHeader.Title>
-        {stateTypeTitleMap(props.scene.navigationState)}
-      </NavigationHeader.Title>
-    );
-  }
-
-  _renderScene(props: NavigationSceneRendererProps) {
-    const {onNavigate} = props;
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text="Open page"
-          onPress={() => {
-            onNavigate(ExampleInfoAction());
-          }}
-        />
-        <NavigationExampleRow
-          text="Open a page in the profile tab"
-          onPress={() => {
-            onNavigate(ExampleNotifProfileAction());
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Composition Example"
-          onPress={() => {
-            onNavigate(ExampleExitAction());
-          }}
-        />
-      </ScrollView>
-    );
-  }
-}
-ExampleTabScreen = NavigationContainer.create(ExampleTabScreen);
-
-class NavigationCompositionExample extends React.Component {
-  navRootContainer: NavigationRootContainer;
-
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleAppReducer}
-        persistenceKey="NavigationCompositionState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={this.renderApp.bind(this)}
-      />
-    );
-  }
-  handleBackAction(): boolean {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-  renderApp(navigationState: NavigationParentState, onNavigate: Function) {
-    if (!navigationState) {
-      return null;
-    }
-    return (
-      <View style={styles.topView}>
-        <ExampleMainView
-          navigationState={navigationState}
-          onExampleExit={this.props.onExampleExit}
-        />
-        <NavigationExampleTabBar
-          tabs={navigationState.children}
-          index={navigationState.index}
-        />
-      </View>
-    );
-  }
-}
-
-class ExampleMainView extends React.Component {
-  _renderScene: NavigationSceneRenderer;
-
-  componentWillMount() {
-    this._renderScene = this._renderScene.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationView
-        navigationState={this.props.navigationState}
-        style={styles.tabsContent}
-        renderScene={this._renderScene}
-      />
-    );
-  }
-
-  _renderScene(props: NavigationSceneRendererProps): ReactElement {
-    const {scene} = props;
-    return (
-      <ExampleTabScreen
-        key={'tab_screen' + scene.key}
-        navigationState={scene.navigationState}
-        onNavigate={this._handleNavigation.bind(this, scene.key)}
-      />
-    );
-  }
-
-  _handleNavigation(tabKey, action) {
-    if (ExampleExitAction.match(action)) {
-      this.props.onExampleExit();
-      return;
-    }
-    this.props.onNavigate(action);
-  }
-}
-
-ExampleMainView = NavigationContainer.create(ExampleMainView);
-
-const styles = StyleSheet.create({
-  topView: {
-    flex: 1,
-  },
-  tabsContent: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: NavigationHeader.HEIGHT
-  },
-  tabContent: {
-    flex: 1,
-  },
-});
-
-module.exports = NavigationCompositionExample;

Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.js

@@ -1,82 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} = ReactNative;
-const {
-  Container: NavigationContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-const {
-  JumpToAction,
-} = NavigationReducer.TabsReducer;
-
-var NavigationExampleTabBar = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.tabBar}>
-        {this.props.tabs.map(this._renderTab)}
-      </View>
-    );
-  },
-  _renderTab: function(tab, index) {
-    var textStyle = [styles.tabButtonText];
-    if (this.props.index === index) {
-      textStyle.push(styles.selectedTabButtonText);
-    }
-    return (
-      <TouchableOpacity
-        style={styles.tabButton}
-        key={tab.key}
-        onPress={() => {
-          this.props.onNavigate(JumpToAction(index));
-        }}>
-        <Text style={textStyle}>
-          {tab.key}
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-});
-
-NavigationExampleTabBar = NavigationContainer.create(NavigationExampleTabBar);
-
-const styles = StyleSheet.create({
-  tabBar: {
-    height: 50,
-    flexDirection: 'row',
-  },
-  tabButton: {
-    flex: 1,
-  },
-  tabButtonText: {
-    paddingTop: 20,
-    textAlign: 'center',
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  selectedTabButtonText: {
-    color: 'blue',
-  },
-});
-
-module.exports = NavigationExampleTabBar;

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -13,33 +20,26 @@
 */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  AsyncStorage,
-  ScrollView,
-  StyleSheet,
-  View,
-} = ReactNative;
-var NavigationExampleRow = require('./NavigationExampleRow');
+const AsyncStorage = require('AsyncStorage');
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
 
 /*
  * Heads up! This file is not the real navigation example- only a utility to switch between them.
  *
  * To learn how to use the Navigation API, take a look at the following example files:
  */
-var EXAMPLES = {
-  'Tabs': require('./NavigationTabsExample'),
-  'Basic': require('./NavigationBasicExample'),
-  'Animated Example': require('./NavigationAnimatedExample'),
-  'Composition': require('./NavigationCompositionExample'),
-  'Card Stack Example': require('./NavigationCardStackExample'),
-  'Tic Tac Toe': require('./NavigationTicTacToeExample'),
+const EXAMPLES = {
+  'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
+  'CardStack Example': require('./NavigationCardStack-example'),
 };
 
-var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
+const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
-var NavigationExperimentalExample = React.createClass({
+const NavigationExperimentalExample = React.createClass({
   statics: {
     title: 'Navigation (Experimental)',
     description: 'Upcoming navigation APIs and animated navigation views',
@@ -74,7 +74,7 @@ var NavigationExperimentalExample = React.createClass({
   },
 
   _renderMenu: function() {
-    var exitRow = null;
+    let exitRow = null;
     if (this.props.onExampleExit) {
       exitRow = (
         <NavigationExampleRow
@@ -130,7 +130,7 @@ var NavigationExperimentalExample = React.createClass({
       return this._renderMenu();
     }
     if (EXAMPLES[this.state.example]) {
-      var Component = EXAMPLES[this.state.example];
+      const Component = EXAMPLES[this.state.example];
       return (
         <Component
           onExampleExit={this._exitInnerExample}

Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.js

@@ -1,112 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const React = require('react');
-const ReactNative = require('react-native');
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  View,
-} = ReactNative;
-const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationExampleTabBar = require('./NavigationExampleTabBar');
-
-class ExmpleTabPage extends React.Component {
-  render() {
-    const currentTabRoute = this.props.tabs[this.props.index];
-    return (
-      <ScrollView style={styles.tabPage}>
-        <NavigationExampleRow
-          text={`Current Tab is: ${currentTabRoute.key}`}
-        />
-        {this.props.tabs.map((tab, index) => (
-          <NavigationExampleRow
-            key={tab.key}
-            text={`Go to ${tab.key}`}
-            onPress={() => {
-              this.props.onNavigate(NavigationReducer.TabsReducer.JumpToAction(index));
-            }}
-          />
-        ))}
-        <NavigationExampleRow
-          text="Exit Tabs Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-}
-ExmpleTabPage = NavigationContainer.create(ExmpleTabPage);
-
-const ExampleTabsReducer = NavigationReducer.TabsReducer({
-  tabReducers: [
-    (lastRoute) => lastRoute || {key: 'one'},
-    (lastRoute) => lastRoute || {key: 'two'},
-    (lastRoute) => lastRoute || {key: 'three'},
-  ],
-});
-
-class NavigationTabsExample extends React.Component {
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleTabsReducer}
-        persistenceKey="NAV_EXAMPLE_STATE_TABS"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navigationState) => {
-          if (!navigationState) { return null; }
-          return (
-            <View style={styles.topView}>
-              <ExmpleTabPage
-                tabs={navigationState.children}
-                index={navigationState.index}
-                onExampleExit={this.props.onExampleExit}
-              />
-              <NavigationExampleTabBar
-                tabs={navigationState.children}
-                index={navigationState.index}
-              />
-            </View>
-          );
-        }}
-      />
-    );
-  }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  topView: {
-    flex: 1,
-    paddingTop: 30,
-  },
-  tabPage: {
-    backgroundColor: '#E9E9EF',
-  },
-});
-
-module.exports = NavigationTabsExample;

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js

@@ -1,315 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule NavigationTicTacToeExample
- * @flow
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = ReactNative;
-const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
-
-type GameGrid = Array<Array<?string>>;
-
-const evenOddPlayerMap = ['O', 'X'];
-const rowLetterMap = ['a', 'b', 'c'];
-
-function parseGame(game: string): GameGrid {
-  const gameTurns = game ? game.split('-') : [];
-  const grid = Array(3);
-  for (let i = 0; i < 3; i++) {
-    const row = Array(3);
-    for (let j = 0; j < 3; j++) {
-      const turnIndex = gameTurns.indexOf(rowLetterMap[i]+j);
-      if (turnIndex === -1) {
-        row[j] = null;
-      } else {
-        row[j] = evenOddPlayerMap[turnIndex % 2];
-      }
-    }
-    grid[i] = row;
-  }
-  return grid;
-}
-
-function playTurn(game: string, row: number, col: number): string {
-  const turn = rowLetterMap[row] + col;
-  return game ? (game + '-' + turn) : turn;
-}
-
-function getWinner(gameString: string): ?string {
-  const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
-    if (game[i][0] !== null && game[i][0] === game[i][1] &&
-        game[i][0] === game[i][2]) {
-      return game[i][0];
-    }
-  }
-  for (var i = 0; i < 3; i++) {
-    if (game[0][i] !== null && game[0][i] === game[1][i] &&
-        game[0][i] === game[2][i]) {
-      return game[0][i];
-    }
-  }
-  if (game[0][0] !== null && game[0][0] === game[1][1] &&
-      game[0][0] === game[2][2]) {
-    return game[0][0];
-  }
-  if (game[0][2] !== null && game[0][2] === game[1][1] &&
-      game[0][2] === game[2][0]) {
-    return game[0][2];
-  }
-  return null;
-}
-
-function isGameOver(gameString: string): boolean {
-  if (getWinner(gameString)) {
-    return true;
-  }
-  const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
-      if (game[i][j] === null) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
-
-class Cell extends React.Component {
-  props: any;
-  cellStyle() {
-    switch (this.props.player) {
-      case 'X':
-        return styles.cellX;
-      case 'O':
-        return styles.cellO;
-      default:
-        return null;
-    }
-  }
-  textStyle() {
-    switch (this.props.player) {
-      case 'X':
-        return styles.cellTextX;
-      case 'O':
-        return styles.cellTextO;
-      default:
-        return {};
-    }
-  }
-  render() {
-    return (
-      <TouchableHighlight
-        onPress={this.props.onPress}
-        underlayColor="transparent"
-        activeOpacity={0.5}>
-        <View style={[styles.cell, this.cellStyle()]}>
-          <Text style={[styles.cellText, this.textStyle()]}>
-            {this.props.player}
-          </Text>
-        </View>
-      </TouchableHighlight>
-    );
-  }
-}
-
-function GameEndOverlay(props) {
-  if (!isGameOver(props.game)) {
-    return <View />;
-  }
-  const winner = getWinner(props.game);
-  return (
-    <View style={styles.overlay}>
-      <Text style={styles.overlayMessage}>
-        {winner ? winner + ' wins!' : 'It\'s a tie!'}
-      </Text>
-      <TouchableHighlight
-        onPress={() => props.onNavigate(GameActions.Reset())}
-        underlayColor="transparent"
-        activeOpacity={0.5}>
-        <View style={styles.newGame}>
-          <Text style={styles.newGameText}>New Game</Text>
-        </View>
-      </TouchableHighlight>
-    </View>
-  );
-}
-GameEndOverlay = NavigationContainer.create(GameEndOverlay);
-
-function TicTacToeGame(props) {
-  var rows = parseGame(props.game).map((cells, row) =>
-    <View key={'row' + row} style={styles.row}>
-      {cells.map((player, col) =>
-        <Cell
-          key={'cell' + col}
-          player={player}
-          onPress={() => props.onNavigate(GameActions.Turn(row, col))}
-        />
-      )}
-    </View>
-  );
-  return (
-    <View style={styles.container}>
-      <Text
-        style={styles.closeButton}
-        onPress={props.onExampleExit}>
-        Close
-      </Text>
-      <Text style={styles.title}>EXTREME T3</Text>
-      <View style={styles.board}>
-        {rows}
-      </View>
-      <GameEndOverlay
-        game={props.game}
-      />
-    </View>
-  );
-}
-TicTacToeGame = NavigationContainer.create(TicTacToeGame);
-
-const GameActions = {
-  Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
-  Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
-};
-
-function GameReducer(lastGame: ?string, action: Object): string {
-  if (!lastGame) {
-    lastGame = '';
-  }
-  if (action.type === 'TicTacToeResetAction') {
-    return '';
-  }
-  if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
-    return playTurn(lastGame, action.row, action.col);
-  }
-  return lastGame;
-}
-
-class NavigationTicTacToeExample extends React.Component {
-  static GameView = TicTacToeGame;
-  static GameReducer = GameReducer;
-  static GameActions = GameActions;
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={GameReducer}
-        persistenceKey="TicTacToeGameState"
-        renderNavigation={(game) => (
-          <TicTacToeGame
-            game={game}
-            onExampleExit={this.props.onExampleExit}
-          />
-        )}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  closeButton: {
-    position: 'absolute',
-    left: 10,
-    top: 30,
-    fontSize: 14,
-  },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white'
-  },
-  title: {
-    fontFamily: 'Chalkduster',
-    fontSize: 39,
-    marginBottom: 20,
-  },
-  board: {
-    padding: 5,
-    backgroundColor: '#47525d',
-    borderRadius: 10,
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  cell: {
-    width: 80,
-    height: 80,
-    borderRadius: 5,
-    backgroundColor: '#7b8994',
-    margin: 5,
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cellX: {
-    backgroundColor: '#72d0eb',
-  },
-  cellO: {
-    backgroundColor: '#7ebd26',
-  },
-  cellText: {
-    fontSize: 50,
-    fontFamily: 'AvenirNext-Bold',
-  },
-  cellTextX: {
-    color: '#19a9e5',
-  },
-  cellTextO: {
-    color: '#b9dc2f',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(221, 221, 221, 0.5)',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  overlayMessage: {
-    fontSize: 40,
-    marginBottom: 20,
-    marginLeft: 20,
-    marginRight: 20,
-    fontFamily: 'AvenirNext-DemiBold',
-    textAlign: 'center',
-  },
-  newGame: {
-    backgroundColor: '#887766',
-    padding: 20,
-    borderRadius: 5,
-  },
-  newGameText: {
-    color: 'white',
-    fontSize: 20,
-    fontFamily: 'AvenirNext-DemiBold',
-  },
-});
-
-module.exports = NavigationTicTacToeExample;

Examples/UIExplorer/NetInfoExample.js

@@ -162,22 +162,22 @@ exports.examples = [
   {
     title: 'NetInfo.isConnected',
     description: 'Asynchronously load and observe connectivity',
-    render(): ReactElement { return <IsConnected />; }
+    render(): ReactElement<any> { return <IsConnected />; }
   },
   {
     title: 'NetInfo.update',
     description: 'Asynchronously load and observe connectionInfo',
-    render(): ReactElement { return <ConnectionInfoCurrent />; }
+    render(): ReactElement<any> { return <ConnectionInfoCurrent />; }
   },
   {
     title: 'NetInfo.updateHistory',
     description: 'Observed updates to connectionInfo',
-    render(): ReactElement { return <ConnectionInfoSubscription />; }
+    render(): ReactElement<any> { return <ConnectionInfoSubscription />; }
   },
   {
     platform: 'android',
     title: 'NetInfo.isConnectionExpensive (Android)',
     description: 'Asynchronously check isConnectionExpensive',
-    render(): ReactElement { return <IsConnectionExpensive />; }
+    render(): ReactElement<any> { return <IsConnectionExpensive />; }
   },
 ];

Examples/UIExplorer/PermissionsExampleAndroid.android.js

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule PermissionsExampleAndroid
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} = ReactNative;
+const DialogManager = require('NativeModules').DialogManagerAndroid;
+const Permissions = require('NativeModules').AndroidPermissions;
+
+exports.displayName = (undefined: ?string);
+exports.framework = 'React';
+exports.title = '<Permissions>';
+exports.description = 'Permissions example for API 23+.';
+
+const PermissionsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      permission: 'android.permission.WRITE_EXTERNAL_STORAGE',
+      hasPermission: 'Not Checked',
+    };
+  },
+
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Permission Name:</Text>
+        <TextInput
+          autoFocus={true}
+          autoCorrect={false}
+          style={styles.singleLine}
+          onChange={this._updateText}
+          defaultValue={this.state.permission}
+        />
+        <TouchableWithoutFeedback onPress={this._checkPermission}>
+          <View>
+            <Text style={[styles.touchable, styles.text]}>Check Permission</Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <Text style={styles.text}>Permission Status: {this.state.hasPermission}</Text>
+        <TouchableWithoutFeedback onPress={this._shouldExplainPermission}>
+          <View>
+            <Text style={[styles.touchable, styles.text]}>Request Permission</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    );
+  },
+
+  _updateText: function(event: Object) {
+    this.setState({
+      permission: event.nativeEvent.text,
+    });
+  },
+
+  _checkPermission: function() {
+    Permissions.checkPermission(
+      this.state.permission,
+      (permission: string, result: boolean) => {
+        this.setState({
+          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
+        });
+      },
+      this._showError);
+  },
+
+  _shouldExplainPermission: function() {
+    Permissions.shouldShowRequestPermissionRationale(
+      this.state.permission,
+      (permission: string, shouldShow: boolean) => {
+        if (shouldShow) {
+          DialogManager.showAlert(
+            {
+              title: 'Permission Explanation',
+              message:
+                'The app needs the following permission ' + this.state.permission +
+                ' because of reasons. Please approve.'
+            },
+            this._showError,
+            this._requestPermission);
+        } else {
+          this._requestPermission();
+        }
+      },
+      this._showError);
+  },
+
+  _requestPermission: function() {
+    Permissions.requestPermission(
+      this.state.permission,
+      (permission: string, result: boolean) => {
+        this.setState({
+          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
+        });
+      },
+      this._showError);
+  },
+
+  _showError: function() {
+    DialogManager.showAlert({message: 'Error'}, {}, {});
+  }
+});
+
+exports.examples = [
+  {
+    title: 'Permissions Example',
+    description: 'Short example of how to use the runtime permissions API introduced in Android M.',
+    render: () => <PermissionsExample />,
+  },
+];
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  singleLine: {
+    fontSize: 16,
+    padding: 4,
+  },
+  text: {
+    margin: 10,
+  },
+  touchable: {
+    color: '#007AFF',
+  },
+});
+

Examples/UIExplorer/PickerIOSExample.js

@@ -144,13 +144,13 @@ exports.description = 'Render lists of selectable options with UIPickerView.';
 exports.examples = [
 {
   title: '<PickerIOS>',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <PickerExample />;
   },
 },
 {
   title: '<PickerIOS> with custom styling',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <PickerStyleExample />;
   },
 }];

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -49,41 +49,12 @@ var ProgressBarAndroidExample = React.createClass({
 
   statics: {
     title: '<ProgressBarAndroid>',
-    description: 'Visual indicator of progress of some operation. ' +
-        'Shows either a cyclic animation or a horizontal bar.',
+    description: 'Horizontal bar to show the progress of some operation.',
   },
 
   render: function() {
     return (
       <UIExplorerPage title="ProgressBar Examples">
-        <UIExplorerBlock title="Default ProgressBar">
-          <ProgressBar />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Normal ProgressBar">
-          <ProgressBar styleAttr="Normal" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Small ProgressBar">
-          <ProgressBar styleAttr="Small" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Large ProgressBar">
-          <ProgressBar styleAttr="Large" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Inverse ProgressBar">
-          <ProgressBar styleAttr="Inverse" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Small Inverse ProgressBar">
-          <ProgressBar styleAttr="SmallInverse" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Large Inverse ProgressBar">
-          <ProgressBar styleAttr="LargeInverse" />
-        </UIExplorerBlock>
-
         <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
           <ProgressBar styleAttr="Horizontal" />
         </UIExplorerBlock>
@@ -92,10 +63,6 @@ var ProgressBarAndroidExample = React.createClass({
           <MovingBar styleAttr="Horizontal" indeterminate={false} />
         </UIExplorerBlock>
 
-        <UIExplorerBlock title="Large Red ProgressBar">
-          <ProgressBar styleAttr="Large" color="red" />
-        </UIExplorerBlock>
-
         <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar">
           <ProgressBar styleAttr="Horizontal" color="black" />
         </UIExplorerBlock>

Examples/UIExplorer/PushNotificationIOSExample.js

@@ -162,7 +162,7 @@ exports.description = 'Apple PushNotification and badge value';
 exports.examples = [
 {
   title: 'Badge Number',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     PushNotificationIOS.requestPermissions();
 
     return (
@@ -181,13 +181,13 @@ exports.examples = [
 },
 {
   title: 'Push Notifications',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return <NotificationExample />;
   }
 },
 {
   title: 'Notifications Permissions',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return <NotificationPermissionExample />;
   }
 }];

Examples/UIExplorer/RCTRootViewIOSExample.js

@@ -83,7 +83,7 @@ exports.description = 'Examples that show useful methods when embedding React Na
 exports.examples = [
 {
   title: 'Updating app properties in runtime',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return (
       <AppPropertiesUpdateExample/>
     );
@@ -91,7 +91,7 @@ exports.examples = [
 },
 {
   title: 'RCTRootView\'s size flexibility',
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return (
       <RootViewSizeFlexibilityExample/>
     );

Examples/UIExplorer/SegmentedControlIOSExample.js

@@ -145,26 +145,26 @@ exports.description = 'Native segmented control';
 exports.examples = [
   {
     title: 'Segmented controls can have values',
-    render(): ReactElement { return <BasicSegmentedControlExample />; }
+    render(): ReactElement<any> { return <BasicSegmentedControlExample />; }
   },
   {
     title: 'Segmented controls can have a pre-selected value',
-    render(): ReactElement { return <PreSelectedSegmentedControlExample />; }
+    render(): ReactElement<any> { return <PreSelectedSegmentedControlExample />; }
   },
   {
     title: 'Segmented controls can be momentary',
-    render(): ReactElement { return <MomentarySegmentedControlExample />; }
+    render(): ReactElement<any> { return <MomentarySegmentedControlExample />; }
   },
   {
     title: 'Segmented controls can be disabled',
-    render(): ReactElement { return <DisabledSegmentedControlExample />; }
+    render(): ReactElement<any> { return <DisabledSegmentedControlExample />; }
   },
   {
     title: 'Custom colors can be provided',
-    render(): ReactElement { return <ColorSegmentedControlExample />; }
+    render(): ReactElement<any> { return <ColorSegmentedControlExample />; }
   },
   {
     title: 'Change events can be detected',
-    render(): ReactElement { return <EventSegmentedControlExample />; }
+    render(): ReactElement<any> { return <EventSegmentedControlExample />; }
   }
 ];

Examples/UIExplorer/SliderExample.js

@@ -94,19 +94,19 @@ exports.description = 'Slider input for numeric values';
 exports.examples = [
   {
     title: 'Default settings',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample />;
     }
   },
   {
     title: 'Initial value: 0.5',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample value={0.5} />;
     }
   },
   {
     title: 'minimumValue: -1, maximumValue: 2',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumValue={-1}
@@ -117,13 +117,13 @@ exports.examples = [
   },
   {
     title: 'step: 0.25',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample step={0.25} />;
     }
   },
   {
     title: 'onSlidingComplete',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SlidingCompleteExample />
       );
@@ -132,7 +132,7 @@ exports.examples = [
   {
     title: 'Custom min/max track tint color',
     platform: 'ios',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumTrackTintColor={'red'}
@@ -144,21 +144,21 @@ exports.examples = [
   {
     title: 'Custom thumb image',
     platform: 'ios',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     }
   },
   {
     title: 'Custom track image',
     platform: 'ios',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample trackImage={require('./slider.png')} />;
     }
   },
   {
     title: 'Custom min/max track image',
     platform: 'ios',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumTrackImage={require('./slider-left.png')}

Examples/UIExplorer/SliderIOSExample.js

@@ -64,13 +64,13 @@ exports.description = 'Slider input for numeric values';
 exports.examples = [
   {
     title: 'Default settings',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample />;
     }
   },
   {
     title: 'minimumValue: -1, maximumValue: 2',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumValue={-1}
@@ -81,13 +81,13 @@ exports.examples = [
   },
   {
     title: 'step: 0.25',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample step={0.25} />;
     }
   },
   {
     title: 'Custom min/max track tint color',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumTrackTintColor={'red'}
@@ -98,19 +98,19 @@ exports.examples = [
   },
   {
     title: 'Custom thumb image',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     }
   },
   {
     title: 'Custom track image',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return <SliderExample trackImage={require('./slider.png')} />;
     }
   },
   {
     title: 'Custom min/max track image',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <SliderExample
           minimumTrackImage={require('./slider-left.png')}

Examples/UIExplorer/SnapshotExample.js

@@ -69,6 +69,6 @@ exports.description = 'API to capture images from the screen.';
 exports.examples = [
   {
     title: 'Take screenshot',
-    render(): ReactElement { return <ScreenshotExample />; }
+    render(): ReactElement<any> { return <ScreenshotExample />; }
   },
 ];

Examples/UIExplorer/StatusBarIOSExample.js

@@ -1,118 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  StyleSheet,
-  View,
-  Text,
-  TouchableHighlight,
-  StatusBarIOS,
-} = ReactNative;
-
-exports.framework = 'React';
-exports.title = 'StatusBarIOS';
-exports.description = 'Module for controlling iOS status bar';
-exports.examples = [{
-  title: 'Status Bar Style',
-  render() {
-    return (
-      <View>
-        {['default', 'light-content'].map((style) =>
-          <TouchableHighlight key={style} style={styles.wrapper}
-            onPress={() => StatusBarIOS.setStyle(style)}>
-            <View style={styles.button}>
-              <Text>setStyle('{style}')</Text>
-            </View>
-          </TouchableHighlight>
-        )}
-      </View>
-    );
-  },
-}, {
-  title: 'Status Bar Style Animated',
-  render() {
-    return (
-      <View>
-        {['default', 'light-content'].map((style) =>
-          <TouchableHighlight key={style} style={styles.wrapper}
-            onPress={() => StatusBarIOS.setStyle(style, true)}>
-            <View style={styles.button}>
-              <Text>setStyle('{style}', true)</Text>
-            </View>
-          </TouchableHighlight>
-        )}
-      </View>
-    );
-  },
-}, {
-  title: 'Status Bar Hidden',
-  render() {
-    return (
-      <View>
-        {['none', 'fade', 'slide'].map((animation) =>
-          <View key={animation}>
-            <TouchableHighlight style={styles.wrapper}
-              onPress={() => StatusBarIOS.setHidden(true, animation)}>
-              <View style={styles.button}>
-                <Text>setHidden(true, '{animation}')</Text>
-              </View>
-            </TouchableHighlight>
-            <TouchableHighlight style={styles.wrapper}
-              onPress={() => StatusBarIOS.setHidden(false, animation)}>
-              <View style={styles.button}>
-                <Text>setHidden(false, '{animation}')</Text>
-              </View>
-            </TouchableHighlight>
-          </View>
-        )}
-      </View>
-    );
-  },
-}, {
-  title: 'Status Bar Network Activity Indicator',
-  render() {
-    return (
-      <View>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(true)}>
-          <View style={styles.button}>
-            <Text>setNetworkActivityIndicatorVisible(true)</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(false)}>
-          <View style={styles.button}>
-            <Text>setNetworkActivityIndicatorVisible(false)</Text>
-          </View>
-        </TouchableHighlight>
-      </View>
-    );
-  },
-}];
-
-var styles = StyleSheet.create({
-  wrapper: {
-    borderRadius: 5,
-    marginBottom: 5,
-  },
-  button: {
-    backgroundColor: '#eeeeee',
-    padding: 10,
-  },
-});

Examples/UIExplorer/SwitchExample.js

@@ -109,7 +109,7 @@ var EventSwitchExample = React.createClass({
             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchIsOn} />
-            <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
+          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
         </View>
         <View>
           <Switch
@@ -130,26 +130,26 @@ var EventSwitchExample = React.createClass({
 var examples = [
   {
     title: 'Switches can be set to true or false',
-    render(): ReactElement { return <BasicSwitchExample />; }
+    render(): ReactElement<any> { return <BasicSwitchExample />; }
   },
   {
     title: 'Switches can be disabled',
-    render(): ReactElement { return <DisabledSwitchExample />; }
+    render(): ReactElement<any> { return <DisabledSwitchExample />; }
   },
   {
     title: 'Change events can be detected',
-    render(): ReactElement { return <EventSwitchExample />; }
+    render(): ReactElement<any> { return <EventSwitchExample />; }
   },
   {
     title: 'Switches are controlled components',
-    render(): ReactElement { return <Switch />; }
+    render(): ReactElement<any> { return <Switch />; }
   }
 ];
 
 if (Platform.OS === 'ios') {
   examples.push({
     title: 'Custom colors can be provided',
-    render(): ReactElement { return <ColorSwitchExample />; }
+    render(): ReactElement<any> { return <ColorSwitchExample />; }
   });
 }
 

Examples/UIExplorer/TabBarIOSExample.js

@@ -82,6 +82,7 @@ var TabBarExample = React.createClass({
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./flux.png')}
+          selectedIcon={require('./relay.png')}
           renderAsOriginal
           title="More"
           selected={this.state.selectedTab === 'greenTab'}

Examples/UIExplorer/TextExample.android.js

@@ -388,6 +388,17 @@ var TextExample = React.createClass({
             Demo text shadow
           </Text>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Line break mode">
+          <Text numberOfLines={1}>
+            This very long text should be truncated with dots in the end.
+          </Text>
+          <Text lineBreakMode="middle" numberOfLines={1}>
+            This very long text should be truncated with dots in the middle.
+          </Text>
+          <Text lineBreakMode="head" numberOfLines={1}>
+            This very long text should be truncated with dots in the beginning.
+          </Text>
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   }

Examples/UIExplorer/TextExample.ios.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -344,7 +351,7 @@ exports.examples = [
   },
 }, {
   title: 'Toggling Attributes',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <AttributeToggler />;
   },
 }, {
@@ -415,12 +422,13 @@ exports.examples = [
     );
   },
 }, {
-  title: 'Inline images',
+  title: 'Inline views',
   render: function() {
     return (
       <View>
         <Text>
-          This text contains an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
+          This text contains an inline blue view <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
+          an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
         </Text>
       </View>
     );
@@ -436,6 +444,26 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Line break mode',
+  render: function() {
+    return (
+      <View>
+        <Text numberOfLines={1}>
+          This very long text should be truncated with dots in the end.
+        </Text>
+        <Text lineBreakMode="middle" numberOfLines={1}>
+          This very long text should be truncated with dots in the middle.
+        </Text>
+        <Text lineBreakMode="head" numberOfLines={1}>
+          This very long text should be truncated with dots in the beginning.
+        </Text>
+        <Text lineBreakMode="clip" numberOfLines={1}>
+          This very looooooooooooooooooooooooooooong text should be clipped.
+        </Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/TextInputExample.android.js

@@ -531,4 +531,43 @@ exports.examples = [
       return <TokenizedTextExample />;
     }
   },
+  {
+    title: 'Return key',
+    render: function() {
+      var returnKeyTypes = [
+        'none',
+        'go',
+        'search',
+        'send',
+        'done',
+        'previous',
+        'next',
+      ];
+      var returnKeyLabels = [
+        'Compile',
+        'React Native',
+      ];
+      var examples = returnKeyTypes.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyType={type}
+            placeholder={'returnKeyType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      var types = returnKeyLabels.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyLabel={type}
+            placeholder={'returnKeyLabel: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}{types}</View>;
+    }
+  },
 ];

Examples/UIExplorer/TextInputExample.ios.js

@@ -524,7 +524,7 @@ exports.examples = [
       return (
         <View>
           <WithLabel label="true">
-            <TextInput password={true} style={styles.default} defaultValue="abc" />
+            <TextInput secureTextEntry={true} style={styles.default} defaultValue="abc" />
           </WithLabel>
         </View>
       );
@@ -532,7 +532,7 @@ exports.examples = [
   },
   {
     title: 'Event handling',
-    render: function(): ReactElement { return <TextEventsExample />; },
+    render: function(): ReactElement<any> { return <TextEventsExample />; },
   },
   {
     title: 'Colored input text',
@@ -630,7 +630,7 @@ exports.examples = [
   },
   {
     title: 'Blur on submit',
-    render: function(): ReactElement { return <BlurOnSubmitExample />; },
+    render: function(): ReactElement<any> { return <BlurOnSubmitExample />; },
   },
   {
     title: 'Multiline blur on submit',

Examples/UIExplorer/TimerExample.js

@@ -149,7 +149,7 @@ exports.examples = [
     title: 'this.setInterval(fn, t)',
     description: 'Execute function fn every t milliseconds until cancelled ' +
       'or component is unmounted.',
-    render: function(): ReactElement {
+    render: function(): ReactElement<any> {
       var IntervalExample = React.createClass({
         getInitialState: function() {
           return {

Examples/UIExplorer/TouchableExample.js

@@ -71,14 +71,14 @@ exports.examples = [
   },
 }, {
   title: '<Text onPress={fn}> with highlight',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <TextOnPressBox />;
   },
 }, {
   title: 'Touchable feedback events',
   description: '<Touchable*> components accept onPress, onPressIn, ' +
     'onPressOut, and onLongPress as props.',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <TouchableFeedbackEvents />;
   },
 }, {
@@ -86,13 +86,13 @@ exports.examples = [
   description: '<Touchable*> components also accept delayPressIn, ' +
     'delayPressOut, and delayLongPress as props. These props impact the ' +
     'timing of feedback events.',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <TouchableDelayEvents />;
   },
 }, {
   title: '3D Touch / Force Touch',
   description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <ForceTouchExample />;
   },
   platform: 'ios',
@@ -100,14 +100,14 @@ exports.examples = [
    title: 'Touchable Hit Slop',
    description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
      'without changing the view bounds.',
-   render: function(): ReactElement {
+   render: function(): ReactElement<any> {
      return <TouchableHitSlop />;
    },
  }, {
    title: 'Disabled Touchable*',
    description: '<Touchable*> components accept disabled prop which prevents ' +
      'any interaction with component',
-   render: function(): ReactElement {
+   render: function(): ReactElement<any> {
      return <TouchableDisabled />;
    },
  }];
@@ -333,7 +333,7 @@ var TouchableDisabled = React.createClass({
           style={[styles.row, styles.block]}
           onPress={() => console.log('custom THW text - highlight')}>
           <Text style={styles.button}>
-            Disabled TouchableHighlight
+            Enabled TouchableHighlight
           </Text>
         </TouchableHighlight>
 

Examples/UIExplorer/TransformExample.js

@@ -208,7 +208,7 @@ exports.examples = [
   {
     title: 'Perspective',
     description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
-    render(): ReactElement { return <Flip />; }
+    render(): ReactElement<any> { return <Flip />; }
   },
   {
     title: 'Translate, Rotate, Scale',

Examples/UIExplorer/TransparentHitTestExample.js

@@ -46,6 +46,6 @@ exports.description = 'Transparent view receiving touch events';
 exports.examples = [
   {
     title: 'TransparentHitTestExample',
-    render(): ReactElement { return <TransparentHitTestExample />; }
+    render(): ReactElement<any> { return <TransparentHitTestExample />; }
   }
 ];

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -32,6 +32,7 @@
 		13BCE84F1C9C209600DD7AAD /* RCTComponentPropsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */; };
 		13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
 		13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
+		13E501F11D07A84A005F35D8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13E501A31D07A502005F35D8 /* libRCTAnimation.a */; };
 		143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
 		144D21241B2204C5006DB32B /* RCTImageUtilTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 144D21231B2204C5006DB32B /* RCTImageUtilTests.m */; };
 		147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
@@ -63,6 +64,7 @@
 		27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
+		68FF44381CF6111500720EFD /* RCTBundleURLProviderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
 		8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */; };
@@ -120,6 +122,13 @@
 			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
 			remoteInfo = RCTWebSocket;
 		};
+		13E501A21D07A502005F35D8 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTAnimation;
+		};
 		143BC59B1B21E3E100462512 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
@@ -209,6 +218,7 @@
 		13CC9D481AEED2B90020D1C2 /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
 		13DB03471B5D2ED500C27245 /* RCTJSONTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSONTests.m; sourceTree = "<group>"; };
 		13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = "<group>"; };
+		13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = ../../Libraries/NativeAnimation/RCTAnimation.xcodeproj; sourceTree = "<group>"; };
 		143BC57E1B21E18100462512 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		143BC5811B21E18100462512 /* testLayoutExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testLayoutExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
 		143BC5821B21E18100462512 /* testSliderExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testSliderExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
@@ -248,6 +258,7 @@
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
 		58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
+		68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBundleURLProviderTests.m; sourceTree = "<group>"; };
 		83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
 		8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageLoaderTests.m; sourceTree = "<group>"; };
 		8385CF031B87479200C6273E /* RCTImageLoaderHelpers.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageLoaderHelpers.m; sourceTree = "<group>"; };
@@ -283,6 +294,7 @@
 				14AADF051AC3DBB1002390C9 /* libReact.a in Frameworks */,
 				147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */,
 				134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */,
+				13E501F11D07A84A005F35D8 /* libRCTAnimation.a in Frameworks */,
 				138DEE241B9EDFB6007F4EA5 /* libRCTCameraRoll.a in Frameworks */,
 				134A8A2A1AACED7A00945AAE /* libRCTGeolocation.a in Frameworks */,
 				13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */,
@@ -313,6 +325,7 @@
 				14AADEFF1AC3DB95002390C9 /* React.xcodeproj */,
 				14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */,
 				134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */,
+				13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */,
 				138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */,
 				134A8A201AACED6A00945AAE /* RCTGeolocation.xcodeproj */,
 				13417FE31AA91428003F314A /* RCTImage.xcodeproj */,
@@ -411,10 +424,19 @@
 			name = UIExplorer;
 			sourceTree = "<group>";
 		};
+		13E5019D1D07A502005F35D8 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13E501A31D07A502005F35D8 /* libRCTAnimation.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		143BC57C1B21E18100462512 /* UIExplorerUnitTests */ = {
 			isa = PBXGroup;
 			children = (
 				13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */,
+				68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */,
 				1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */,
 				1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */,
 				1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */,
@@ -690,6 +712,10 @@
 					ProductGroup = 134454561AAFCAAE003F0779 /* Products */;
 					ProjectRef = 134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */;
 				},
+				{
+					ProductGroup = 13E5019D1D07A502005F35D8 /* Products */;
+					ProjectRef = 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */;
+				},
 				{
 					ProductGroup = 138DEE031B9EDDDB007F4EA5 /* Products */;
 					ProjectRef = 138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */;
@@ -798,6 +824,13 @@
 			remoteRef = 139FDED81B0651EA00C62182 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		13E501A31D07A502005F35D8 /* libRCTAnimation.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTAnimation.a;
+			remoteRef = 13E501A21D07A502005F35D8 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -903,6 +936,7 @@
 				138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */,
 				13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */,
 				8385CF041B87479200C6273E /* RCTImageLoaderHelpers.m in Sources */,
+				68FF44381CF6111500720EFD /* RCTBundleURLProviderTests.m in Sources */,
 				8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -1010,12 +1044,6 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
-				WARNING_CFLAGS = (
-					"-Wextra",
-					"-Wall",
-					"-Wincompatible-pointer-types",
-					"-Wincompatible-pointer-types-discards-qualifiers",
-				);
 			};
 			name = Debug;
 		};
@@ -1035,12 +1063,6 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
-				WARNING_CFLAGS = (
-					"-Wextra",
-					"-Wall",
-					"-Wincompatible-pointer-types",
-					"-Wincompatible-pointer-types-discards-qualifiers",
-				);
 			};
 			name = Release;
 		};
@@ -1145,6 +1167,8 @@
 					"-Wextra",
 					"-Wall",
 					"-Wincompatible-pointer-types",
+					"-Wincompatible-pointer-types-discards-qualifiers",
+					"-Wshadow",
 				);
 			};
 			name = Debug;
@@ -1208,6 +1232,8 @@
 					"-Wextra",
 					"-Wall",
 					"-Wincompatible-pointer-types",
+					"-Wincompatible-pointer-types-discards-qualifiers",
+					"-Wshadow",
 				);
 			};
 			name = Release;

Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0700"
+   LastUpgradeVersion = "0730"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -109,6 +109,13 @@
             ReferencedContainer = "container:UIExplorer.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
+      <EnvironmentVariables>
+         <EnvironmentVariable
+            key = "CI_USE_PACKAGER"
+            value = "1"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+      </EnvironmentVariables>
       <AdditionalOptions>
       </AdditionalOptions>
    </LaunchAction>

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -24,11 +24,12 @@
 @end
 
 @implementation AppDelegate
+
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
   _bridge = [[RCTBridge alloc] initWithDelegate:self
                                   launchOptions:launchOptions];
-  
+
   // Appetizer.io params check
   NSDictionary *initProps = nil;
   NSString *_routeUri = [[NSUserDefaults standardUserDefaults] stringForKey:@"route"];
@@ -36,7 +37,7 @@
     initProps = @{@"exampleFromAppetizeParams":
                     [NSString stringWithFormat:@"rnuiexplorer://example/%@Example", _routeUri]};
   }
-  
+
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
                                                    moduleName:@"UIExplorerApp"
                                             initialProperties:initProps];
@@ -81,9 +82,9 @@
 
   //  sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
-  #if RUNNING_ON_CI
+  if (!getenv("CI_USE_PACKAGER")) {
      sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-  #endif
+  }
 
   return sourceURL;
 }

Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m

@@ -90,6 +90,7 @@ RCT_EXPORT_MODULE();
 - (NSArray<UIView<RCTComponent> *> *)reactSubviews
 {
   // this is to avoid unregistering our RCTRootView when the component is removed from RN hierarchy
+  (void)[super reactSubviews];
   return @[];
 }
 

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m

@@ -89,6 +89,7 @@ RCT_EXPORT_MODULE();
 - (NSArray<UIView<RCTComponent> *> *)reactSubviews
 {
   // this is to avoid unregistering our RCTRootView when the component is removed from RN hierarchy
+  (void)[super reactSubviews];
   return @[];
 }
 

Examples/UIExplorer/UIExplorerActions.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -25,9 +32,7 @@ export type UIExplorerExampleAction = {
   openExample: string;
 };
 
-import type {BackAction} from 'NavigationRootContainer';
-
-export type UIExplorerAction = BackAction | UIExplorerListWithFilterAction | UIExplorerExampleAction;
+export type UIExplorerAction = UIExplorerListWithFilterAction | UIExplorerExampleAction;
 
 function ExampleListWithFilter(filter: ?string): UIExplorerListWithFilterAction {
   return {

Examples/UIExplorer/UIExplorerApp.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -16,29 +23,27 @@
  */
 'use strict';
 
+const AppRegistry = require('AppRegistry');
+const AsyncStorage = require('AsyncStorage');
+const BackAndroid = require('BackAndroid');
+const Dimensions = require('Dimensions');
+const DrawerLayoutAndroid = require('DrawerLayoutAndroid');
+const Linking = require('Linking');
 const React = require('react');
-const ReactNative = require('react-native');
-const {
-  AppRegistry,
-  BackAndroid,
-  Dimensions,
-  DrawerLayoutAndroid,
-  NavigationExperimental,
-  StyleSheet,
-  ToolbarAndroid,
-  View,
-  StatusBar,
-} = ReactNative;
-const {
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
+const StatusBar = require('StatusBar');
+const StyleSheet = require('StyleSheet');
+const ToolbarAndroid = require('ToolbarAndroid');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
+const UIManager = require('UIManager');
 const URIActionMap = require('./URIActionMap');
+const View = require('View');
 
-var DRAWER_WIDTH_LEFT = 56;
+UIManager.setLayoutAnimationEnabledExperimental(true);
+
+const DRAWER_WIDTH_LEFT = 56;
 
 type Props = {
   exampleFromAppetizeParams: string,
@@ -49,14 +54,13 @@ type State = {
 };
 
 class UIExplorerApp extends React.Component {
-  _handleOpenInitialExample: Function;
+  _handleAction: Function;
+  _renderDrawerContent: Function;
   state: State;
   constructor(props: Props) {
     super(props);
-    this._handleOpenInitialExample = this._handleOpenInitialExample.bind(this);
-    this.state = {
-      initialExampleUri: props.exampleFromAppetizeParams,
-    };
+    this._handleAction = this._handleAction.bind(this);
+    this._renderDrawerContent = this._renderDrawerContent.bind(this);
   }
 
   componentWillMount() {
@@ -64,38 +68,28 @@ class UIExplorerApp extends React.Component {
   }
 
   componentDidMount() {
-    // There's a race condition if we try to navigate to the specified example
-    // from the initial props at the same time the navigation logic is setting
-    // up the initial navigation state. This hack adds a delay to avoid this
-    // scenario. So after the initial example list is shown, we then transition
-    // to the initial example.
-    setTimeout(this._handleOpenInitialExample, 500);
+    Linking.getInitialURL().then((url) => {
+      AsyncStorage.getItem('UIExplorerAppState', (err, storedString) => {
+        const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
+        const urlAction = URIActionMap(url);
+        const launchAction = exampleAction || urlAction;
+        if (err || !storedString) {
+          const initialAction = launchAction || {type: 'InitialAction'};
+          this.setState(UIExplorerNavigationReducer(null, initialAction));
+          return;
+        }
+        const storedState = JSON.parse(storedString);
+        if (launchAction) {
+          this.setState(UIExplorerNavigationReducer(storedState, launchAction));
+          return;
+        }
+        this.setState(storedState);
+      });
+    });
   }
 
   render() {
-    return (
-      <NavigationRootContainer
-        persistenceKey="UIExplorerStateNavState"
-        ref={navRootRef => { this._navigationRootRef = navRootRef; }}
-        reducer={UIExplorerNavigationReducer}
-        renderNavigation={this._renderApp.bind(this)}
-        linkingActionMap={URIActionMap}
-      />
-    );
-  }
-
-  _handleOpenInitialExample() {
-    if (this.state.initialExampleUri) {
-      const exampleAction = URIActionMap(this.state.initialExampleUri);
-      if (exampleAction && this._navigationRootRef) {
-        this._navigationRootRef.handleNavigation(exampleAction);
-      }
-    }
-    this.setState({initialExampleUri: null});
-  }
-
-  _renderApp(navigationState, onNavigate) {
-    if (!navigationState) {
+    if (!this.state) {
       return null;
     }
     return (
@@ -110,47 +104,47 @@ class UIExplorerApp extends React.Component {
           this._overrideBackPressForDrawerLayout = false;
         }}
         ref={(drawer) => { this.drawer = drawer; }}
-        renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}
+        renderNavigationView={this._renderDrawerContent}
         statusBarBackgroundColor="#589c90">
-        {this._renderNavigation(navigationState, onNavigate)}
+        {this._renderApp()}
       </DrawerLayoutAndroid>
     );
   }
 
-  _renderDrawerContent(onNavigate) {
+  _renderDrawerContent() {
     return (
       <View style={styles.drawerContentWrapper}>
         <UIExplorerExampleList
           list={UIExplorerList}
           displayTitleRow={true}
           disableSearch={true}
-          onNavigate={(action) => {
-            this.drawer && this.drawer.closeDrawer();
-            onNavigate(action);
-          }}
+          onNavigate={this._handleAction}
         />
       </View>
     );
   }
 
-  _renderNavigation(navigationState, onNavigate) {
-    if (navigationState.externalExample) {
-      var Component = UIExplorerList.Modules[navigationState.externalExample];
+  _renderApp() {
+    const {
+      externalExample,
+      stack,
+    } = this.state;
+    if (externalExample) {
+      const Component = UIExplorerList.Modules[externalExample];
       return (
         <Component
           onExampleExit={() => {
-            onNavigate(NavigationRootContainer.getBackAction());
+            this._handleAction({ type: 'BackAction' });
           }}
           ref={(example) => { this._exampleRef = example; }}
         />
       );
     }
-    const {stack} = navigationState;
-    const title = UIExplorerStateTitleMap(stack.children[stack.index]);
-    const index = stack.children.length <= 1 ?  1 : stack.index;
+    const title = UIExplorerStateTitleMap(stack.routes[stack.index]);
+    const index = stack.routes.length <= 1 ?  1 : stack.index;
 
-    if (stack && stack.children[index]) {
-      const {key} = stack.children[index];
+    if (stack && stack.routes[index]) {
+      const {key} = stack.routes[index];
       const ExampleModule = UIExplorerList.Modules[key];
       const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
       return (
@@ -178,13 +172,25 @@ class UIExplorerApp extends React.Component {
           title={title}
         />
         <UIExplorerExampleList
+          onNavigate={this._handleAction}
           list={UIExplorerList}
-          {...stack.children[0]}
+          {...stack.routes[0]}
         />
       </View>
     );
   }
 
+  _handleAction(action: Object): boolean {
+    this.drawer && this.drawer.closeDrawer();
+    const newState = UIExplorerNavigationReducer(this.state, action);
+    if (this.state !== newState) {
+      this.setState(newState);
+      AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state));
+      return true;
+    }
+    return false;
+  }
+
   _handleBackButtonPress() {
     if (this._overrideBackPressForDrawerLayout) {
       // This hack is necessary because drawer layout provides an imperative API
@@ -200,12 +206,7 @@ class UIExplorerApp extends React.Component {
     ) {
       return true;
     }
-    if (this._navigationRootRef) {
-      return this._navigationRootRef.handleNavigation(
-        NavigationRootContainer.getBackAction()
-      );
-    }
-    return false;
+    return this._handleAction({ type: 'BackAction' });
   }
 }
 

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -23,6 +23,8 @@
  */
 'use strict';
 
+const AsyncStorage = require('AsyncStorage');
+const Linking = require('Linking');
 const React = require('react');
 const ReactNative = require('react-native');
 const UIExplorerList = require('./UIExplorerList.ios');
@@ -42,7 +44,6 @@ const {
 const {
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
 import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
@@ -55,107 +56,118 @@ type Props = {
   exampleFromAppetizeParams: string,
 };
 
-type State = {
-  initialExampleUri: ?string,
+type State = UIExplorerNavigationState & {
+  externalExample?: string,
 };
 
+const APP_STATE_KEY = 'UIExplorerAppState.v1';
+
 class UIExplorerApp extends React.Component {
-  _navigationRootRef: ?NavigationRootContainer;
-  _renderNavigation: Function;
+  _handleBack: Function;
+  _handleAction: Function;
+  _renderCard: Function;
   _renderOverlay: Function;
   _renderScene: Function;
-  _renderCard: Function;
   _renderTitleComponent: Function;
-  _handleOpenInitialExample: Function;
   state: State;
+
   constructor(props: Props) {
     super(props);
-    this._handleOpenInitialExample = this._handleOpenInitialExample.bind(this);
-    this.state = {
-      initialExampleUri: props.exampleFromAppetizeParams,
-    };
   }
+
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
+    this._handleAction = this._handleAction.bind(this);
+    this._handleBack = this._handleAction.bind(this, {type: 'back'});
     this._renderOverlay = this._renderOverlay.bind(this);
     this._renderScene = this._renderScene.bind(this);
     this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
+
   componentDidMount() {
-    // There's a race condition if we try to navigate to the specified example
-    // from the initial props at the same time the navigation logic is setting
-    // up the initial navigation state. This hack adds a delay to avoid this
-    // scenario. So after the initial example list is shown, we then transition
-    // to the initial example.
-    setTimeout(this._handleOpenInitialExample, 500);
+    Linking.getInitialURL().then((url) => {
+      AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
+        const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
+        const urlAction = URIActionMap(url);
+        const launchAction = exampleAction || urlAction;
+        if (err || !storedString) {
+          const initialAction = launchAction || {type: 'InitialAction'};
+          this.setState(UIExplorerNavigationReducer(null, initialAction));
+          return;
+        }
+        const storedState = JSON.parse(storedString);
+        if (launchAction) {
+          this.setState(UIExplorerNavigationReducer(storedState, launchAction));
+          return;
+        }
+        this.setState(storedState);
+      });
+    });
+
+    Linking.addEventListener('url', (url) => {
+      this._handleAction(URIActionMap(url));
+    });
   }
-  render() {
-    return (
-      <NavigationRootContainer
-        persistenceKey="UIExplorerState"
-        reducer={UIExplorerNavigationReducer}
-        ref={navRootRef => { this._navigationRootRef = navRootRef; }}
-        renderNavigation={this._renderNavigation}
-        linkingActionMap={URIActionMap}
-      />
-    );
-  }
-  _handleOpenInitialExample() {
-    if (this.state.initialExampleUri) {
-      const exampleAction = URIActionMap(this.state.initialExampleUri);
-      if (exampleAction && this._navigationRootRef) {
-        this._navigationRootRef.handleNavigation(exampleAction);
-      }
+
+  _handleAction(action: Object) {
+    if (!action) {
+      return;
+    }
+    const newState = UIExplorerNavigationReducer(this.state, action);
+    if (this.state !== newState) {
+      this.setState(newState);
+      AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state));
     }
-    this.setState({initialExampleUri: null});
   }
-  _renderNavigation(navigationState: UIExplorerNavigationState, onNavigate: Function) {
-    if (!navigationState) {
+
+  render() {
+    if (!this.state) {
       return null;
     }
-    if (navigationState.externalExample) {
-      var Component = UIExplorerList.Modules[navigationState.externalExample];
+    if (this.state.externalExample) {
+      const Component = UIExplorerList.Modules[this.state.externalExample];
       return (
         <Component
           onExampleExit={() => {
-            onNavigate(NavigationRootContainer.getBackAction());
+            this._handleAction({ type: 'BackAction' });
           }}
         />
       );
     }
-    const {stack} = navigationState;
     return (
       <NavigationCardStack
-        navigationState={stack}
+        navigationState={this.state.stack}
         style={styles.container}
         renderOverlay={this._renderOverlay}
         renderScene={this._renderScene}
+
       />
     );
   }
 
-  _renderOverlay(props: NavigationSceneRendererProps): ReactElement {
+  _renderOverlay(props: NavigationSceneRendererProps): ReactElement<any> {
     return (
       <NavigationHeader
         {...props}
+        onNavigateBack={this._handleBack}
         renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
-  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement {
+  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement<any> {
     return (
       <NavigationHeader.Title>
-        {UIExplorerStateTitleMap(props.scene.navigationState)}
+        {UIExplorerStateTitleMap(props.scene.route)}
       </NavigationHeader.Title>
     );
   }
 
-  _renderScene(props: NavigationSceneRendererProps): ?ReactElement {
-    const state = props.scene.navigationState;
+  _renderScene(props: NavigationSceneRendererProps): ?ReactElement<any> {
+    const state = props.scene.route;
     if (state.key === 'AppList') {
       return (
         <UIExplorerExampleList
+          onNavigate={this._handleAction}
           list={UIExplorerList}
           style={styles.exampleContainer}
           {...state}
@@ -194,9 +206,9 @@ AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Example: UIExplorerExample) => {
   const ExampleModule = Example.module;
   if (ExampleModule.displayName) {
-    var Snapshotter = React.createClass({
+    const Snapshotter = React.createClass({
       render: function() {
-        var Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
+        const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
             <Renderable />

Examples/UIExplorer/UIExplorerExampleList.js

@@ -27,7 +27,6 @@ const React = require('react');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TextInput = require('TextInput');
-const NavigationContainer = require('NavigationContainer');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 const UIExplorerActions = require('./UIExplorerActions');
@@ -56,7 +55,14 @@ class UIExplorerExampleList extends React.Component {
   }) {
 
   }
-  render(): ?ReactElement {
+
+  static makeRenderable(example: any): ReactClass<any> {
+    return example.examples ?
+      createExamplePage(null, example) :
+      example;
+  }
+
+  render(): ?ReactElement<any> {
     const filterText = this.props.filter || '';
     const filterRegex = new RegExp(String(filterText), 'i');
     const filter = (example) => filterRegex.test(example.module.title);
@@ -74,6 +80,7 @@ class UIExplorerExampleList extends React.Component {
           dataSource={dataSource}
           renderRow={this._renderExampleRow.bind(this)}
           renderSectionHeader={this._renderSectionHeader}
+          enableEmptySections={true}
           keyboardShouldPersistTaps={true}
           automaticallyAdjustContentInsets={false}
           keyboardDismissMode="on-drag"
@@ -82,7 +89,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderTitleRow(): ?ReactElement {
+  _renderTitleRow(): ?ReactElement<any> {
     if (!this.props.displayTitleRow) {
       return null;
     }
@@ -98,7 +105,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderTextInput(): ?ReactElement {
+  _renderTextInput(): ?ReactElement<any> {
     if (this.props.disableSearch) {
       return null;
     }
@@ -120,7 +127,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderSectionHeader(data: any, section: string): ?ReactElement {
+  _renderSectionHeader(data: any, section: string): ?ReactElement<any> {
     return (
       <Text style={styles.sectionHeader}>
         {section.toUpperCase()}
@@ -128,7 +135,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderExampleRow(example: {key: string, module: Object}): ?ReactElement {
+  _renderExampleRow(example: {key: string, module: Object}): ?ReactElement<any> {
     return this._renderRow(
       example.module.title,
       example.module.description,
@@ -137,7 +144,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderRow(title: string, description: string, key: ?string, handler: ?Function): ?ReactElement {
+  _renderRow(title: string, description: string, key: ?string, handler: ?Function): ?ReactElement<any> {
     return (
       <View key={key || title}>
         <TouchableHighlight onPress={handler}>
@@ -160,15 +167,6 @@ class UIExplorerExampleList extends React.Component {
   }
 }
 
-function makeRenderable(example: any): ReactClass<any> {
-  return example.examples ?
-    createExamplePage(null, example) :
-    example;
-}
-
-UIExplorerExampleList = NavigationContainer.create(UIExplorerExampleList);
-UIExplorerExampleList.makeRenderable = makeRenderable;
-
 const styles = StyleSheet.create({
   listContainer: {
     flex: 1,

Examples/UIExplorer/UIExplorerIntegrationTests/RCTLoggingTests.m

@@ -34,13 +34,15 @@
 
 - (void)setUp
 {
-#if RUNNING_ON_CI
-  NSURL *scriptURL = [[NSBundle bundleForClass:[RCTBridge class]] URLForResource:@"main" withExtension:@"jsbundle"];
-  RCTAssert(scriptURL != nil, @"Could not locate main.jsBundle");
-#else
-  NSString *app = @"Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp";
-  NSURL *scriptURL = [NSURL URLWithString:[NSString stringWithFormat:@"http://localhost:8081/%@.bundle?platform=ios&dev=true", app]];
-#endif
+  NSURL *scriptURL;
+  if (getenv("CI_USE_PACKAGER")) {
+    NSString *app = @"Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp";
+    scriptURL = [NSURL URLWithString:[NSString stringWithFormat:@"http://localhost:8081/%@.bundle?platform=ios&dev=true", app]];
+    RCTAssert(scriptURL != nil, @"No scriptURL set");
+  } else {
+    scriptURL = [[NSBundle bundleForClass:[RCTBridge class]] URLForResource:@"main" withExtension:@"jsbundle"];
+    RCTAssert(scriptURL != nil, @"Could not locate main.jsBundle");
+  }
 
   _bridge = [[RCTBridge alloc] initWithBundleURL:scriptURL moduleProvider:NULL launchOptions:nil];
   NSDate *date = [NSDate dateWithTimeIntervalSinceNow:5];

Examples/UIExplorer/UIExplorerIntegrationTests/RCTRootViewIntegrationTests.m

@@ -66,9 +66,13 @@ typedef void (^ControlBlock)(RCTRootView*);
 
 - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
 {
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-declarations"
+
   [rootView.bridge.eventDispatcher sendAppEventWithName:@"rootViewDidChangeIntrinsicSize"
                                                    body:@{@"width": @(rootView.intrinsicSize.width),
                                                           @"height": @(rootView.intrinsicSize.height)}];
+#pragma clang diagnostic pop
 }
 
 @end
@@ -138,12 +142,6 @@ static ControlBlock propertiesUpdateBlock()
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"IntegrationTests/RCTRootViewIntegrationTestApp", nil);
 }
 

Examples/UIExplorer/UIExplorerIntegrationTests/RCTUIManagerScenarioTests.m

@@ -73,6 +73,8 @@
               removeAtIndices:nil
                      registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)_uiManager.viewRegistry];
 
+  [_uiManager.viewRegistry[@20] didUpdateReactSubviews];
+
   XCTAssertTrue([[containerView reactSubviews] count] == 5,
                @"Expect to have 5 react subviews after calling manage children \
                with 5 tags to add, instead have %lu", (unsigned long)[[containerView reactSubviews] count]);
@@ -95,7 +97,7 @@
   }
   for (NSInteger i = 2; i < 20; i++) {
     UIView *view = _uiManager.viewRegistry[@(i)];
-    [containerView addSubview:view];
+    [containerView insertReactSubview:view atIndex:containerView.reactSubviews.count];
   }
 
   // Remove views 1-5 from view 20
@@ -107,6 +109,8 @@
               removeAtIndices:removeAtIndices
                      registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)_uiManager.viewRegistry];
 
+ [_uiManager.viewRegistry[@20] didUpdateReactSubviews];
+
   XCTAssertEqual(containerView.reactSubviews.count, (NSUInteger)13,
                @"Expect to have 13 react subviews after calling manage children\
                with 5 tags to remove and 18 prior children, instead have %zd",
@@ -155,7 +159,7 @@
 
   for (NSInteger i = 1; i < 11; i++) {
     UIView *view = _uiManager.viewRegistry[@(i)];
-    [containerView addSubview:view];
+    [containerView insertReactSubview:view atIndex:containerView.reactSubviews.count];
   }
 
   [_uiManager _manageChildren:@20

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m

@@ -31,12 +31,6 @@
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"IntegrationTests/IntegrationTestsApp", nil);
 }
 

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -32,12 +32,6 @@
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/UIExplorerApp.ios", nil);
   _runner.recordMode = NO;
 }

Examples/UIExplorer/UIExplorerList.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -23,6 +30,10 @@ export type UIExplorerExample = {
 };
 
 var ComponentExamples: Array<UIExplorerExample> = [
+  {
+    key: 'ActivityIndicatorExample',
+    module: require('./ActivityIndicatorExample'),
+  },
   {
     key: 'SliderExample',
     module: require('./SliderExample'),
@@ -40,8 +51,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./ModalExample'),
   },
   {
-    key: 'PickerAndroidExample',
-    module: require('./PickerAndroidExample'),
+    key: 'PickerExample',
+    module: require('./PickerExample'),
   },
   {
     key: 'ProgressBarAndroidExample',
@@ -158,6 +169,10 @@ const APIExamples = [
     key: 'PanResponderExample',
     module: require('./PanResponderExample'),
   },
+  {
+    key: 'PermissionsExampleAndroid',
+    module: require('./PermissionsExampleAndroid'),
+  },
   {
     key: 'PointerEventsExample',
     module: require('./PointerEventsExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -20,10 +27,10 @@ export type UIExplorerExample = {
   module: Object;
 };
 
-var ComponentExamples: Array<UIExplorerExample> = [
+const ComponentExamples: Array<UIExplorerExample> = [
   {
-    key: 'ActivityIndicatorIOSExample',
-    module: require('./ActivityIndicatorIOSExample'),
+    key: 'ActivityIndicatorExample',
+    module: require('./ActivityIndicatorExample'),
   },
   {
     key: 'DatePickerIOSExample',
@@ -33,6 +40,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'ImageExample',
     module: require('./ImageExample'),
   },
+  {
+    key: 'KeyboardAvoidingViewExample',
+    module: require('./KeyboardAvoidingViewExample'),
+  },
   {
     key: 'LayoutEventsExample',
     module: require('./LayoutEventsExample'),
@@ -57,6 +68,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'ModalExample',
     module: require('./ModalExample'),
   },
+  {
+    key: 'NativeAnimationsExample',
+    module: require('./NativeAnimationsExample'),
+  },
   {
     key: 'NavigatorExample',
     module: require('./Navigator/NavigatorExample'),
@@ -69,6 +84,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'NavigatorIOSExample',
     module: require('./NavigatorIOSExample'),
   },
+  {
+    key: 'PickerExample',
+    module: require('./PickerExample'),
+  },
   {
     key: 'PickerIOSExample',
     module: require('./PickerIOSExample'),
@@ -131,7 +150,7 @@ var ComponentExamples: Array<UIExplorerExample> = [
   },
 ];
 
-var APIExamples: Array<UIExplorerExample> = [
+const APIExamples: Array<UIExplorerExample> = [
   {
     key: 'AccessibilityIOSExample',
     module: require('./AccessibilityIOSExample'),
@@ -144,6 +163,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'AdSupportIOSExample',
     module: require('./AdSupportIOSExample'),
   },
+  {
+    key: 'AlertExample',
+    module: require('./AlertExample').AlertExample,
+  },
   {
     key: 'AlertIOSExample',
     module: require('./AlertIOSExample'),
@@ -156,10 +179,6 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'AnExApp',
     module: require('./AnimatedGratuitousApp/AnExApp'),
   },
-  {
-    key: 'AppStateIOSExample',
-    module: require('./AppStateIOSExample'),
-  },
   {
     key: 'AppStateExample',
     module: require('./AppStateExample'),
@@ -208,10 +227,6 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'NavigationExperimentalExample',
     module: require('./NavigationExperimental/NavigationExperimentalExample'),
   },
-  {
-    key: 'NavigationExperimentalLegacyNavigatorExample',
-    module: require('./NavigationExperimental/LegacyNavigator/LegacyNavigatorExample'),
-  },
   {
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
@@ -236,10 +251,6 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'SnapshotExample',
     module: require('./SnapshotExample'),
   },
-  {
-    key: 'StatusBarIOSExample',
-    module: require('./StatusBarIOSExample'),
-  },
   {
     key: 'TimerExample',
     module: require('./TimerExample'),

Examples/UIExplorer/UIExplorerNavigationReducer.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -15,31 +22,89 @@
  */
 'use strict';
 
-const React = require('react');
 const ReactNative = require('react-native');
 // $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
 const UIExplorerList = require('./UIExplorerList');
+
 const {
   NavigationExperimental,
 } = ReactNative;
+
+
 const {
-  Reducer: NavigationReducer,
+  StateUtils: NavigationStateUtils,
 } = NavigationExperimental;
-const StackReducer = NavigationReducer.StackReducer;
 
 import type {NavigationState} from 'NavigationTypeDefinition';
 
-import type {UIExplorerAction} from './UIExplorerActions';
-
 export type UIExplorerNavigationState = {
   externalExample: ?string;
   stack: NavigationState;
 };
 
+const defaultGetReducerForState = (initialState) => (state) => state || initialState;
+
+function getNavigationState(state: any): ?NavigationState {
+  if (
+    (state instanceof Object) &&
+    (state.routes instanceof Array) &&
+    (state.routes[0] !== undefined) &&
+    (typeof state.index === 'number') &&
+    (state.routes[state.index] !== undefined)
+  ) {
+    return state;
+  }
+  return null;
+}
+
+function StackReducer({initialState, getReducerForState, getPushedReducerForAction}: any): Function {
+  const getReducerForStateWithDefault = getReducerForState || defaultGetReducerForState;
+  return function (lastState: ?NavigationState, action: any): NavigationState {
+    if (!lastState) {
+      return initialState;
+    }
+    const lastParentState = getNavigationState(lastState);
+    if (!lastParentState) {
+      return lastState;
+    }
+
+    const activeSubState = lastParentState.routes[lastParentState.index];
+    const activeSubReducer = getReducerForStateWithDefault(activeSubState);
+    const nextActiveState = activeSubReducer(activeSubState, action);
+    if (nextActiveState !== activeSubState) {
+      const nextChildren = [...lastParentState.routes];
+      nextChildren[lastParentState.index] = nextActiveState;
+      return {
+        ...lastParentState,
+        routes: nextChildren,
+      };
+    }
+
+    const subReducerToPush = getPushedReducerForAction(action, lastParentState);
+    if (subReducerToPush) {
+      return NavigationStateUtils.push(
+        lastParentState,
+        subReducerToPush(null, action)
+      );
+    }
+
+    switch (action.type) {
+      case 'back':
+      case 'BackAction':
+        if (lastParentState.index === 0 || lastParentState.routes.length === 1) {
+          return lastParentState;
+        }
+        return NavigationStateUtils.pop(lastParentState);
+    }
+
+    return lastParentState;
+  };
+}
+
 const UIExplorerStackReducer = StackReducer({
   getPushedReducerForAction: (action, lastState) => {
     if (action.type === 'UIExplorerExampleAction' && UIExplorerList.Modules[action.openExample]) {
-      if (lastState.children.find(child => child.key === action.openExample)) {
+      if (lastState.routes.find(route => route.key === action.openExample)) {
         // The example is already open, we should avoid pushing examples twice
         return null;
       }
@@ -51,7 +116,7 @@ const UIExplorerStackReducer = StackReducer({
   initialState: {
     key: 'UIExplorerMainStack',
     index: 0,
-    children: [
+    routes: [
       {key: 'AppList'},
     ],
   },
@@ -70,7 +135,7 @@ function UIExplorerNavigationReducer(lastState: ?UIExplorerNavigationState, acti
       stack: {
         key: 'UIExplorerMainStack',
         index: 0,
-        children: [
+        routes: [
           {
             key: 'AppList',
             filter: action.filter,
@@ -99,7 +164,7 @@ function UIExplorerNavigationReducer(lastState: ?UIExplorerNavigationState, acti
     return {
       externalExample: null,
       stack: newStack,
-    }
+    };
   }
   return lastState;
 }

Examples/UIExplorer/UIExplorerStateTitleMap.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -18,13 +25,13 @@
 // $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
 const UIExplorerList = require('./UIExplorerList');
 
-import type {NavigationState} from 'NavigationTypeDefinition';
+import type {NavigationRoute} from 'NavigationTypeDefinition';
 
-function StateTitleMap(state: NavigationState): string {
-  if (UIExplorerList.Modules[state.key]) {
-    return UIExplorerList.Modules[state.key].title
+function StateTitleMap(route: NavigationRoute): string {
+  if (UIExplorerList.Modules[route.key]) {
+    return UIExplorerList.Modules[route.key].title;
   }
-  if (state.key === 'AppList') {
+  if (route.key === 'AppList') {
     return 'UIExplorer';
   }
   return 'Unknown';

Examples/UIExplorer/UIExplorerUnitTests/RCTBundleURLProviderTests.m

@@ -0,0 +1,103 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+#import <XCTest/XCTest.h>
+
+#import "RCTBundleURLProvider.h"
+#import "RCTUtils.h"
+
+
+static NSString *const testFile = @"test.jsbundle";
+static NSString *const mainBundle = @"main.jsbundle";
+
+static NSURL *mainBundleURL()
+{
+  return [[[NSBundle mainBundle] bundleURL] URLByAppendingPathComponent:mainBundle];
+}
+
+static NSURL *localhostBundleURL()
+{
+  return [NSURL URLWithString:[NSString stringWithFormat:@"http://localhost:8081/%@.bundle?platform=ios&dev=true&minify=false", testFile]];
+}
+
+static NSURL *ipBundleURL()
+{
+  return [NSURL URLWithString:[NSString stringWithFormat:@"http://192.168.1.1:8081/%@.bundle?platform=ios&dev=true&minify=false", testFile]];
+}
+
+@implementation NSBundle (RCTBundleURLProviderTests)
+
+- (NSURL *)RCT_URLForResource:(NSString *)name withExtension:(NSString *)ext
+{
+  // Ensure that test files is always reported as existing
+  if ([[name stringByAppendingFormat:@".%@", ext] isEqualToString:mainBundle]) {
+    return [[self bundleURL] URLByAppendingPathComponent:mainBundle];
+  }
+  return [self RCT_URLForResource:name withExtension:ext];
+}
+
+@end
+
+@interface RCTBundleURLProviderTests : XCTestCase
+@end
+
+@implementation RCTBundleURLProviderTests
+
+- (void)setUp
+{
+  [super setUp];
+
+  RCTSwapInstanceMethods([NSBundle class],
+                         @selector(URLForResource:withExtension:),
+                          @selector(RCT_URLForResource:withExtension:));
+  [[RCTBundleURLProvider sharedSettings] setDefaults];
+}
+
+- (void)tearDown
+{
+  RCTSwapInstanceMethods([NSBundle class],
+                         @selector(URLForResource:withExtension:),
+                         @selector(RCT_URLForResource:withExtension:));
+
+  [super tearDown];
+}
+
+- (void)testBundleURL
+{
+  RCTBundleURLProvider *settings = [RCTBundleURLProvider sharedSettings];
+  settings.jsLocation = nil;
+  NSURL *URL = [settings jsBundleURLForBundleRoot:testFile fallbackResource:nil];
+  if (!getenv("CI_USE_PACKAGER")) {
+    XCTAssertEqualObjects(URL, mainBundleURL());
+  } else {
+    XCTAssertEqualObjects(URL, localhostBundleURL());
+  }
+}
+
+- (void)testLocalhostURL
+{
+  RCTBundleURLProvider *settings = [RCTBundleURLProvider sharedSettings];
+  settings.jsLocation = @"localhost";
+  NSURL *URL = [settings jsBundleURLForBundleRoot:testFile fallbackResource:nil];
+  XCTAssertEqualObjects(URL, localhostBundleURL());
+}
+
+- (void)testIPURL
+{
+  RCTBundleURLProvider *settings = [RCTBundleURLProvider sharedSettings];
+  settings.jsLocation = @"192.168.1.1";
+  NSURL *URL = [settings jsBundleURLForBundleRoot:testFile fallbackResource:nil];
+  XCTAssertEqualObjects(URL, ipBundleURL());
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTEventDispatcherTests.m

@@ -103,7 +103,10 @@
   [[_bridge expect] enqueueJSCall:_JSMethod
                              args:[_testEvent arguments]];
 
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-declarations"
   [_eventDispatcher sendDeviceEventWithName:_eventName body:_body];
+#pragma clang diagnostic pop
 
   [_bridge verify];
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderTests.m

@@ -49,7 +49,8 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader]; } launchOptions:nil];
 
-  [bridge.imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
+  NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://facebook.github.io/react/img/logo_og.png"]];
+  [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
   } completionBlock:^(NSError *loadError, id loadedImage) {
@@ -79,7 +80,8 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader1, loader2]; } launchOptions:nil];
 
-  [bridge.imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
+  NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://facebook.github.io/react/img/logo_og.png"]];
+  [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
   } completionBlock:^(NSError *loadError, id loadedImage) {
@@ -103,11 +105,11 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder]; } launchOptions:nil];
 
-  RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageDataWithoutClipping:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
+  RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 clipped:NO resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);
     XCTAssertNil(decodeError);
   }];
-  XCTAssertNil(cancelBlock);
+  XCTAssertNotNil(cancelBlock);
 }
 
 - (void)testImageLoaderUsesImageDecoderWithHighestPriority
@@ -132,11 +134,11 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder1, decoder2]; } launchOptions:nil];
 
-  RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageDataWithoutClipping:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
+  RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 clipped:NO resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);
     XCTAssertNil(decodeError);
   }];
-  XCTAssertNil(cancelBlock);
+  XCTAssertNotNil(cancelBlock);
 }
 
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleInitNotificationRaceTests.m

@@ -41,11 +41,16 @@
 
 RCT_EXPORT_MODULE()
 
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-implementations"
+
 - (NSArray<NSString *> *)customDirectEventTypes
 {
   return @[@"foo"];
 }
 
+#pragma clang diagnostic pop
+
 @end