[0.29.0-rc.1] Bump version numbers

Summary:
solves first part of #8186
Closes https://github.com/facebook/react-native/pull/8352

Differential Revision: D3475905

Pulled By: mkonicek

fbshipit-source-id: 99f6aa15b92ba3192fa0b812d369bd7020469573

.flowconfig

@@ -1,71 +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/
-
-# Ignore RNPM
-.*/local-cli/rnpm/.*
-
-.*/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]
 
@@ -79,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'
@@ -88,9 +32,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-5]\\|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.25.0
+^0.27.0

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/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/NavigationAnimatedExample.js

@@ -1,164 +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,
-} = NavigationExperimental;
-
-const ExampleReducer = 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 {
-  constructor(props, context) {
-    super(props, context);
-    this.state = ExampleReducer();
-  }
-
-  componentWillMount() {
-    this._renderCard = this._renderCard.bind(this);
-    this._renderHeader = this._renderHeader.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-    this._renderTitleComponent = this._renderTitleComponent.bind(this);
-    this._handleAction = this._handleAction.bind(this);
-  }
-
-  _handleAction(action): boolean {
-    if (!action) {
-      return false;
-    }
-    const newState = ExampleReducer(this.state, action);
-    if (newState === this.state) {
-      return false;
-    }
-    this.setState(newState);
-    return true;
-  }
-
-  handleBackAction(): boolean {
-    return this._handleAction({ type: 'BackAction', });
-  }
-
-  render() {
-    return (
-      <NavigationAnimatedView
-        navigationState={this.state}
-        style={styles.animatedView}
-        onNavigate={this._handleAction}
-        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,110 +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 {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-} = ReactNative;
-const NavigationExampleRow = require('./NavigationExampleRow');
-const {
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-
-const ExampleReducer = 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({
-
-  getInitialState: function() {
-    return ExampleReducer();
-  },
-
-  render: function() {
-    return (
-      <ScrollView style={styles.topView}>
-        <NavigationExampleRow
-          text={`Current page: ${this.state.children[this.state.index].key}`}
-        />
-        <NavigationExampleRow
-          text={`Push page #${this.state.children.length}`}
-          onPress={() => {
-            this._handleAction({ type: 'push', key: 'page #' + this.state.children.length });
-          }}
-        />
-        <NavigationExampleRow
-          text="pop"
-          onPress={() => {
-            this._handleAction({ type: 'BackAction' });
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Basic Nav Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  },
-
-  _handleAction(action) {
-    if (!action) {
-      return false;
-    }
-    const newState = ExampleReducer(this.state, action);
-    if (newState === this.state) {
-      return false;
-    }
-    this.setState(newState);
-    return true;
-  },
-
-  handleBackAction() {
-    return this._handleAction({ type: 'BackAction' });
-  },
-
-});
-
-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,165 +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,
-} = NavigationExperimental;
-
-function createReducer(initialState) {
-  return (currentState = initialState, action) => {
-    switch (action.type) {
-      case 'push':
-        return NavigationStateUtils.push(currentState, {key: action.key});
-
-      case 'BackAction':
-      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,
-      navState: ExampleReducer(undefined, {}),
-    };
-  }
-
-  componentWillMount() {
-    this._renderScene = this._renderScene.bind(this);
-    this._toggleDirection = this._toggleDirection.bind(this);
-    this._handleAction = this._handleAction.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationCardStack
-        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
-        navigationState={this.state.navState}
-        onNavigate={this._handleAction}
-        renderScene={this._renderScene}
-        style={styles.main}
-      />
-    );
-  }
-
-  _handleAction(action): boolean {
-    if (!action) {
-      return false;
-    }
-    const newState = ExampleReducer(this.state.navState, action);
-    if (newState === this.state.navState) {
-      return false;
-    }
-    this.setState({
-      navState: newState,
-    });
-    return true;
-  }
-
-  handleBackAction(): boolean {
-    return this._handleAction({ type: 'BackAction', });
-  }
-
-  _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,321 +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,
-  Header: NavigationHeader,
-  Reducer: NavigationReducer,
-} = 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}
-        onNavigate={this.props.onNavigate}
-        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>
-    );
-  }
-}
-
-class NavigationCompositionExample extends React.Component {
-  state: NavigationParentState;
-  constructor() {
-    super();
-    this.state = ExampleAppReducer(undefined, {});
-  }
-  handleAction(action: Object): boolean {
-    if (!action) {
-      return false;
-    }
-    const newState = ExampleAppReducer(this.state, action);
-    if (newState === this.state) {
-      return false;
-    }
-    this.setState(newState);
-    return true;
-  }
-  handleBackAction(): boolean {
-    return this.handleAction({ type: 'BackAction' });
-  }
-  render() {
-    if (!this.state) {
-      return null;
-    }
-    return (
-      <View style={styles.topView}>
-        <ExampleMainView
-          navigationState={this.state}
-          onExampleExit={this.props.onExampleExit}
-          onNavigate={this.handleAction.bind(this)}
-        />
-        <NavigationExampleTabBar
-          tabs={this.state.children}
-          index={this.state.index}
-          onNavigate={this.handleAction.bind(this)}
-        />
-      </View>
-    );
-  }
-}
-
-class ExampleMainView extends React.Component {
-  _renderScene: Function;
-  _handleNavigation: Function;
-
-  componentWillMount() {
-    this._renderScene = this._renderScene.bind(this);
-    this._handleNavigation = this._handleNavigation.bind(this);
-  }
-
-  render() {
-    return (
-      <View style={styles.tabsContent}>
-        {this._renderScene()}
-      </View>
-    );
-  }
-
-  _renderScene(): ReactElement {
-    const {navigationState} = this.props;
-    const childState = navigationState.children[navigationState.index];
-    return (
-      <ExampleTabScreen
-        key={'tab_screen' + childState.key}
-        navigationState={childState}
-        onNavigate={this._handleNavigation}
-      />
-    );
-  }
-
-  _handleNavigation(action: Object) {
-    if (ExampleExitAction.match(action)) {
-      this.props.onExampleExit();
-      return;
-    }
-    this.props.onNavigate(action);
-  }
-}
-
-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,83 +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 NavigationExperimental = require('NavigationExperimental');
-const React = require('react');
-const StyleSheet = require('StyleSheet');
-const Text = require('Text');
-const TouchableOpacity = require('TouchableOpacity');
-const View = require('View');
-const {
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-const {
-  JumpToAction,
-} = NavigationReducer.TabsReducer;
-
-const NavigationExampleTabBar = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.tabBar}>
-        {this.props.tabs.map(this._renderTab)}
-      </View>
-    );
-  },
-  _renderTab: function(tab, index) {
-    const 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>
-    );
-  },
-});
-
-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

