facebook · vjeux · Apr 3, 2015 · Apr 3, 2015 · vjeux · Apr 3, 2015
diff --git a/Examples/UIExplorer/Navigator/JumpingNavSample.js b/Examples/UIExplorer/Navigator/JumpingNavSample.js
@@ -55,29 +55,25 @@ class JumpingNavBar extends React.Component {
   render() {
     return (
       <View style={styles.tabs}>
-        <TabBarIOS
-          selectedTab={'tab_' + this.props.tabIndex}>
+        <TabBarIOS>
           <TabBarIOS.Item
-            name="tab_0"
             icon={require('image!tabnav_notification')}
             selected={this.props.tabIndex === 0}
-            onPress={() => { this.props.onTabIndex(0); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(0); }}>
+            <View />
+          </TabBarIOS.Item>
           <TabBarIOS.Item
-            name="tab_1"
             icon={require('image!tabnav_list')}
             selected={this.props.tabIndex === 1}
-            onPress={() => { this.props.onTabIndex(1); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(1); }}>
+            <View />
+          </TabBarIOS.Item>
           <TabBarIOS.Item
-            name="tab_2"
             icon={require('image!tabnav_settings')}
             selected={this.props.tabIndex === 2}
-            onPress={() => { this.props.onTabIndex(2); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(2); }}>
+            <View />
+          </TabBarIOS.Item>
         </TabBarIOS>
       </View>
     );

diff --git a/Examples/UIExplorer/TabBarIOSExample.js b/Examples/UIExplorer/TabBarIOSExample.js
@@ -22,9 +22,8 @@ var {
   Text,
   View,
 } = React;
-var TabBarItemIOS = TabBarIOS.Item;
-var TabBarExample = React.createClass({
 
+var TabBarExample = React.createClass({
   statics: {
     title: '<TabBarIOS>',
     description: 'Tab-based navigation.'
@@ -42,32 +41,27 @@ var TabBarExample = React.createClass({
     return (
       <View style={[styles.tabContent, {backgroundColor: color}]}>
         <Text style={styles.tabText}>{pageText}</Text>
-        <Text style={styles.tabText}>{this.state.presses} re-renders of this tab</Text>
+        <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
       </View>
     );
   },
 
   render: function() {
     return (
-      <TabBarIOS
-        selectedTab={this.state.selectedTab}>
-        <TabBarItemIOS
-          name="blueTab"
-          icon={_ix_DEPRECATED('favorites')}
-          accessibilityLabel="Blue Tab"
+      <TabBarIOS>
+        <TabBarIOS.Item
+          title="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}
           onPress={() => {
             this.setState({
               selectedTab: 'blueTab',
             });
           }}>
           {this._renderContent('#414A8C', 'Blue Tab')}
-        </TabBarItemIOS>
-        <TabBarItemIOS
-          accessibilityLabel="Red Tab"
-          name="redTab"
-          icon={_ix_DEPRECATED('history')}
-          badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
+        </TabBarIOS.Item>
+        <TabBarIOS.Item
+          systemIcon="history"
+          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
           selected={this.state.selectedTab === 'redTab'}
           onPress={() => {
             this.setState({
@@ -76,11 +70,9 @@ var TabBarExample = React.createClass({
             });
           }}>
           {this._renderContent('#783E33', 'Red Tab')}
-        </TabBarItemIOS>
-        <TabBarItemIOS
-          name="greenTab"
-          icon={_ix_DEPRECATED('more')}
-          accessibilityLabel="Green Tab"
+        </TabBarIOS.Item>
+        <TabBarIOS.Item
+          systemIcon="more"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {
             this.setState({
@@ -89,7 +81,7 @@ var TabBarExample = React.createClass({
             });
           }}>
           {this._renderContent('#21551C', 'Green Tab')}
-        </TabBarItemIOS>
+        </TabBarIOS.Item>
       </TabBarIOS>
     );
   },
@@ -107,14 +99,4 @@ var styles = StyleSheet.create({
   },
 });
 
-// This is needed because the actual image may not exist as a file and
-// is used by the native code to load a system image.
-// TODO(nicklockwood): How can this fit our require system?
-function _ix_DEPRECATED(imageUri) {
-  return {
-    uri: imageUri,
-    isStatic: true,
-  };
-}
-
 module.exports = TabBarExample;
diff --git a/Libraries/Components/ScrollResponder.js b/Libraries/Components/ScrollResponder.js
@@ -357,7 +357,7 @@ var ScrollResponderMixin = {
    * A helper function to zoom to a specific rect in the scrollview.
    * @param {object} rect Should have shape {x, y, w, h}
    */
-  scrollResponderZoomTo: function(rect: { x: number; y: number; w: number; h: number; }) {
+  scrollResponderZoomTo: function(rect: { x: number; y: number; width: number; height: number; }) {
     RCTUIManagerDeprecated.zoomToRect(this.getNodeHandle(), rect);
   },
 

diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js
@@ -13,15 +13,21 @@
 
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
-var TabBarItemIOS = require('TabBarItemIOS');
 var StyleSheet = require('StyleSheet');
+var TabBarItemIOS = require('TabBarItemIOS');
+var View = require('View');
 
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
 
 var TabBarIOS = React.createClass({
   statics: {
     Item: TabBarItemIOS,
   },
+
+  propTypes: {
+    style: View.propTypes.style,
+  },
+
   render: function() {
     return (
       <RCTTabBar style={[styles.tabGroup, this.props.style]}>

diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js
@@ -24,12 +24,57 @@ var merge = require('merge');
 
 var TabBarItemIOS = React.createClass({
   propTypes: {
-    icon: Image.propTypes.source.isRequired,
-    onPress: React.PropTypes.func.isRequired,
-    selected: React.PropTypes.bool.isRequired,
-    badgeValue: React.PropTypes.string,
-    title: React.PropTypes.string,
+    /**
+     * Little red bubble that sits at the top right of the icon.
+     */
+    badge: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    /**
+     * Items comes with a few predefined system icons. Note that if you are
+     * using them, the title and selectedIcon will be overriden with the
+     * system ones.
+     */
+    systemIcon: React.PropTypes.oneOf([
+      'bookmarks',
+      'contacts',
+      'downloads',
+      'favorites',
+      'featured',
+      'history',
+      'more',
+      'most-recent',
+      'most-viewed',
+      'recents',
+      'search',
+      'top-rated',
+    ]),
+    /**
+     * A custom icon for the tab. It is ignored when a system icon is defined.
+     */
+    icon: Image.propTypes.source,
+    /**
+     * A custom icon when the tab is selected. It is ignored when a system
+     * icon is defined. If left empty, the icon will be tinted in blue.
+     */
+    selectedIcon: Image.propTypes.source,
+    /**
+     * Callback when this tab is being selected, you should change the state of your
+     * component to set selected={true}.
+     */
+    onPress: React.PropTypes.func,
+    /**
+     * It specifies whether the children are visible or not. If you see a
+     * blank content, you probably forgot to add a selected one.
+     */
+    selected: React.PropTypes.bool,
     style: View.propTypes.style,
+    /**
+     * Text that appears under the icon. It is ignored when a system icon
+     * is defined.
+     */
+    title: React.PropTypes.string,
   },
 
   getInitialState: function() {
@@ -63,13 +108,21 @@ var TabBarItemIOS = React.createClass({
       tabContents = <View />;
     }
 
+    var icon = this.props.systemIcon || (
+      this.props.icon && this.props.icon.uri
+    );
+
+    var badge = typeof this.props.badge === 'number' ?
+      '' + this.props.badge :
+      this.props.badge;
+
     return (
       <RCTTabBarItem
-        icon={this.props.icon.uri}
+        icon={icon}
         selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
         onPress={this.props.onPress}
         selected={this.props.selected}
-        badgeValue={this.props.badgeValue}
+        badgeValue={badge}
         title={this.props.title}
         style={[styles.tab, this.props.style]}>
         {tabContents}

diff --git a/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js b/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js
@@ -36,12 +36,12 @@ function handleException(e: Exception) {
   );
 
   if (RCTExceptionsManager) {
-    RCTExceptionsManager.reportUnhandledException(e.message, format(stack));
+    RCTExceptionsManager.reportUnhandledException(e.message, stack);
     if (__DEV__) {
       (sourceMapPromise = sourceMapPromise || loadSourceMap())
         .then(map => {
           var prettyStack = parseErrorStack(e, map);
-          RCTExceptionsManager.updateExceptionMessage(e.message, format(prettyStack));
+          RCTExceptionsManager.updateExceptionMessage(e.message, prettyStack);
         })
         .then(null, error => {
           console.error('#CLOWNTOWN (error while displaying error): ' + error.message);
@@ -71,13 +71,4 @@ function fillSpaces(n) {
   return new Array(n + 1).join(' ');
 }
 
-// HACK(frantic) Android currently expects stack trace to be a string #5920439
-function format(stack) {
-  if (Platform.OS === 'android') {
-    return stackToString(stack);
-  } else {
-    return stack;
-  }
-}
-
 module.exports = { handleException };
diff --git a/Libraries/RCTTest/RCTTestModule.h b/Libraries/RCTTest/RCTTestModule.h
@@ -21,6 +21,8 @@
 // This is used to give meaningful names to snapshot image files.
 @property (nonatomic, assign) SEL testSelector;
 
+@property (nonatomic, weak) UIView *view;
+
 - (instancetype)initWithSnapshotController:(FBSnapshotTestController *)controller view:(UIView *)view;
 
 @end
diff --git a/Libraries/RCTTest/RCTTestRunner.m b/Libraries/RCTTest/RCTTestRunner.m
@@ -17,15 +17,6 @@
 
 #define TIMEOUT_SECONDS 240
 
-@interface RCTRootView (Testing)
-
-- (instancetype)_initWithBundleURL:(NSURL *)bundleURL
-                       moduleName:(NSString *)moduleName
-                    launchOptions:(NSDictionary *)launchOptions
-                   moduleProvider:(RCTBridgeModuleProviderBlock)moduleProvider;
-
-@end
-
 @implementation RCTTestRunner
 {
   FBSnapshotTestController *_snapshotController;
@@ -75,17 +66,17 @@ - (void)runTest:(SEL)test module:(NSString *)moduleName initialProps:(NSDictiona
 
   RCTTestModule *testModule = [[RCTTestModule alloc] initWithSnapshotController:_snapshotController view:nil];
   testModule.testSelector = test;
-
-  RCTRootView *rootView = [[RCTRootView alloc] _initWithBundleURL:[NSURL URLWithString:_script]
-                                                      moduleName:moduleName
-                                                   launchOptions:nil
-                                                   moduleProvider:^{
-                                                     return @[testModule];
-                                                   }];
-  [testModule setValue:rootView forKey:@"_view"];
-  rootView.frame = CGRectMake(0, 0, 320, 2000);
+  RCTBridge *bridge = [[RCTBridge alloc] initWithBundlePath:_script
+                                                moduleProvider:^(){
+                                                  return @[testModule];
+                                                }
+                                                 launchOptions:nil];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:moduleName];
+  testModule.view = rootView;
   [vc.view addSubview:rootView]; // Add as subview so it doesn't get resized
   rootView.initialProperties = initialProps;
+  rootView.frame = CGRectMake(0, 0, 320, 2000); // Constant size for testing on multiple devices
 
   NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
   NSString *error = [[RCTRedBox sharedInstance] currentErrorMessage];
@@ -94,8 +85,9 @@ - (void)runTest:(SEL)test module:(NSString *)moduleName initialProps:(NSDictiona
     [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:date];
     error = [[RCTRedBox sharedInstance] currentErrorMessage];
   }
-  [rootView invalidate];
   [rootView removeFromSuperview];
+  [rootView.bridge invalidate];
+  [rootView invalidate];
   RCTAssert(vc.view.subviews.count == 0, @"There shouldn't be any other views: %@", vc.view);
   vc.view = nil;
   [[RCTRedBox sharedInstance] dismiss];

diff --git a/Libraries/RCTWebSocketDebugger/RCTWebSocketExecutor.m b/Libraries/RCTWebSocketDebugger/RCTWebSocketExecutor.m
@@ -168,6 +168,7 @@ - (void)injectJSONText:(NSString *)script asGlobalObjectNamed:(NSString *)object
 
 - (void)invalidate
 {
+  [_jsQueue cancelAllOperations];
   _socket.delegate = nil;
   [_socket closeWithCode:1000 reason:@"Invalidated"];
   _socket = nil;

diff --git a/Libraries/ReactIOS/ReactIOSDefaultInjection.js b/Libraries/ReactIOS/ReactIOSDefaultInjection.js
@@ -38,6 +38,7 @@ var ResponderEventPlugin = require('ResponderEventPlugin');
 var UniversalWorkerNodeHandle = require('UniversalWorkerNodeHandle');
 
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
+var invariant = require('invariant');
 
 // Just to ensure this gets packaged, since its only caller is from Native.
 require('RCTEventEmitter');
@@ -94,6 +95,14 @@ function inject() {
   ReactNativeComponent.injection.injectTextComponentClass(
     ReactIOSTextComponent
   );
+  ReactNativeComponent.injection.injectAutoWrapper(function(tag) {
+    // Show a nicer error message for non-function tags
+    var info = '';
+    if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
+      info += ' Each component name should start with an uppercase letter.';
+    }
+    invariant(false, 'Expected a component class, got %s.%s', tag, info);
+  });
 
   NodeHandle.injection.injectImplementation(UniversalWorkerNodeHandle);
 }