Updates from Thu 28 May

Author: tadeuzagallo

.eslintrc

@@ -1,8 +1,19 @@
 {
+  "parser": "babel-eslint",
+
+  "ecmaFeatures": {
+    "jsx": true
+  },
+
   "env": {
+    "es6": true,
     "jasmine": true,
   },
 
+  "plugins": [
+    "react"
+  ],
+
   // Map from global var to bool specifying if it can be redefined
   "globals": {
     "__DEV__": true,
@@ -36,10 +47,10 @@
   },
 
   "rules": {
+    "comma-dangle": 0,               // disallow trailing commas in object literals
     "no-cond-assign": 1,             // disallow assignment in conditional expressions
     "no-console": 0,                 // disallow use of console (off by default in the node environment)
     "no-constant-condition": 0,      // disallow use of constant expressions in conditions
-    "no-comma-dangle": 0,            // disallow trailing commas in object literals
     "no-control-regex": 1,           // disallow control characters in regular expressions
     "no-debugger": 1,                // disallow use of debugger
     "no-dupe-keys": 1,               // disallow duplicate keys when creating object literals
@@ -107,6 +118,7 @@
     "no-warning-comments": 0,        // disallow usage of configurable warning terms in comments": 1,                        // e.g. TODO or FIXME (off by default)
     "no-with": 1,                    // disallow use of the with statement
     "radix": 1,                      // require use of the second argument for parseInt() (off by default)
+    "semi-spacing": 1,	             // require a space after a semi-colon
     "vars-on-top": 0,                // requires to declare all vars on top of their containing scope (off by default)
     "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
     "yoda": 1,                       // require or disallow Yoda conditions
@@ -177,7 +189,7 @@
     "space-in-parens": 0,            // require or disallow spaces inside parentheses (off by default)
     "space-infix-ops": 1,            // require spaces around operators
     "space-return-throw-case": 1,    // require a space after return, throw, and case
-    "space-unary-word-ops": 1,       // require a space around word operators such as typeof (off by default)
+    "space-unary-ops": [1, { "words": true, "nonwords": false }], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
     "max-nested-callbacks": 0,       // specify the maximum depth callbacks can be nested (off by default)
     "one-var": 0,                    // allow just one var statement per function (off by default)
     "wrap-regex": 0,                 // require regex literals to be wrapped in parentheses (off by default)
@@ -190,6 +202,22 @@
     "max-params": 0,                 // limits the number of parameters that can be used in the function declaration. (off by default)
     "max-statements": 0,             // specify the maximum number of statement allowed in a function (off by default)
     "no-bitwise": 1,                 // disallow use of bitwise operators (off by default)
-    "no-plusplus": 0                 // disallow use of unary operators, ++ and -- (off by default)
+    "no-plusplus": 0,                // disallow use of unary operators, ++ and -- (off by default)
+
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-quotes": [1, "double", "avoid-escape"],
+    "react/jsx-no-undef": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 0,
+    "react/jsx-uses-vars": 1,
+    "react/no-did-mount-set-state": [1, "allow-in-func"],
+    "react/no-did-update-set-state": [1, "allow-in-func"],
+    "react/no-multi-comp": 0,
+    "react/no-unknown-property": 0,
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/self-closing-comp": 1,
+    "react/wrap-multilines": 0
   }
 }

.flowconfig

@@ -16,13 +16,13 @@
 .*/node_modules/react-tools/src/event/EventPropagators.js
 
 # Ignore commoner tests
-.*/node_modules/react-tools/node_modules/commoner/test/.*
+.*/node_modules/commoner/test/.*
 
 # See https://github.com/facebook/flow/issues/442
 .*/react-tools/node_modules/commoner/lib/reader.js
 
 # Ignore jest
-.*/react-native/node_modules/jest-cli/.*
+.*/node_modules/jest-cli/.*
 
 # Ignore Website
 .*/website/.*

Examples/Movies/MovieCell.js

@@ -34,7 +34,10 @@ var MovieCell = React.createClass({
     var criticsScore = this.props.movie.ratings.critics_score;
     return (
       <View>
-        <TouchableHighlight onPress={this.props.onSelect}>
+        <TouchableHighlight 
+          onPress={this.props.onSelect}
+          onShowUnderlay={this.props.onHighlight}
+          onHideUnderlay={this.props.onUnhighlight}>
           <View style={styles.row}>
             <Image
               source={getImageSource(this.props.movie, 'det')}
@@ -54,7 +57,6 @@ var MovieCell = React.createClass({
             </View>
           </View>
         </TouchableHighlight>
-        <View style={styles.cellBorder} />
       </View>
     );
   }

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -16,6 +16,7 @@
 		140D9B661AC36C42004F25EE /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14312D241AC3654D00CDC950 /* libRCTLinking.a */; };
 		14A2D4421AC3E43800CC738A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14A2D4411AC3E41A00CC738A /* libReact.a */; };
 		58C5726B1AA6239E00CDF9C8 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C5725B1AA6236500CDF9C8 /* libRCTText.a */; };
+		67C95F201B0E64A30040BCE2 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 67C95F1E1B0E647A0040BCE2 /* libRCTWebSocket.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -54,6 +55,13 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		67C95F1D1B0E647A0040BCE2 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 67C95F151B0E647A0040BCE2 /* RCTWebSocket.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
+		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -69,13 +77,15 @@
 		14312D1E1AC3654D00CDC950 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
 		14A2D43C1AC3E41A00CC738A /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		587650F61A9EB120008B8F17 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = SOURCE_ROOT; };
+		67C95F151B0E647A0040BCE2 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
 		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				67C95F201B0E64A30040BCE2 /* libRCTWebSocket.a in Frameworks */,
 				14A2D4421AC3E43800CC738A /* libReact.a in Frameworks */,
 				140D9B661AC36C42004F25EE /* libRCTLinking.a in Frameworks */,
 				1341801E1AA91750003F314A /* libRCTNetwork.a in Frameworks */,