@@ -33,12 +33,8 @@ const View = require('View');
  * To learn how to use the Navigation API, take a look at the following example files:
  */
 const EXAMPLES = {
-  'Tabs': require('./NavigationTabsExample'),
-  'Basic': require('./NavigationBasicExample'),
-  'Animated Example': require('./NavigationAnimatedExample'),
-  'Composition': require('./NavigationCompositionExample'),
-  'Card Stack Example': require('./NavigationCardStackExample'),
-  'Tic Tac Toe': require('./NavigationTicTacToeExample'),
+  'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
+  'CardStack Example': require('./NavigationCardStack-example'),
 };
 
 const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';

Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.js

@@ -1,120 +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 {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  View,
-} = ReactNative;
-const {
-  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>
-    );
-  }
-}
-
-const ExampleTabsReducer = NavigationReducer.TabsReducer({
-  tabReducers: [
-    (lastRoute) => lastRoute || {key: 'one'},
-    (lastRoute) => lastRoute || {key: 'two'},
-    (lastRoute) => lastRoute || {key: 'three'},
-  ],
-});
-
-class NavigationTabsExample extends React.Component {
-  constructor() {
-    super();
-    this.state = ExampleTabsReducer(undefined, {});
-  }
-  render() {
-    return (
-      <View style={styles.topView}>
-        <ExmpleTabPage
-          tabs={this.state.children}
-          index={this.state.index}
-          onExampleExit={this.props.onExampleExit}
-          onNavigate={this.handleAction.bind(this)}
-        />
-        <NavigationExampleTabBar
-          tabs={this.state.children}
-          index={this.state.index}
-          onNavigate={this.handleAction.bind(this)}
-        />
-      </View>
-    );
-  }
-  handleAction(action) {
-    if (!action) {
-      return false;
-    }
-    const newState = ExampleTabsReducer(this.state, action);
-    if (newState === this.state) {
-      return false;
-    }
-    this.setState(newState);
-    return true;
-  }
-  handleBackAction() {
-    return this.handleAction({ type: 'BackAction' });
-  }
-}
-
-const styles = StyleSheet.create({
-  topView: {
-    flex: 1,
-    paddingTop: 30,
-  },
-  tabPage: {
-    backgroundColor: '#E9E9EF',
-  },
-});
-
-module.exports = NavigationTabsExample;

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js

