Update from Friday March 27

- [React Native] Sync from github | Amjad Masad
- [react-packager] Watch asset roots for changes to update dependency graph | Amjad Masad
- Fix sourceTree of RCTActionSheet.xcodeproj | Alex Kotliarskyi
- Cancel contents animation before setting new contents in RCTNetworkImageView | Alex Akers
- [react-packager] move dependencies to root package.json | Amjad Masad
- Fix font crash on iOS < 8.2 | Nick Lockwood
- [react-packager] Fix node v0.11.14 query parse bug | Amjad Masad
- [ReactNative][Docs] Remove references to ReactNavigator from docs | Tadeu Zagallo
- [CLI] react-native start won't run from dir with spaces | Amjad Masad
- Revert .buckversion bumps. | Jakub Zika
- [react_native] Update default bundle name to org.reactjs.native.* | Krzysztof Magiera
- [react-packager] better error when main file not found | Amjad Masad
- [React Kit] Remove embarrassing TODOs | Alex Akers
- [ReactNative][MAdMan] Clean up after D1942269 | Philipp von Weitershausen
- flowify a few more Libraries | Basil Hosmer
- [ReactNative] PushNotificationIOS documentation | Eric Vicenti
- [ReactNative][CustomComponents] Update old headers | Tadeu Zagallo
- [ReactNative] UIViewControllerBasedStatusBarAppearance = NO in SampleApp | Alex Kotliarskyi
- [React Native] Fix CocoaPods spec | Alex Akers
- [ReactNative] Navigator Example Overhaul | Eric Vicenti
- [React Native] Fix incorrect if-statement in RCTGeolocation | Alex Akers
- [ReactNative] s/ReactKit/React/g | Tadeu Zagallo
- [React Native] [FRC - Don't accept] View border support | Nick Lockwood
- [Assets] Allow scripts to override assetRoots | Amjad Masad
- [ReactNative] Navigator docs | Eric Vicenti
- [ReactNative] License headers and renaming | Eric Vicenti
- [React Native] Add CocoaPods spec | Tadeu Zagallo
- Added explicit types for all view properties | Nick Lockwood
- [ReactNative] s/ReactNavigator/Navigator/ | Tadeu Zagallo
- [ReactNative] Add copyright header for code copied from the jQuery UI project | Martin Konicek
- [ReactNative] PanResponder documentation | Eric Vicenti
- [ReactNative] Add deep linking api | Tadeu Zagallo
- [ReactNative] Add gitignore example for SampleApp | Alex Kotliarskyi
- [ReactNative] Add react-native-start bin to react-native packge | Alex Kotliarskyi
- [ReactNative] Update package.json to be npm-ready | Christopher Chedeau
- [RFC][ReactNative] Integrate dev menu directly into RootView | Alex Kotliarskyi
- flowify Libraries/ReactIOS | Marshall Roch
- [WIP] Added support for italics and additional font weights | Nick Lockwood
- [ReactNative] Improve View documentation | Christopher Chedeau
- [react-packager] Readme | Amjad Masad
- Fix for incorrect contentSize reported by RCTScrollView | Nick Lockwood
- [ReactNative] Flow and doc formatting for NetInfo | Eric Vicenti
- [ReactNative] Document AppStateIOS | Eric Vicenti
- [MAdMan][Android] Make things look more Androidy | Philipp von Weitershausen
- flowified Libraries from Avik | Basil Hosmer
- flowify some Libraries | Basil Hosmer
- [ReactKit] Add shake development menu | Alex Kotliarskyi
- [ReactNative] Add debugger and change SampleApp files structure | Alex Kotliarskyi
- Flowify ReactIOSEventEmitter | Marshall Roch
- [react_native] JS files from D1941151: Allow fontWeight to be 100,200,...,900 | Krzysztof Magiera
- [ReactNative] Add snapshot tests for examples | Spencer Ahrens
- [ReactNative] bring back some native modules | Spencer Ahrens
- [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti
- [ReactNative] cleanup view example | Spencer Ahrens
- Flowify a bunch of Libraries | Marshall Roch
- [ReactNative] JSNavigationStack - Use key to blow away old scenes | Eric Vicenti
- [ReactNative] Add more logging to RCTJSONParse | Sumeet Vaidya
- Unfork UIManager | Nick Lockwood
- [react-packager] kill non-standard RAW_SOURCE_MAP | Amjad Masad
- Flowify Libraries/StyleSheet and Libraries/Text | Marshall Roch
- [ReactNative] Fix OSS Dependency Issues | Eric Vicenti
- [react-packager] Fix more issues with node modules | Amjad Masad
- [ReactNative] rename navigationOperations to navigator | Eric Vicenti
- JS files from D1936817: Add to XMLHttpRequest android and share code with ios | Olivia Bishop
- flowify some Libraries | Basil Hosmer
- last batch of UIExplorer flowification | Basil Hosmer
- [ReactNative] JSNavigationStack rename routeMapper to renderSceneForRoute | Eric Vicenti
- Flowify renderApplication | Marshall Roch
- [ReactNative] OSS Responder example | Eric Vicenti
- [ReactNative] Use oss TimerMixin | Tadeu Zagallo
- [ReactNative] Remove auto permission request from setAppIconBadgeNumber | Tadeu Zagallo
- [ReactNative] OSS snapshot tests | Spencer Ahrens
- [ReactNative] OSS JSNavigationStack w/ Examples | Eric Vicenti
- Fix build - remove relative import path | Jakub Zika
- Bump .buckversion to a5b8b8ef45d714018ba3542cf98d48ef6aab7088. | Jakub Zika
- [ReactNative] Open Source PushNotifications and move Badge Number methods and permission into it | Tadeu Zagallo
- [react-packager] Fix regression with transform errors | Amjad Masad
- Flowify TextStylePropTypes and fix a bug with unsupported props | Marshall Roch
- [ReactNative] Remove `arc build` instructions from require | Alex Kotliarskyi
- Flowify Library/Utilities/ | Marshall Roch
- [react-packager] Default to index.js from main if it's a dir | Amjad Masad
- [ReactNative] Use deprecated ix in TabBarExample | Amjad Masad
- [ReactNative] Expanded license on obj-c files | Christopher Chedeau
- [ReactNative] Expanded license on js files | Christopher Chedeau
- [ReactNative] Fix React Devtools integration | Alex Kotliarskyi
- [Text] Account for font leading so descenders are not clipped | Alex Kotliarskyi
- [ReactNative] Expanded license on js packager files | Christopher Chedeau
- more UIExplorer flow | Basil Hosmer
- [react-packager] Pick up package changes while running | Amjad Masad
- Added a graph view and a ReactNative metric that displays current queue and execution time for the JS thread. | Bryce Redd
- [ReactNative] Add NativeModules and DeviceEventEmitter to react-native exports | Alex Kotliarskyi
- [React Native] Fix iOS 7 crashes b/c missing Photos.fmwk | Alex Akers
- UIExplorer flowification | Basil Hosmer
- Add clearImmediate module | Marshall Roch
- [ReactNative] Print directories packager is serving files from | Alex Kotliarskyi
- Work around flow bug with exports | Marshall Roch
- [ReactNative] Move packager/init.sh to GitHub | Alex Kotliarskyi
- [ReactNative] Remove react-native/package.json | Christopher Chedeau
- [ReactNative] Returning actual contentSize for RCTScrollViewManager | Henry Lung
- declare timeoutID | Basil Hosmer
- [ReactNative] Add root package.json name back | Tadeu Zagallo
- [react-packager] Allow entry point extensions like .ios.js | Amjad Masad
- [react-native] Use SpreadProperty to make react-docgen happy | Felix Kling
- clean Examples/2048 | Basil Hosmer
- [ReactNative] Adjust packager default root when running from within node_modules | Alex Kotliarskyi
- [ReactNative] Add missing websocket dependency | Alex Kotliarskyi
- [react-packager] change all but one `ix` to `require` | Amjad Masad
- [react-packager] Make sure projectRoots is converted to an array | Amjad Masad
- [ReactNative] Init script that bootstraps new Xcode project | Alex Kotliarskyi
- [ReactNative] New SampleApp | Alex Kotliarskyi
- [ReactNative] Touchable invoke press on longPress when longPress handler missing | Eric Vicenti
- [ReactNative] Commit missing RCTWebSocketDebugger.xcodeproj | Alex Kotliarskyi

Examples/UIExplorer/Navigator/JumpingNavSample.js

@@ -16,8 +16,10 @@
 var React = require('react-native');
 var {
   Navigator,
+  PixelRatio,
   StyleSheet,
   ScrollView,
+  TabBarIOS,
   Text,
   TouchableHighlight,
   View,
@@ -25,178 +27,186 @@ var {
 
 var _getRandomRoute = function() {
   return {
-    randNumber: Math.random(),
+    randNumber: Math.ceil(Math.random() * 1000),
   };
 };
 
-var INIT_ROUTE = _getRandomRoute();
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
 var ROUTE_STACK = [
   _getRandomRoute(),
   _getRandomRoute(),
-  INIT_ROUTE,
-  _getRandomRoute(),
   _getRandomRoute(),
 ];
-var renderScene = function(route, navigator) {
-  return (
-    <ScrollView style={styles.scene}>
-      <View style={styles.scroll}>
-      <Text>{route.randNumber}</Text>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpBack();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpBack</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpForward();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpForward</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpTo(INIT_ROUTE);
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpTo initial route</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.push(_getRandomRoute());
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: push</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.replace(_getRandomRoute());
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: replace</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.pop();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: pop</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() =>  {
-          navigator.immediatelyResetRouteStack([
-            _getRandomRoute(),
-            _getRandomRoute(),
-          ]);
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.popToTop();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: pop to top</Text>
-        </View>
-      </TouchableHighlight>
-    </View>
-    </ScrollView>
-  );
-};
+var INIT_ROUTE_INDEX = 1;
 
 class JumpingNavBar extends React.Component {
   render() {
     return (
-      <View style={styles.navBar}>
-        {this.props.routeStack.map((route, index) => (
-          <TouchableHighlight onPress={() => {
-            this.props.navigator.jumpTo(route);
-          }}>
-            <View style={styles.navButton}>
-              <Text
-                style={[
-                  styles.navButtonText,
-                  this.props.navState.toIndex === index && styles.navButtonActive
-                ]}>
-                  {index}
-                </Text>
-            </View>
-          </TouchableHighlight>
-        ))}
+      <View style={styles.tabs}>
+        <TabBarIOS
+          selectedTab={'tab_' + this.props.tabIndex}>
+          <TabBarIOS.Item
+            name="tab_0"
+            icon={require('image!tabnav_notification')}
+            selected={this.props.tabIndex === 0}
+            onPress={() => { this.props.onTabIndex(0); }}
+            children={<View />}
+          />
+          <TabBarIOS.Item
+            name="tab_1"
+            icon={require('image!tabnav_list')}
+            selected={this.props.tabIndex === 1}
+            onPress={() => { this.props.onTabIndex(1); }}
+            children={<View />}
+          />
+          <TabBarIOS.Item
+            name="tab_2"
+            icon={require('image!tabnav_settings')}
+            selected={this.props.tabIndex === 2}
+            onPress={() => { this.props.onTabIndex(2); }}
+            children={<View />}
+          />
+        </TabBarIOS>
       </View>
     );
   }
 }
 
 var JumpingNavSample = React.createClass({
+  getInitialState: function() {
+    return {
+      tabIndex: INIT_ROUTE_INDEX,
+    };
+  },
 
   render: function() {
     return (
       <Navigator
         debugOverlay={false}
-        style={[styles.appContainer]}
-        initialRoute={INIT_ROUTE}
+        style={styles.appContainer}
+        ref={(navigator) => {
+          this._navigator = navigator;
+        }}
+        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
         initialRouteStack={ROUTE_STACK}
-        renderScene={renderScene}
-        navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
+        renderScene={this.renderScene}
+        navigationBar={
+          <JumpingNavBar
+            routeStack={ROUTE_STACK}
+            tabIndex={this.state.tabIndex}
+            onTabIndex={(index) => {
+              this.setState({ tabIndex: index }, () => {
+                this._navigator.jumpTo(ROUTE_STACK[index]);
+              });
+            }}
+          />
+        }
+        onWillFocus={(route) => {
+          this.setState({
+            tabIndex: ROUTE_STACK.indexOf(route),
+          });
+        }}
         shouldJumpOnBackstackPop={true}
       />
     );
   },
 
+  renderScene: function(route, navigator) {
+    var backBtn;
+    var forwardBtn;
+    if (ROUTE_STACK.indexOf(route) !== 0) {
+      backBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpBack();
+          }}
+          text="jumpBack"
+        />
+      );
+    }
+    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
+      forwardBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpForward();
+          }}
+          text="jumpForward"
+        />
+      );
+    }
+    return (
+      <ScrollView style={styles.scene}>
+        <Text style={styles.messageText}>#{route.randNumber}</Text>
+        {backBtn}
+        {forwardBtn}
+        <NavButton
+          onPress={() => {
+            navigator.jumpTo(ROUTE_STACK[1]);
+          }}
+          text="jumpTo middle route"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.pop();
+          }}
+          text="Exit Navigation Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Came from jumping example',
+            });
+          }}
+          text="Nav Menu"
+        />
+      </ScrollView>
+    );
+  },
 });
 
 var styles = StyleSheet.create({
-  scene: {
-    backgroundColor: '#eeeeee',
-  },
-  scroll: {
-    flex: 1,
-  },
   button: {
-    backgroundColor: '#cccccc',
-    margin: 50,
-    marginTop: 26,
-    padding: 10,
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
   },
   buttonText: {
-    fontSize: 12,
-    textAlign: 'center',
+    fontSize: 17,
+    fontWeight: '500',
   },
   appContainer: {
     overflow: 'hidden',
     backgroundColor: '#dddddd',
     flex: 1,
   },
-  navBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 90,
-    flexDirection: 'row',
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
   },
-  navButton: {
+  scene: {
     flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
   },
-  navButtonText: {
-    textAlign: 'center',
-    fontSize: 32,
-    marginTop: 25,
-  },
-  navButtonActive: {
-    color: 'green',
-  },
+  tabs: {
+    height: 50,
+  }
 });
 
 module.exports = JumpingNavSample;