Second Update from Tue 24 Mar

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		13ACB6741AC2117000FF4204 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13ACB6711AC2113600FF4204 /* libRCTAnimation.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
@@ -16,6 +17,13 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
+		13ACB6701AC2113600FF4204 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 13ACB66C1AC2113500FF4204 /* RCTAnimation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTAnimation;
+		};
 		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -33,6 +41,7 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
+		13ACB66C1AC2113500FF4204 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = ../../Libraries/Animation/RCTAnimation.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* 2048.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = 2048.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = 2048/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = 2048/AppDelegate.m; sourceTree = "<group>"; };
@@ -49,6 +58,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				13ACB6741AC2117000FF4204 /* libRCTAnimation.a in Frameworks */,
 				8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 			);
@@ -57,6 +67,14 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		13ACB66D1AC2113500FF4204 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13ACB6711AC2113600FF4204 /* libRCTAnimation.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		13B07FAE1A68108700A75B9A /* 2048 */ = {
 			isa = PBXGroup;
 			children = (
@@ -75,6 +93,7 @@
 			children = (
 				834D32361A76971A00F38302 /* ReactKit.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
+				13ACB66C1AC2113500FF4204 /* RCTAnimation.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -153,6 +172,10 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
+				{
+					ProductGroup = 13ACB66D1AC2113500FF4204 /* Products */;
+					ProjectRef = 13ACB66C1AC2113500FF4204 /* RCTAnimation.xcodeproj */;
+				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -170,6 +193,13 @@
 /* End PBXProject section */
 
 /* Begin PBXReferenceProxy section */
+		13ACB6711AC2113600FF4204 /* libRCTAnimation.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTAnimation.a;
+			remoteRef = 13ACB6701AC2113600FF4204 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

Examples/Movies/SearchScreen.js

@@ -18,9 +18,9 @@ var {
   StyleSheet,
   Text,
   TextInput,
-  TimerMixin,
   View,
 } = React;
+var TimerMixin = require('react-timer-mixin');
 
 var MovieCell = require('./MovieCell');
 var MovieScreen = require('./MovieScreen');

Examples/UIExplorer/ActivityIndicatorExample.js

@@ -14,9 +14,9 @@ var React = require('react-native');
 var {
   ActivityIndicatorIOS,
   StyleSheet,
-  TimerMixin,
   View,
 } = React;
+var TimerMixin = require('react-timer-mixin');
 
 var ToggleAnimatingActivityIndicator = React.createClass({
   mixins: [TimerMixin],

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule ImageCapInsetsExample
+ * @flow
  */
 'use strict';
 

Examples/UIExplorer/ImageExample.js

@@ -5,6 +5,8 @@
  * 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.
+ *
+ * @flow
  */
 'use strict';
 

Examples/UIExplorer/ImageMocks.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2004-present Facebook. 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.
+ *
+ * @flow
+ */
+'use strict';
+
+declare module 'image!story-background' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}
+
+declare module 'image!uie_comment_highlighted' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}
+
+declare module 'image!uie_comment_normal' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}
+
+declare module 'image!uie_thumb_normal' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}
+
+declare module 'image!uie_thumb_selected' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}

Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js