@@ -1,326 +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.
- *
- * @providesModule NavigationTicTacToeExample
- * @flow
- */
-'use strict';
-
-const React = require('react');
-const StyleSheet = require('StyleSheet');
-const Text = require('Text');
-const TouchableHighlight = require('TouchableHighlight');
-const View = require('View');
-
-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 (let 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 (let 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 (let i = 0; i < 3; i++) {
-    for (let 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>
-  );
-}
-
-function TicTacToeGame(props) {
-  const 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}
-        onNavigate={props.onNavigate}
-      />
-    </View>
-  );
-}
-
-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;
-}
-
-type AppState = {
-  game: string,
-};
-
-class NavigationTicTacToeExample extends React.Component {
-  _handleAction: Function;
-  state: AppState;
-  constructor() {
-    super();
-    this._handleAction = this._handleAction.bind(this);
-    this.state = {
-      game: ''
-    };
-  }
-  _handleAction(action: Object) {
-    const newState = GameReducer(this.state.game, action);
-    if (newState !== this.state.game) {
-      this.setState({
-        game: newState,
-      });
-    }
-  }
-  render() {
-    return (
-      <TicTacToeGame
-        game={this.state && this.state.game}
-        onExampleExit={this.props.onExampleExit}
-        onNavigate={this._handleAction}
-      />
-    );
-  }
-}
-
-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