@@ -135,6 +145,7 @@
 		58C571FC1AA6124500CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				67C95F151B0E647A0040BCE2 /* RCTWebSocket.xcodeproj */,
 				14A2D43C1AC3E41A00CC738A /* React.xcodeproj */,
 				14312D1E1AC3654D00CDC950 /* RCTLinking.xcodeproj */,
 				134180151AA91740003F314A /* RCTNetwork.xcodeproj */,
@@ -152,6 +163,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		67C95F161B0E647A0040BCE2 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				67C95F1E1B0E647A0040BCE2 /* libRCTWebSocket.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
@@ -228,6 +247,10 @@
 					ProductGroup = 58C572571AA6236500CDF9C8 /* Products */;
 					ProjectRef = 587650F61A9EB120008B8F17 /* RCTText.xcodeproj */;
 				},
+				{
+					ProductGroup = 67C95F161B0E647A0040BCE2 /* Products */;
+					ProjectRef = 67C95F151B0E647A0040BCE2 /* RCTWebSocket.xcodeproj */;
+				},
 				{
 					ProductGroup = 14A2D43D1AC3E41A00CC738A /* Products */;
 					ProjectRef = 14A2D43C1AC3E41A00CC738A /* React.xcodeproj */;
@@ -276,6 +299,13 @@
 			remoteRef = 58C5725A1AA6236500CDF9C8 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		67C95F1E1B0E647A0040BCE2 /* libRCTWebSocket.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTWebSocket.a;
+			remoteRef = 67C95F1D1B0E647A0040BCE2 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 /* End PBXReferenceProxy section */
 
 /* Begin PBXResourcesBuildPhase section */

Examples/Movies/SearchScreen.js

@@ -237,10 +237,31 @@ var SearchScreen = React.createClass({
     return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
   },
 
-  renderRow: function(movie: Object)  {
+  renderSeparator: function(
+    sectionID: number | string,
+    rowID: number | string,
+    adjacentRowHighlighted: boolean
+  ) {
+    var style = styles.rowSeparator;
+    if (adjacentRowHighlighted) {
+        style = [style, styles.rowSeparatorHide];
+    }
+    return (
+      <View key={"SEP_" + sectionID + "_" + rowID}  style={style}/>
+    );
+  },
+
+  renderRow: function(
+    movie: Object,
+    sectionID: number | string,
+    rowID: number | string,
+    highlightRowFunc: (sectionID: ?number | string, rowID: ?number | string) => void,
+  ) {
     return (
       <MovieCell
         onSelect={() => this.selectMovie(movie)}
+        onHighlight={() => highlightRowFunc(sectionID, rowID)}
+        onUnhighlight={() => highlightRowFunc(null, null)}
         movie={movie}
       />
     );
@@ -254,6 +275,7 @@ var SearchScreen = React.createClass({
       /> :
       <ListView
         ref="listview"
+        renderSeparator={this.renderSeparator}
         dataSource={this.state.dataSource}
         renderFooter={this.renderFooter}
         renderRow={this.renderRow}
@@ -352,6 +374,14 @@ var styles = StyleSheet.create({
   scrollSpinner: {
     marginVertical: 20,
   },
+  rowSeparator: {
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    height: 1,
+    marginLeft: 4,
+  },
+  rowSeparatorHide: {
+    opacity: 0.0,
+  },
 });
 
 module.exports = SearchScreen;

Examples/SampleApp/SampleAppTests/SampleAppTests.m

@@ -50,11 +50,8 @@ - (void)testRendersWelcomeScreen {
     redboxError = [[RCTRedBox sharedInstance] currentErrorMessage];
 
     foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
-      if ([view respondsToSelector:@selector(attributedText)]) {
-        NSString *text = [(id)view attributedText].string;
-        if ([text isEqualToString:TEXT_TO_LOOK_FOR]) {
-          return YES;
-        }
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
       }
       return NO;
     }];

Examples/UIExplorer/AppStateIOSExample.js

@@ -28,13 +28,19 @@ var AppStateSubscription = React.createClass({
     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();
@@ -45,6 +51,13 @@ var AppStateSubscription = React.createClass({
     });
   },
   render() {
+    if (this.props.showMemoryWarnings) {
+      return (
+        <View>
+          <Text>{this.state.memoryWarnings}</Text>
+        </View>
+      );
+    }
     if (this.props.showCurrentOnly) {
       return (
         <View>
@@ -77,4 +90,9 @@ exports.examples = [
     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/BorderExample.js

@@ -80,6 +80,13 @@ var styles = StyleSheet.create({
 
     borderTopLeftRadius: 100,
   },
+  border7: {
+    borderRadius: 20,
+  },
+  border7_inner: {
+    backgroundColor: 'blue',
+    flex: 1,
+  },
 });
 
 exports.title = 'Border';
@@ -134,4 +141,15 @@ exports.examples = [
       return <View style={[styles.box, styles.border6]} />;
     }
   },
+  {
+    title: 'Custom Borders',
+    description: 'borderRadius & clipping',
+    render() {
+      return (
+        <View style={[styles.box, styles.border7]}>
+          <View style={styles.border7_inner} />
+        </View>
+      );
+    }
+  },
 ];

Examples/UIExplorer/TabBarIOSExample.js

@@ -48,7 +48,9 @@ var TabBarExample = React.createClass({
 
   render: function() {
     return (
-      <TabBarIOS>
+      <TabBarIOS
+        tintColor="black"
+        barTintColor="#3abeff">
         <TabBarIOS.Item
           title="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}