@@ -0,0 +1,276 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule BreadcrumbNavSample
+ */
+'use strict';
+
+var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
+var JSNavigationStack = require('JSNavigationStack');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var ScrollView = require('ScrollView');
+var TabBarItemIOS = require('TabBarItemIOS');
+var TabBarIOS = require('TabBarIOS');
+var Text = require('Text');
+var TouchableBounce = require('TouchableBounce');
+var View = require('View');
+
+
+
+var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
+
+var _getRandomRoute = function() {
+  return {
+    backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
+    content:
+      SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
+    title: Math.random() > 0.5 ? 'Hello' : 'There',
+    rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
+  };
+};
+
+
+var SampleNavigationBarRouteMapper = {
+  rightContentForRoute: function(route, navigator) {
+    if (route.rightButtonTitle) {
+      return (
+        <Text style={[styles.titleText, styles.filterText]}>
+          {route.rightButtonTitle}
+        </Text>
+      );
+    } else {
+      return null;
+    }
+  },
+  titleContentForRoute: function(route, navigator) {
+    return (
+      <TouchableBounce
+        onPress={() => navigator.push(_getRandomRoute())}>
+        <View>
+          <Text style={styles.titleText}>{route.title}</Text>
+        </View>
+      </TouchableBounce>
+    );
+  },
+  iconForRoute: function(route, navigator) {
+    var onPress =
+      navigator.popToRoute.bind(navigator, route);
+    return (
+      <TouchableBounce onPress={onPress}>
+        <View style={styles.crumbIconPlaceholder} />
+      </TouchableBounce>
+    );
+  },
+  separatorForRoute: function(route, navigator) {
+    return (
+      <TouchableBounce onPress={navigator.pop}>
+        <View style={styles.crumbSeparatorPlaceholder} />
+      </TouchableBounce>
+    );
+  }
+};
+
+var _delay = 400; // Just to test for race conditions with native nav.
+
+var renderScene = function(route, navigator) {
+  var content = route.content;
+  return (
+    <ScrollView>
+      <View style={styles.scene}>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.push)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>request push soon</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigator.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_popRouteLater(navigator.pop)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>request pop soon</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={
+            _immediatelySetTwoItemsLater(
+              navigator.immediatelyResetRouteStack
+            )
+          }>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>Immediate set two routes</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_popToTopLater(navigator.popToTop)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>pop to top soon</Text>
+          </View>
+        </TouchableBounce>
+      </View>
+    </ScrollView>
+  );
+};
+
+var _popToTopLater = function(popToTop) {
+  return () => setTimeout(popToTop, _delay);
+};
+
+var _pushRouteLater = function(push) {
+  return () => setTimeout(
+    () => push(_getRandomRoute()),
+    _delay
+  );
+};
+
+var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
+  return () => setTimeout(
+    () => immediatelyResetRouteStack([
+      _getRandomRoute(),
+      _getRandomRoute(),
+    ])
+  );
+};
+
+var _popRouteLater = function(pop) {
+  return () => setTimeout(pop, _delay);
+};
+
+var BreadcrumbNavSample = React.createClass({
+
+  getInitialState: function() {
+    return {
+      selectedTab: 0,
+    };
+  },
+
+  render: function() {
+    var initialRoute = {
+      backButtonTitle: 'Start', // no back button for initial scene
+      content: SAMPLE_TEXT,
+      title: 'Campaigns',
+      rightButtonTitle: 'Filter',
+    };
+    return (
+      <TabBarIOS>
+        <TabBarItemIOS
+          selected={this.state.selectedTab === 0}
+          onPress={this.onTabSelect.bind(this, 0)}
+          icon={require('image!madman_tabnav_list')}
+          title="One">
+          <JSNavigationStack
+            debugOverlay={false}
+            style={[styles.appContainer]}
+            initialRoute={initialRoute}
+            renderScene={renderScene}
+            navigationBar={
+              <BreadcrumbNavigationBar
+                navigationBarRouteMapper={SampleNavigationBarRouteMapper}
+              />
+            }
+          />
+        </TabBarItemIOS>
+        <TabBarItemIOS
+          selected={this.state.selectedTab === 1}
+          onPress={this.onTabSelect.bind(this, 1)}
+          icon={require('image!madman_tabnav_create')}
+          title="Two">
+          <JSNavigationStack
+            animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+            debugOverlay={false}
+            style={[styles.appContainer]}
+            initialRoute={initialRoute}
+            renderScene={renderScene}
+            navigationBar={
+              <BreadcrumbNavigationBar
+                navigationBarRouteMapper={SampleNavigationBarRouteMapper}
+              />
+            }
+          />
+        </TabBarItemIOS>
+      </TabBarIOS>
+    );
+  },
+
+  onTabSelect: function(tab, event) {
+    if (this.state.selectedTab !== tab) {
+      this.setState({selectedTab: tab});
+    }
+  },
+
+});
+
+var styles = StyleSheet.create({
+  navigationItem: {
+    backgroundColor: '#eeeeee',
+  },
+  scene: {
+    paddingTop: 50,
+    flex: 1,
+  },
+  button: {
+    backgroundColor: '#cccccc',
+    margin: 50,
+    marginTop: 26,
+    padding: 10,
+  },
+  buttonText: {
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  appContainer: {
+    overflow: 'hidden',
+    backgroundColor: '#dddddd',
+    flex: 1,
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#666666',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  filterText: {
+    color: '#5577ff',
+  },
+  // TODO: Accept icons from route.
+  crumbIconPlaceholder: {
+    flex: 1,
+    backgroundColor: '#666666',
+  },
+  crumbSeparatorPlaceholder: {
+    flex: 1,
+    backgroundColor: '#aaaaaa',
+  },
+});
+
+module.exports = BreadcrumbNavSample;

Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('React');
+var JSNavigationStack = require('JSNavigationStack');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var ScrollView = require('ScrollView');
+var TouchableHighlight = require('TouchableHighlight');
+var BreadcrumbNavSample = require('./BreadcrumbNavSample');
+var NavigationBarSample = require('./NavigationBarSample');
+var JumpingNavSample = require('./JumpingNavSample');
+
+class NavMenu extends React.Component {
+  render() {
+    return (
+      <ScrollView style={styles.scene}>
+        <TouchableHighlight style={styles.button} onPress={() => {
+          this.props.navigator.push({ id: 'breadcrumbs' });
+        }}>
+          <Text style={styles.buttonText}>Breadcrumbs Example</Text>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.button} onPress={() => {
+          this.props.navigator.push({ id: 'navbar' });
+        }}>
+          <Text style={styles.buttonText}>Navbar Example</Text>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.button} onPress={() => {
+          this.props.navigator.push({ id: 'jumping' });
+        }}>
+          <Text style={styles.buttonText}>Jumping Example</Text>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.button} onPress={() => {
+          this.props.onExampleExit();
+        }}>
+          <Text style={styles.buttonText}>Exit JSNavigationStack Example</Text>
+        </TouchableHighlight>
+      </ScrollView>
+    );
+  }
+}
+
+var TabBarExample = React.createClass({
+
+  statics: {
+    title: '<JSNavigationStack>',
+    description: 'JS-implemented navigation',
+  },
+
+  renderScene: function(route, nav) {
+    switch (route.id) {
+      case 'menu':
+        return (
+          <NavMenu
+            navigator={nav}
+            onExampleExit={this.props.onExampleExit}
+          />
+        );
+      case 'navbar':
+        return <NavigationBarSample />;
+      case 'breadcrumbs':
+        return <BreadcrumbNavSample />;
+      case 'jumping':
+        return <JumpingNavSample />;
+    }
+  },
+
+  render: function() {
+    return (
+      <JSNavigationStack
+        style={styles.container}
+        initialRoute={{ id: 'menu', }}
+        renderScene={this.renderScene}
+        animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+      />
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+  },
+  buttonText: {
+  },
+  scene: {
+    flex: 1,
+    paddingTop: 64,
+  }
+});
+
+module.exports = TabBarExample;

Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js

@@ -0,0 +1,192 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule JumpingNavSample
+ */
+'use strict';
+
+var JSNavigationStack = require('JSNavigationStack');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var ScrollView = require('ScrollView');
+var Text = require('Text');
+var TouchableBounce = require('TouchableBounce');
+var View = require('View');
+
+var _getRandomRoute = function() {
+  return {
+    randNumber: Math.random(),
+  };
+};
+
+var INIT_ROUTE = _getRandomRoute();
+var ROUTE_STACK = [
+  _getRandomRoute(),
+  _getRandomRoute(),
+  INIT_ROUTE,
+  _getRandomRoute(),
+  _getRandomRoute(),
+];
+var renderScene = function(route, navigator) {
+  return (
+    <ScrollView style={styles.scene}>
+      <View style={styles.scroll}>
+      <Text>{route.randNumber}</Text>
+      <TouchableBounce
+        onPress={() => {
+          navigator.jumpBack();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpBack</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.jumpForward();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpForward</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.jumpTo(INIT_ROUTE);
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpTo initial route</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.push(_getRandomRoute());
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: push</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.replace(_getRandomRoute());
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: replace</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.pop();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: pop</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() =>  {
+          navigator.immediatelyResetRouteStack([
+            _getRandomRoute(),
+            _getRandomRoute(),
+          ]);
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigator.popToTop();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: pop to top</Text>
+        </View>
+      </TouchableBounce>
+    </View>
+    </ScrollView>
+  );
+};
+
+class JumpingNavBar extends React.Component {
+  render() {
+    return (
+      <View style={styles.navBar}>
+        {this.props.routeStack.map((route, index) => (
+          <TouchableBounce onPress={() => {
+            this.props.navigator.jumpTo(route);
+          }}>
+            <View style={styles.navButton}>
+              <Text
+                style={[
+                  styles.navButtonText,
+                  this.props.navState.toIndex === index && styles.navButtonActive
+                ]}>
+                  {index}
+                </Text>
+            </View>
+          </TouchableBounce>
+        ))}
+      </View>
+    );
+  }
+}
+
+var JumpingNavSample = React.createClass({
+
+  render: function() {
+    return (
+      <JSNavigationStack
+        debugOverlay={false}
+        style={[styles.appContainer]}
+        initialRoute={INIT_ROUTE}
+        initialRouteStack={ROUTE_STACK}
+        renderScene={renderScene}
+        navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
+        shouldJumpOnBackstackPop={true}
+      />
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  scene: {
+    backgroundColor: '#eeeeee',
+  },
+  scroll: {
+    flex: 1,
+  },
+  button: {
+    backgroundColor: '#cccccc',
+    margin: 50,
+    marginTop: 26,
+    padding: 10,
+  },
+  buttonText: {
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  appContainer: {
+    overflow: 'hidden',
+    backgroundColor: '#dddddd',
+    flex: 1,
+  },
+  navBar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 90,
+    flexDirection: 'row',
+  },
+  navButton: {
+    flex: 1,
+  },
+  navButtonText: {
+    textAlign: 'center',
+    fontSize: 32,
+    marginTop: 25,
+  },
+  navButtonActive: {
+    color: 'green',
+  },
+});
+
+module.exports = JumpingNavSample;

Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js

@@ -0,0 +1,118 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NavigationBarSample
+ */
+'use strict';
+
+var JSNavigationStack = require('JSNavigationStack');
+var NavigationBar = require('NavigationBar');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var TouchableOpacity = require('TouchableOpacity');
+var View = require('View');
+
+var cssVar = require('cssVar');
+
+
+var NavigationBarRouteMapper = {
+
+  LeftButton: function(route, navigator, index, navState) {
+    if (index === 0) {
+      return null;
+    }
+
+    var previousRoute = navState.routeStack[index - 1];
+    return (
+      <TouchableOpacity onPress={() => navigator.pop()}>
+        <View>
+          <Text style={[styles.navBarText, styles.navBarButtonText]}>
+            {previousRoute.title}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+
+  RightButton: function(route, navigator, index, navState) {
+    return (
+      <TouchableOpacity
+        onPress={() => navigator.push(newRandomRoute())}>
+        <View>
+          <Text style={[styles.navBarText, styles.navBarButtonText]}>
+            Next
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+
+  Title: function(route, navigator, index, navState) {
+    return (
+      <Text style={[styles.navBarText, styles.navBarTitleText]}>
+        {route.title} [{index}]
+      </Text>
+    );
+  },
+
+};
+
+function newRandomRoute() {
+  return {
+    content: 'Hello World!',
+    title: 'Random ' + Math.round(Math.random() * 100),
+  };
+}
+
+var NavigationBarSample = React.createClass({
+
+  render: function() {
+    return (
+      <View style={styles.appContainer}>
+        <JSNavigationStack
+          debugOverlay={false}
+          style={styles.appContainer}
+          initialRoute={newRandomRoute()}
+          renderScene={(route, navigator) => (
+            <View style={styles.scene}>
+              <Text>{route.content}</Text>
+            </View>
+          )}
+          navigationBar={
+            <NavigationBar
+              navigationBarRouteMapper={NavigationBarRouteMapper}
+            />
+          }
+        />
+      </View>
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  appContainer: {
+    overflow: 'hidden',
+    backgroundColor: '#ffffff',
+    flex: 1,
+  },
+  scene: {
+    paddingTop: 50,
+    flex: 1,
+  },
+  navBarText: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+  navBarTitleText: {
+    color: cssVar('fbui-bluegray-60'),
+    fontWeight: 'bold',
+    marginVertical: 9,
+  },
+  navBarButtonText: {
+    color: cssVar('fbui-accent-blue'),
+  },
+});
+
+module.exports = NavigationBarSample;

Examples/UIExplorer/JSNavigationStack/NestedBreadcrumbNavSample.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NestedBreadcrumbNavSample
+ */
+'use strict';
+
+var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
+var JSNavigationStack = require('JSNavigationStack');
+var React = require('React');
+var ScrollView = require('ScrollView');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var TouchableBounce = require('TouchableBounce');
+var View = require('View');
+
+var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
+
+var _getRandomRoute = function() {
+  return {
+    backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
+    content:
+      SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
+    title: 'Pushed!',
+    rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
+  };
+};
+
+
+var HorizontalNavigationBarRouteMapper = {
+  rightContentForRoute: function(route, navigator) {
+    if (route.rightButtonTitle) {
+      return (
+        <Text style={[styles.titleText, styles.filterText]}>
+          {route.rightButtonTitle}
+        </Text>
+      );
+    } else {
+      return null;
+    }
+  },
+  titleContentForRoute: function(route, navigator) {
+    return (
+      <TouchableBounce
+        onPress={() => () => { navigator.push(_getRandomRoute()); }}>
+        <View>
+          <Text style={styles.titleText}>{route.title}</Text>
+        </View>
+      </TouchableBounce>
+    );
+  },
+  iconForRoute: function(route, navigator) {
+    var onPress =
+      navigator.popToRoute.bind(navigator, route);
+    return (
+      <TouchableBounce onPress={onPress}>
+        <View style={styles.crumbIconPlaceholder} />
+      </TouchableBounce>
+    );
+  },
+  separatorForRoute: function(route, navigator) {
+    return (
+      <TouchableBounce onPress={navigator.pop}>
+        <View style={styles.crumbSeparatorPlaceholder} />
+      </TouchableBounce>
+    );
+  }
+};
+
+var ThirdDeepRouteMapper = (route, navigator) => (
+  <View style={styles.navigationItem}>
+    <ScrollView>
+      <View style={styles.thirdDeepScrollContent}>
+        <TouchableBounce
+          onPress={() => { navigator.push(_getRandomRoute()); }}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>request push soon</Text>
+          </View>
+        </TouchableBounce>
+      </View>
+    </ScrollView>
+  </View>
+);
+
+var SecondDeepRouteMapper = (route, navigator) => (
+  <View style={styles.navigationItem}>
+    <TouchableBounce
+      onPress={() => { navigator.push(_getRandomRoute()); }}>
+      <View style={styles.button}>
+        <Text style={styles.buttonText}>Push Horizontal</Text>
+      </View>
+    </TouchableBounce>
+    <JSNavigationStack
+      style={styles.thirdDeepNavigator}
+      initialRoute={{title: '3x Nested Horizontal'}}
+      renderScene={ThirdDeepRouteMapper}
+      navigationBar={
+        <BreadcrumbNavigationBar
+          navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
+        />
+      }
+    />
+  </View>
+);
+
+var FirstDeepRouteMapper = (route, navigator) => (
+  <View style={styles.navigationItem}>
+    <TouchableBounce
+      onPress={() => { navigator.push(_getRandomRoute()); }}>
+      <View style={styles.button}>
+        <Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
+      </View>
+    </TouchableBounce>
+    <JSNavigationStack
+      style={styles.secondDeepNavigator}
+      initialRoute={{title: '2x Nested Horizontal Nav'}}
+      renderScene={SecondDeepRouteMapper}
+      navigationBar={
+        <BreadcrumbNavigationBar
+          navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
+        />
+      }
+    />
+  </View>
+);
+
+/**
+ * The outer component.
+ */
+var NestedBreadcrumbNavSample = React.createClass({
+  render: function() {
+    var initialRoute = {title: 'Vertical'};
+    // No navigation bar.
+    return (
+      <JSNavigationStack
+        style={[styles.appContainer]}
+        animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+        initialRoute={initialRoute}
+        renderScene={FirstDeepRouteMapper}
+      />
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  navigationItem: {
+    backgroundColor: '#eeeeee',
+    shadowColor: 'black',
+    shadowRadius: 20,
+    shadowOffset: {w: 0, h: -10},
+  },
+  paddingForNavBar: {
+    paddingTop: 60,
+  },
+  paddingForMenuBar: {
+    paddingTop: 10,
+  },
+  button: {
+    backgroundColor: '#888888',
+    margin: 10,
+    marginTop: 10,
+    padding: 10,
+    marginRight: 20,
+  },
+  buttonText: {
+    fontSize: 12,
+    textAlign: 'center',
+    color: 'white',
+  },
+  appContainer: {
+    overflow: 'hidden',
+    backgroundColor: '#dddddd',
+    flex: 1,
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#666666',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  filterText: {
+    color: '#5577ff',
+  },
+  // TODO: Accept icons from route.
+  crumbIconPlaceholder: {
+    flex: 1,
+    backgroundColor: '#666666',
+  },
+  crumbSeparatorPlaceholder: {
+    flex: 1,
+    backgroundColor: '#aaaaaa',
+  },
+  secondDeepNavigator: {
+    margin: 0,
+    borderColor: '#666666',
+    borderWidth: 0.5,
+    height: 400,
+  },
+  thirdDeepNavigator: {
+    margin: 0,
+    borderColor: '#aaaaaa',
+    borderWidth: 0.5,
+    height: 400,
+  },
+  thirdDeepScrollContent: {
+    height: 1000,
+  }
+});
+
+module.exports = NestedBreadcrumbNavSample;

Examples/UIExplorer/MapViewExample.js

@@ -5,6 +5,8 @@
  * 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.
+ *
+ * @flow
  */
 'use strict';
 
@@ -188,7 +190,7 @@ exports.description = 'Base component to display maps';
 exports.examples = [
   {
     title: 'Map',
-    render() { return <MapViewExample />; }
+    render(): ReactElement { return <MapViewExample />; }
   },
   {
     title: 'Map shows user location',

Examples/UIExplorer/ResponderExample.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  PanResponder,
+  View,
+} = React;
+
+var CIRCLE_SIZE = 80;
+var CIRCLE_COLOR = 'blue';
+var CIRCLE_HIGHLIGHT_COLOR = 'green';
+
+
+var NavigatorIOSExample = React.createClass({
+
+  statics: {
+    title: 'PanResponder Sample',
+    description: 'Basic gesture handling example',
+  },
+
+  _panResponder: {},
+  _previousLeft: 0,
+  _previousTop: 0,
+  _circleStyles: {},
+  circle: (null : ?React.Element),
+
+  componentWillMount: function() {
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
+      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this._handlePanResponderGrant,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderRelease: this._handlePanResponderEnd,
+      onPanResponderTerminate: this._handlePanResponderEnd,
+    });
+    this._previousLeft = 20;
+    this._previousTop = 84;
+    this._circleStyles = {
+      left: this._previousLeft,
+      top: this._previousTop,
+    };
+  },
+
+  componentDidMount: function() {
+    this._updatePosition();
+  },
+
+  render: function() {
+    return (
+      <View
+        style={styles.container}>
+        <View
+          ref={(circle) => {
+            this.circle = circle;
+          }}
+          style={styles.circle}
+          {...this._panResponder.panHandlers}
+        />
+      </View>
+    );
+  },
+
+  _highlight: function() {
+    this.circle && this.circle.setNativeProps({
+      backgroundColor: CIRCLE_HIGHLIGHT_COLOR
+    });
+  },
+
+  _unHighlight: function() {
+    this.circle && this.circle.setNativeProps({
+      backgroundColor: CIRCLE_COLOR
+    });
+  },
+
+  _updatePosition: function() {
+    this.circle && this.circle.setNativeProps(this._circleStyles);
+  },
+
+  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
+    // Should we become active when the user presses down on the circle?
+    return true;
+  },
+
+  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
+    // Should we become active when the user moves a touch over the circle?
+    return true;
+  },
+
+  _handlePanResponderGrant: function(e: Object, gestureState: Object) {
+    this._highlight();
+  },
+  _handlePanResponderMove: function(e: Object, gestureState: Object) {
+    this._circleStyles.left = this._previousLeft + gestureState.dx;
+    this._circleStyles.top = this._previousTop + gestureState.dy;
+    this._updatePosition();
+  },
+  _handlePanResponderEnd: function(e: Object, gestureState: Object) {
+    this._unHighlight();
+    this._previousLeft += gestureState.dx;
+    this._previousTop += gestureState.dy;
+  },
+});
+
+var styles = StyleSheet.create({
+  circle: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_SIZE / 2,
+    backgroundColor: CIRCLE_COLOR,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  container: {
+    flex: 1,
+    paddingTop: 64,
+  },
+});
+
+module.exports = NavigatorIOSExample;

Examples/UIExplorer/TabBarExample.js

@@ -5,6 +5,8 @@
  * 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.
+ *
+ * @flow
  */
 'use strict';
 
@@ -31,7 +33,7 @@ var TabBarExample = React.createClass({
     };
   },
 
-  _renderContent: function(color, pageText) {
+  _renderContent: function(color: string, pageText: string) {
     return (
       <View style={[styles.tabContent, {backgroundColor: color}]}>
         <Text style={styles.tabText}>{pageText}</Text>

Examples/UIExplorer/TimerExample.js

@@ -15,10 +15,10 @@ var {
   AlertIOS,
   StyleSheet,
   Text,
-  TimerMixin,
   TouchableHighlight,
   View,
 } = React;
+var TimerMixin = require('react-timer-mixin');
 
 var Button = React.createClass({
   render: function() {

Examples/UIExplorer/UIExplorerApp.js

@@ -13,23 +13,42 @@
 
 var React = require('react-native');
 var UIExplorerList = require('./UIExplorerList');
-
 var {
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
 } = React;
 
-
 var UIExplorerApp = React.createClass({
 
+  getInitialState: function() {
+    return {
+      openExternalExample: (null: ?React.Component),
+    };
+  },
+
   render: function() {
+    if (this.state.openExternalExample) {
+      var Example = this.state.openExternalExample;
+      return (
+        <Example
+          onExampleExit={() => {
+            this.setState({ openExternalExample: null, });
+          }}
+        />
+      );
+    }
     return (
       <NavigatorIOS
         style={styles.container}
         initialRoute={{
           title: 'UIExplorer',
           component: UIExplorerList,
+          passProps: {
+            onExternalExampleRequested: (example) => {
+              this.setState({ openExternalExample: example, });
+            },
+          }
         }}
         itemWrapperStyle={styles.itemWrapper}
         tintColor='#008888'

Examples/UIExplorer/UIExplorerList.js

@@ -21,6 +21,7 @@ var {
   TouchableHighlight,
   View,
 } = React;
+var JSNavigationStackExample = require('./JSNavigationStack/JSNavigationStackExample');
 
 var createExamplePage = require('./createExamplePage');
 
@@ -32,6 +33,7 @@ var COMPONENTS = [
   require('./ListViewSimpleExample'),
   require('./MapViewExample'),
   require('./NavigatorIOSExample'),
+  JSNavigationStackExample,
   require('./PickerExample'),
   require('./ScrollViewExample'),
   require('./SliderIOSExample'),
@@ -57,6 +59,7 @@ var APIS = [
   require('./PointerEventsExample'),
   require('./PushNotificationIOSExample'),
   require('./StatusBarIOSExample'),
+  require('./ResponderExample'),
   require('./TimerExample'),
   require('./VibrationIOSExample'),
 ];
@@ -143,6 +146,12 @@ class UIExplorerList extends React.Component {
   }
 
   _onPressRow(example) {
+    if (example === JSNavigationStackExample) {
+      this.props.onExternalExampleRequested(
+        JSNavigationStackExample
+      );
+      return;
+    }
     var Component = example.examples ?
       createExamplePage(null, example) :
       example;

Examples/UIExplorer/createExamplePage.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule createExamplePage
+ * @flow
  */
 'use strict';
 
@@ -16,7 +17,19 @@ var UIExplorerPage = require('./UIExplorerPage');
 
 var invariant = require('invariant');
 
-var createExamplePage = function(title, exampleModule) {
+class Example extends React.Component {
+  title: string;
+  description: string;
+}
+
+type ExampleModule = {
+  title: string;
+  description: string;
+  examples: Array<Example>;
+};
+
+var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
+  : ReactClass<any, any, any> {
   invariant(!!exampleModule.examples, 'The module must have examples');
 
   var ExamplePage = React.createClass({
@@ -31,15 +44,17 @@ var createExamplePage = function(title, exampleModule) {
       var originalRenderComponent = React.renderComponent;
       var originalRender = React.render;
       var renderedComponent;
-      React.render = React.renderComponent = function(element, container) {
+      // TODO remove typecasts when Flow bug #6560135 is fixed
+      // and workaround is removed from react-native.js
+      (React: Object).render = (React: Object).renderComponent = function(element, container) {
         renderedComponent = element;
       };
       var result = example.render(null);
       if (result) {
         renderedComponent = result;
       }
-      React.renderComponent = originalRenderComponent;
-      React.render = originalRender;
+      (React: Object).renderComponent = originalRenderComponent;
+      (React: Object).render = originalRender;
       return (
         <UIExplorerBlock
           key={i}