@@ -351,7 +351,7 @@ exports.examples = [
   },
 }, {
   title: 'Toggling Attributes',
-  render: function(): ReactElement {
+  render: function(): ReactElement<any> {
     return <AttributeToggler />;
   },
 }, {
@@ -444,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.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/UIExplorerApp.android.js

@@ -37,9 +37,12 @@ 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');
 
+UIManager.setLayoutAnimationEnabledExperimental(true);
+
 const DRAWER_WIDTH_LEFT = 56;
 
 type Props = {
@@ -137,11 +140,11 @@ class UIExplorerApp extends React.Component {
         />
       );
     }
-    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 (
@@ -171,7 +174,7 @@ class UIExplorerApp extends React.Component {
         <UIExplorerExampleList
           onNavigate={this._handleAction}
           list={UIExplorerList}
-          {...stack.children[0]}
+          {...stack.routes[0]}
         />
       </View>
     );

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -60,12 +60,15 @@ type State = UIExplorerNavigationState & {
   externalExample?: string,
 };
 
+const APP_STATE_KEY = 'UIExplorerAppState.v1';
+
 class UIExplorerApp extends React.Component {
+  _handleBack: Function;
+  _handleAction: Function;
+  _renderCard: Function;
   _renderOverlay: Function;
   _renderScene: Function;
-  _renderCard: Function;
   _renderTitleComponent: Function;
-  _handleAction: Function;
   state: State;
 
   constructor(props: Props) {
@@ -74,6 +77,7 @@ class UIExplorerApp extends React.Component {
 
   componentWillMount() {
     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);
@@ -81,7 +85,7 @@ class UIExplorerApp extends React.Component {
 
   componentDidMount() {
     Linking.getInitialURL().then((url) => {
-      AsyncStorage.getItem('UIExplorerAppState', (err, storedString) => {
+      AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
         const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
         const urlAction = URIActionMap(url);
         const launchAction = exampleAction || urlAction;
@@ -111,7 +115,7 @@ class UIExplorerApp extends React.Component {
     const newState = UIExplorerNavigationReducer(this.state, action);
     if (this.state !== newState) {
       this.setState(newState);
-      AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state));
+      AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state));
     }
   }
 
@@ -135,30 +139,31 @@ class UIExplorerApp extends React.Component {
         style={styles.container}
         renderOverlay={this._renderOverlay}
         renderScene={this._renderScene}
-        onNavigate={this._handleAction}
+
       />
     );
   }
 
-  _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

Examples/UIExplorer/UIExplorerExampleList.js

@@ -62,7 +62,7 @@ class UIExplorerExampleList extends React.Component {
       example;
   }
 
-  render(): ?ReactElement {
+  render(): ?ReactElement<any> {
     const filterText = this.props.filter || '';
     const filterRegex = new RegExp(String(filterText), 'i');
     const filter = (example) => filterRegex.test(example.module.title);
@@ -80,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"
@@ -88,7 +89,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderTitleRow(): ?ReactElement {
+  _renderTitleRow(): ?ReactElement<any> {
     if (!this.props.displayTitleRow) {
       return null;
     }
@@ -104,7 +105,7 @@ class UIExplorerExampleList extends React.Component {
     );
   }
 
-  _renderTextInput(): ?ReactElement {
+  _renderTextInput(): ?ReactElement<any> {
     if (this.props.disableSearch) {
       return null;
     }
@@ -126,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()}
@@ -134,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,
@@ -143,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}>

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

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/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'),
@@ -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

@@ -29,8 +29,8 @@ export type UIExplorerExample = {
 
 const ComponentExamples: Array<UIExplorerExample> = [
   {
-    key: 'ActivityIndicatorIOSExample',
-    module: require('./ActivityIndicatorIOSExample'),
+    key: 'ActivityIndicatorExample',
+    module: require('./ActivityIndicatorExample'),
   },
   {
     key: 'DatePickerIOSExample',
@@ -40,6 +40,10 @@ const ComponentExamples: Array<UIExplorerExample> = [
     key: 'ImageExample',
     module: require('./ImageExample'),
   },
+  {
+    key: 'KeyboardAvoidingViewExample',
+    module: require('./KeyboardAvoidingViewExample'),
+  },
   {
     key: 'LayoutEventsExample',
     module: require('./LayoutEventsExample'),
@@ -64,6 +68,10 @@ const ComponentExamples: Array<UIExplorerExample> = [
     key: 'ModalExample',
     module: require('./ModalExample'),
   },
+  {
+    key: 'NativeAnimationsExample',
+    module: require('./NativeAnimationsExample'),
+  },
   {
     key: 'NavigatorExample',
     module: require('./Navigator/NavigatorExample'),
@@ -171,10 +179,6 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'AnExApp',
     module: require('./AnimatedGratuitousApp/AnExApp'),
   },
-  {
-    key: 'AppStateIOSExample',
-    module: require('./AppStateIOSExample'),
-  },
   {
     key: 'AppStateExample',
     module: require('./AppStateExample'),
@@ -247,10 +251,6 @@ const 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
 
 

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleInitTests.m

@@ -48,7 +48,7 @@ RCT_EXPORT_MODULE()
 
 @interface RCTTestCustomInitModule : NSObject <RCTBridgeModule>
 
-@property (nonatomic, assign) BOOL initializedOnMainThread;
+@property (nonatomic, assign) BOOL initializedOnMainQueue;
 
 @end
 
@@ -62,7 +62,7 @@ RCT_EXPORT_MODULE()
 - (id)init
 {
   if ((self = [super init])) {
-    _initializedOnMainThread = [NSThread isMainThread];
+    _initializedOnMainQueue = RCTIsMainQueue();
   }
   return self;
 }
@@ -72,7 +72,7 @@ RCT_EXPORT_MODULE()
 
 @interface RCTTestCustomSetBridgeModule : NSObject <RCTBridgeModule>
 
-@property (nonatomic, assign) BOOL setBridgeOnMainThread;
+@property (nonatomic, assign) BOOL setBridgeOnMainQueue;
 
 @end
 
@@ -86,7 +86,7 @@ RCT_EXPORT_MODULE()
 - (void)setBridge:(RCTBridge *)bridge
 {
   _bridge = bridge;
-  _setBridgeOnMainThread = [NSThread isMainThread];
+  _setBridgeOnMainQueue = RCTIsMainQueue();
 }
 
 @end
@@ -95,7 +95,7 @@ RCT_EXPORT_MODULE()
 @interface RCTTestExportConstantsModule : NSObject <RCTBridgeModule>
 
 @property (nonatomic, assign) BOOL exportedConstants;
-@property (nonatomic, assign) BOOL exportedConstantsOnMainThread;
+@property (nonatomic, assign) BOOL exportedConstantsOnMainQueue;
 
 @end
 
@@ -109,7 +109,7 @@ RCT_EXPORT_MODULE()
 - (NSDictionary<NSString *, id> *)constantsToExport
 {
   _exportedConstants = YES;
-  _exportedConstantsOnMainThread = [NSThread isMainThread];
+  _exportedConstantsOnMainQueue = RCTIsMainQueue();
   return @{ @"foo": @"bar" };
 }
 
@@ -137,7 +137,7 @@ RCT_EXPORT_MODULE()
   BOOL _customSetBridgeModuleNotificationSent;
   BOOL _exportConstantsModuleNotificationSent;
   BOOL _lazyInitModuleNotificationSent;
-  BOOL _lazyInitModuleNotificationSentOnMainThread;
+  BOOL _lazyInitModuleNotificationSentOnMainQueue;
   BOOL _viewManagerModuleNotificationSent;
   RCTTestInjectedModule *_injectedModule;
 }
@@ -196,7 +196,7 @@ RCT_EXPORT_MODULE()
     _exportConstantsModuleNotificationSent = YES;
   } else if ([module isKindOfClass:[RCTLazyInitModule class]]) {
     _lazyInitModuleNotificationSent = YES;
-    _lazyInitModuleNotificationSentOnMainThread = [NSThread isMainThread];
+    _lazyInitModuleNotificationSentOnMainQueue = RCTIsMainQueue();
   }
 }
 
@@ -214,7 +214,7 @@ RCT_EXPORT_MODULE()
   RUN_RUNLOOP_WHILE(!_customInitModuleNotificationSent);
   XCTAssertTrue(_customInitModuleNotificationSent);
   RCTTestCustomInitModule *module = [_bridge moduleForClass:[RCTTestCustomInitModule class]];
-  XCTAssertTrue(module.initializedOnMainThread);
+  XCTAssertTrue(module.initializedOnMainQueue);
   XCTAssertEqual(module.bridge, _bridge.batchedBridge);
   XCTAssertNotNil(module.methodQueue);
 }
@@ -230,7 +230,7 @@ RCT_EXPORT_MODULE()
 
   RUN_RUNLOOP_WHILE(!module);
   XCTAssertTrue(_customSetBridgeModuleNotificationSent);
-  XCTAssertFalse(module.setBridgeOnMainThread);
+  XCTAssertFalse(module.setBridgeOnMainQueue);
   XCTAssertEqual(module.bridge, _bridge.batchedBridge);
   XCTAssertNotNil(module.methodQueue);
 }
@@ -242,7 +242,7 @@ RCT_EXPORT_MODULE()
   RCTTestExportConstantsModule *module = [_bridge moduleForClass:[RCTTestExportConstantsModule class]];
   RUN_RUNLOOP_WHILE(!module.exportedConstants);
   XCTAssertTrue(module.exportedConstants);
-  XCTAssertTrue(module.exportedConstantsOnMainThread);
+  XCTAssertTrue(module.exportedConstantsOnMainQueue);
   XCTAssertEqual(module.bridge, _bridge.batchedBridge);
   XCTAssertNotNil(module.methodQueue);
 }
@@ -258,7 +258,7 @@ RCT_EXPORT_MODULE()
 
   RUN_RUNLOOP_WHILE(!module);
   XCTAssertTrue(_lazyInitModuleNotificationSent);
-  XCTAssertFalse(_lazyInitModuleNotificationSentOnMainThread);
+  XCTAssertFalse(_lazyInitModuleNotificationSentOnMainQueue);
   XCTAssertNotNil(module);
   XCTAssertEqual(module.bridge, _bridge.batchedBridge);
   XCTAssertNotNil(module.methodQueue);

Examples/UIExplorer/UIExplorerUnitTests/RCTUIManagerTests.m

@@ -73,12 +73,14 @@
               removeAtIndices:nil
                      registry:_uiManager.viewRegistry];
 
+  [containerView 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]);
   for (UIView *view in addedViews) {
-    XCTAssertTrue([view superview] == containerView,
-                 @"Expected to have manage children successfully add children");
+    XCTAssertTrue([view reactSuperview] == containerView,
+                  @"Expected to have manage children successfully add children");
     [view removeFromSuperview];
   }
 }
@@ -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,12 +109,14 @@
               removeAtIndices:removeAtIndices
                      registry:_uiManager.viewRegistry];
 
+  [containerView 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",
                containerView.reactSubviews.count);
   for (UIView *view in removedViews) {
-    XCTAssertTrue([view superview] == nil,
+    XCTAssertTrue([view reactSuperview] == nil,
                  @"Expected to have manage children successfully remove children");
     // After removing views are unregistered - we need to reregister
     _uiManager.viewRegistry[view.reactTag] = view;
@@ -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
@@ -166,6 +170,8 @@
               removeAtIndices:removeAtIndices
                      registry:_uiManager.viewRegistry];
 
+  [containerView didUpdateReactSubviews];
+
   XCTAssertTrue([[containerView reactSubviews] count] == 8,
                @"Expect to have 8 react subviews after calling manage children,\
                instead have the following subviews %@", [containerView reactSubviews]);

Examples/UIExplorer/ViewExample.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.
  *
@@ -30,7 +37,13 @@ var styles = StyleSheet.create({
     backgroundColor: '#527FE4',
     borderColor: '#000033',
     borderWidth: 1,
-  }
+  },
+  zIndex: {
+    justifyContent: 'space-around',
+    width: 100,
+    height: 50,
+    marginTop: -10,
+  },
 });
 
 var ViewBorderStyleExample = React.createClass({
@@ -74,6 +87,53 @@ var ViewBorderStyleExample = React.createClass({
   }
 });
 
+var ZIndexExample = React.createClass({
+  getInitialState() {
+    return {
+      flipped: false
+    };
+  },
+  
+  render() {
+    const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
+          <View style={[
+            styles.zIndex,
+            {marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0]}
+          ]}>
+            <Text>ZIndex {indices[0]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1]}
+          ]}>
+            <Text>ZIndex {indices[1]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2]}
+          ]}>
+            <Text>ZIndex {indices[2]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3]}
+          ]}>
+            <Text>ZIndex {indices[3]}</Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+  
+  _handlePress() {
+    this.setState({flipped: !this.state.flipped});
+  }
+});
+
 exports.title = '<View>';
 exports.description = 'Basic building block of all UI, examples that ' +
   'demonstrate some of the many styles available.';
@@ -188,5 +248,10 @@ exports.examples = [
         </View>
       );
     },
+  }, {
+    title: 'ZIndex',
+    render: function() {
+      return <ZIndexExample />;
+    },
   },
 ];

Examples/UIExplorer/WebSocketExample.js

@@ -43,7 +43,7 @@ const WS_STATES = [
 ];
 
 class Button extends React.Component {
-  render(): ReactElement {
+  render(): ReactElement<any> {
     const label = <Text style={styles.buttonLabel}>{this.props.label}</Text>;
     if (this.props.disabled) {
       return (
@@ -63,7 +63,7 @@ class Button extends React.Component {
 }
 
 class Row extends React.Component {
-  render(): ReactElement {
+  render(): ReactElement<any> {
     return (
       <View style={styles.row}>
         <Text>{this.props.label}</Text>
@@ -162,7 +162,7 @@ class WebSocketExample extends React.Component<any, any, State> {
     this.setState({outgoingMessage: ''});
   };
 
-  render(): ReactElement {
+  render(): ReactElement<any> {
     const socketState = WS_STATES[this.state.socketState || -1];
     const canConnect =
       !this.state.socket ||

Examples/UIExplorer/WebViewExample.js

@@ -336,15 +336,15 @@ exports.description = 'Base component to display web content';
 exports.examples = [
   {
     title: 'Simple Browser',
-    render(): ReactElement { return <WebViewExample />; }
+    render(): ReactElement<any> { return <WebViewExample />; }
   },
   {
     title: 'Scale Page to Fit',
-    render(): ReactElement { return <ScaledWebView/>; }
+    render(): ReactElement<any> { return <ScaledWebView/>; }
   },
   {
     title: 'Bundled HTML',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <WebView
           style={{
@@ -359,7 +359,7 @@ exports.examples = [
   },
   {
     title: 'Static HTML',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <WebView
           style={{
@@ -374,7 +374,7 @@ exports.examples = [
   },
   {
     title: 'POST Test',
-    render(): ReactElement {
+    render(): ReactElement<any> {
       return (
         <WebView
           style={{

Examples/UIExplorer/XHRExample.android.js

@@ -24,6 +24,8 @@ var {
   TextInput,
   TouchableHighlight,
   View,
+  Image,
+  CameraRoll
 } = ReactNative;
 
 var XHRExampleHeaders = require('./XHRExampleHeaders');
@@ -127,6 +129,8 @@ class Downloader extends React.Component {
   }
 }
 
+var PAGE_SIZE = 20;
+
 class FormUploader extends React.Component {
 
   _isMounted: boolean;
@@ -143,6 +147,8 @@ class FormUploader extends React.Component {
     this._isMounted = true;
     this._addTextParam = this._addTextParam.bind(this);
     this._upload = this._upload.bind(this);
+    this._fetchRandomPhoto = this._fetchRandomPhoto.bind(this);
+    this._fetchRandomPhoto();
   }
 
   _addTextParam() {
@@ -151,6 +157,25 @@ class FormUploader extends React.Component {
     this.setState({textParams});
   }
 
+  _fetchRandomPhoto() {
+    CameraRoll.getPhotos(
+      {first: PAGE_SIZE}
+    ).then(
+      (data) => {
+        if (!this._isMounted) {
+          return;
+        }
+        var edges = data.edges;
+        var edge = edges[Math.floor(Math.random() * edges.length)];
+        var randomPhoto = edge && edge.node && edge.node.image;
+        if (randomPhoto) {
+          this.setState({randomPhoto});
+        }
+      },
+      (error) => undefined
+    );
+  }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
@@ -201,19 +226,29 @@ class FormUploader extends React.Component {
     this.state.textParams.forEach(
       (param) => formdata.append(param.name, param.value)
     );
-    if (xhr.upload) {
-      xhr.upload.onprogress = (event) => {
-        console.log('upload onprogress', event);
-        if (event.lengthComputable) {
-          this.setState({uploadProgress: event.loaded / event.total});
-        }
-      };
+    if (this.state.randomPhoto) {
+      formdata.append('image', {...this.state.randomPhoto, type:'image/jpg', name: 'image.jpg'});
     }
+    xhr.upload.onprogress = (event) => {
+      console.log('upload onprogress', event);
+      if (event.lengthComputable) {
+        this.setState({uploadProgress: event.loaded / event.total});
+      }
+    };
     xhr.send(formdata);
     this.setState({isUploading: true});
   }
 
   render() {
+    var image = null;
+    if (this.state.randomPhoto) {
+      image = (
+        <Image
+          source={this.state.randomPhoto}
+          style={styles.randomPhoto}
+        />
+      );
+    }
     var textItems = this.state.textParams.map((item, index) => (
       <View style={styles.paramRow}>
         <TextInput
@@ -252,6 +287,15 @@ class FormUploader extends React.Component {
     }
     return (
       <View>
+        <View style={[styles.paramRow, styles.photoRow]}>
+          <Text style={styles.photoLabel}>
+            Random photo from your library
+            (<Text style={styles.textButton} onPress={this._fetchRandomPhoto}>
+              update
+            </Text>)
+          </Text>
+          {image}
+        </View>
         {textItems}
         <View>
           <Text
@@ -320,6 +364,10 @@ var styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'grey',
   },
+  randomPhoto: {
+    width: 50,
+    height: 50,
+  },
   textButton: {
     color: 'blue',
   },

Examples/UIExplorer/XHRExample.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.
  *
@@ -21,7 +28,7 @@ var {
   AlertIOS,
   CameraRoll,
   Image,
-  LinkingIOS,
+  Linking,
   ProgressViewIOS,
   StyleSheet,
   Text,
@@ -215,7 +222,7 @@ class FormUploader extends React.Component {
         return;
       }
       var url = xhr.responseText.slice(index).split('\n')[0];
-      LinkingIOS.openURL(url);
+      Linking.openURL(url);
     };
     var formdata = new FormData();
     if (this.state.randomPhoto) {
@@ -224,14 +231,13 @@ class FormUploader extends React.Component {
     this.state.textParams.forEach(
       (param) => formdata.append(param.name, param.value)
     );
-    if (xhr.upload) {
-      xhr.upload.onprogress = (event) => {
-        console.log('upload onprogress', event);
-        if (event.lengthComputable) {
-          this.setState({uploadProgress: event.loaded / event.total});
-        }
-      };
-    }
+    xhr.upload.onprogress = (event) => {
+      console.log('upload onprogress', event);
+      if (event.lengthComputable) {
+        this.setState({uploadProgress: event.loaded / event.total});
+      }
+    };
+
     xhr.send(formdata);
     this.setState({isUploading: true});
   }

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

@@ -13,9 +13,10 @@
 
   <uses-sdk
     android:minSdkVersion="16"
-    android:targetSdkVersion="22" />
+    android:targetSdkVersion="23" />
 
   <application
+      android:name=".UIExplorerApplication"
       android:allowBackup="true"
       android:icon="@drawable/launcher_icon"
       android:label="@string/app_name"

Examples/UIExplorer/android/app/src/main/java/UIExplorerActivity.java

@@ -1,78 +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.
- */
-
-package com.facebook.react.uiapp;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-import com.facebook.react.uiapp.R;
-
-import java.util.Arrays;
-import java.util.List;
-import javax.annotation.Nullable;
-
-import android.os.Bundle;
-
-public class UIExplorerActivity extends ReactActivity {
-  private final String PARAM_ROUTE = "route";
-  private Bundle mInitialProps = null;
-
-  @Override
-  protected void onCreate(Bundle savedInstanceState) {
-      // Get remote param before calling super which uses it
-      Bundle bundle = getIntent().getExtras();
-      if (bundle != null && bundle.containsKey(PARAM_ROUTE)) {
-          String routeUri = new StringBuilder("rnuiexplorer://example/")
-            .append(bundle.getString(PARAM_ROUTE))
-            .append("Example")
-            .toString();
-          mInitialProps = new Bundle();
-          mInitialProps.putString("exampleFromAppetizeParams", routeUri);
-      }
-      super.onCreate(savedInstanceState);
-  }
-
-  @Override
-  protected Bundle getLaunchOptions() {
-      return mInitialProps;
-  }
-
-  @Override
-  protected String getMainComponentName() {
-      return "UIExplorerApp";
-  }
-
-  @Override
-  protected @Nullable String getBundleAssetName() {
-    return "UIExplorerApp.android.bundle";
-  };
-
-  @Override
-  protected String getJSMainModuleName() {
-    return "Examples/UIExplorer/UIExplorerApp.android";
-  }
-
-  @Override
-  protected boolean getUseDeveloperSupport() {
-      return true;
-  }
-
-  @Override
-  protected List<ReactPackage> getPackages() {
-    return Arrays.<ReactPackage>asList(
-      new MainReactPackage()
-    );
-  }
-}

Examples/UIExplorer/android/app/src/main/java/com/facebook/react/uiapp/UIExplorerActivity.java

@@ -0,0 +1,49 @@
+/**
+ * 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.uiapp;
+
+import android.os.Bundle;
+
+import com.facebook.react.ReactActivity;
+
+public class UIExplorerActivity extends ReactActivity {
+  private final String PARAM_ROUTE = "route";
+  private Bundle mInitialProps = null;
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    // Get remote param before calling super which uses it
+    Bundle bundle = getIntent().getExtras();
+    if (bundle != null && bundle.containsKey(PARAM_ROUTE)) {
+      String routeUri = new StringBuilder("rnuiexplorer://example/")
+        .append(bundle.getString(PARAM_ROUTE))
+        .append("Example")
+        .toString();
+      mInitialProps = new Bundle();
+      mInitialProps.putString("exampleFromAppetizeParams", routeUri);
+    }
+    super.onCreate(savedInstanceState);
+  }
+
+  @Override
+  protected Bundle getLaunchOptions() {
+    return mInitialProps;
+  }
+
+  @Override
+  protected String getMainComponentName() {
+    return "UIExplorerApp";
+  }
+}

Examples/UIExplorer/android/app/src/main/java/com/facebook/react/uiapp/UIExplorerApplication.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.uiapp;
+
+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 UIExplorerApplication extends Application implements ReactApplication {
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public String getJSMainModuleName() {
+      return "Examples/UIExplorer/UIExplorerApp.android";
+    }
+
+    @Override
+    public @Nullable String getBundleAssetName() {
+      return "UIExplorerApp.android.bundle";
+    }
+
+    @Override
+    public boolean getUseDeveloperSupport() {
+      return true;
+    }
+
+    @Override
+    public List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+        new MainReactPackage()
+      );
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+};

IntegrationTests/PromiseTest.js

@@ -47,7 +47,7 @@ var PromiseTest = React.createClass({
       .catch(() => this.shouldReject = true);
   },
 
-  async testShouldSucceedAsync() : Promise {
+  async testShouldSucceedAsync() : Promise<any> {
     try {
       await TestModule.shouldResolve();
       this.shouldSucceedAsync = true;
@@ -56,7 +56,7 @@ var PromiseTest = React.createClass({
     }
   },
 
-  async testShouldThrowAsync() : Promise {
+  async testShouldThrowAsync() : Promise<any> {
     try {
       await TestModule.shouldReject();
       this.shouldThrowAsync = false;
@@ -65,7 +65,7 @@ var PromiseTest = React.createClass({
     }
   },
 
-  render() : ReactElement {
+  render() : ReactElement<any> {
     return <View />;
   }
 

Libraries/ART/ARTNode.h

@@ -7,8 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-#import <Foundation/Foundation.h>
-#import <UIKit/UIKit.h>
+#import "UIView+React.h"
 
 /**
  * ART nodes are implemented as empty UIViews but this is just an implementation detail to fit