Updates from Thu 19 Mar

- [ReactNative] Add root package.json name back | Tadeu Zagallo
- [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
- [ReactNative] Add Custom Components folder | Christopher Chedeau
- [react-packager] Hash cache file name information to avoid long names | Amjad Masad
- [ReactNative] Put all iOS-related files in a subfolder | Alex Kotliarskyi
- [react-packager] Fix OOM | Amjad Masad
- [ReactNative] Bring Chrome debugger to OSS. Part 2 | Alex Kotliarskyi
- [ReactNative] Add search to UIExplorer | Tadeu Zagallo
- [ReactNative][RFC] Bring Chrome debugger to OSS. Part 1 | Alex Kotliarskyi
- [ReactNative] Return the appropriate status code from XHR | Tadeu Zagallo
- [ReactNative] Make JS stack traces in Xcode prettier | Alex Kotliarskyi
- [ReactNative] Remove duplicate package.json with the same name | Christopher Chedeau
- [ReactNative] Remove invariant from require('react-native') | Christopher Chedeau
- [ReactNative] Remove ListViewDataSource from require('react-native') | Christopher Chedeau
- [react-packager] Add assetRoots option | Amjad Masad
- Convert UIExplorer to ListView | Christopher Chedeau
- purge rni | Basil Hosmer
- [ReactNative] s/render*View/render/ in <WebView> | Christopher Chedeau

Examples/UIExplorer/CameraRollView.ios.js

@@ -11,7 +11,6 @@ var {
   CameraRoll,
   Image,
   ListView,
-  ListViewDataSource,
   StyleSheet,
   View,
 } = React;
@@ -73,7 +72,7 @@ var CameraRollView = React.createClass({
   },
 
   getInitialState: function() {
-    var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
+    var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
 
     return {
       assets: [],
@@ -90,7 +89,7 @@ var CameraRollView = React.createClass({
    * component to re-render its assets.
    */
   rendererChanged: function() {
-    var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
+    var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
     this.state.dataSource = ds.cloneWithRows(
       groupByEveryN(this.state.assets, this.props.imagesPerRow)
     );

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -8,6 +8,8 @@
 
 /* Begin PBXBuildFile section */
 		004D28A31AAF61C70097A701 /* UIExplorerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 004D28A21AAF61C70097A701 /* UIExplorerTests.m */; };
+		00D2771A1AB8C3E100DC1E48 /* libRCTWebSocketDebugger.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00D277131AB8C2C700DC1E48 /* libRCTWebSocketDebugger.a */; };
+		00D2771C1AB8C55500DC1E48 /* libicucore.dylib in Frameworks */ = {isa = PBXBuildFile; fileRef = 00D2771B1AB8C55500DC1E48 /* libicucore.dylib */; };
 		13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FE81AA91428003F314A /* libRCTImage.a */; };
 		134180011AA9153C003F314A /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FEF1AA914B8003F314A /* libRCTText.a */; };
 		134180021AA9153C003F314A /* libReactKit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FFF1AA91531003F314A /* libReactKit.a */; };
@@ -30,6 +32,13 @@
 			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
 			remoteInfo = UIExplorer;
 		};
+		00D277121AB8C2C700DC1E48 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00D2770E1AB8C2C700DC1E48 /* RCTWebSocketDebugger.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 832C81801AAF6DEF007FA2F7;
+			remoteInfo = RCTWebSocketDebugger;
+		};
 		13417FE71AA91428003F314A /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 13417FE31AA91428003F314A /* RCTImage.xcodeproj */;
@@ -92,6 +101,8 @@
 		004D289E1AAF61C70097A701 /* UIExplorerTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UIExplorerTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		004D28A11AAF61C70097A701 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		004D28A21AAF61C70097A701 /* UIExplorerTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = UIExplorerTests.m; sourceTree = "<group>"; };
+		00D2770E1AB8C2C700DC1E48 /* RCTWebSocketDebugger.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocketDebugger.xcodeproj; path = ../../Libraries/RCTWebSocketDebugger/RCTWebSocketDebugger.xcodeproj; sourceTree = "<group>"; };
+		00D2771B1AB8C55500DC1E48 /* libicucore.dylib */ = {isa = PBXFileReference; lastKnownFileType = "compiled.mach-o.dylib"; name = libicucore.dylib; path = usr/lib/libicucore.dylib; sourceTree = SDKROOT; };
 		13417FE31AA91428003F314A /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 		13417FEA1AA914B8003F314A /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		13417FFA1AA91531003F314A /* ReactKit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactKit.xcodeproj; path = ../../ReactKit/ReactKit.xcodeproj; sourceTree = "<group>"; };
@@ -99,12 +110,12 @@
 		134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAdSupport.xcodeproj; path = ../../Libraries/AdSupport/RCTAdSupport.xcodeproj; sourceTree = "<group>"; };
 		134A8A201AACED6A00945AAE /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* UIExplorer.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = UIExplorer.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
+		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = UIExplorer/AppDelegate.h; sourceTree = "<group>"; };
+		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = UIExplorer/AppDelegate.m; sourceTree = "<group>"; };
 		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
-		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
-		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = UIExplorer/Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = UIExplorer/Info.plist; sourceTree = "<group>"; };
+		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = UIExplorer/main.m; sourceTree = "<group>"; };
 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
 		D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -121,6 +132,8 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				00D2771C1AB8C55500DC1E48 /* libicucore.dylib in Frameworks */,
+				00D2771A1AB8C3E100DC1E48 /* libRCTWebSocketDebugger.a in Frameworks */,
 				D85B829E1AB6D5D7003F4FE2 /* libRCTVibration.a in Frameworks */,
 				147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */,
 				134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */,
@@ -152,6 +165,14 @@
 			name = "Supporting Files";
 			sourceTree = "<group>";
 		};
+		00D2770F1AB8C2C700DC1E48 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00D277131AB8C2C700DC1E48 /* libRCTWebSocketDebugger.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		1316A21D1AA397F400C0188E /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
@@ -163,6 +184,8 @@
 				13417FE31AA91428003F314A /* RCTImage.xcodeproj */,
 				134180261AA91779003F314A /* RCTNetwork.xcodeproj */,
 				13417FEA1AA914B8003F314A /* RCTText.xcodeproj */,
+				00D2770E1AB8C2C700DC1E48 /* RCTWebSocketDebugger.xcodeproj */,
+				00D2771B1AB8C55500DC1E48 /* libicucore.dylib */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -356,6 +379,10 @@
 					ProductGroup = D85B82921AB6D5CE003F4FE2 /* Products */;
 					ProjectRef = D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */;
 				},
+				{
+					ProductGroup = 00D2770F1AB8C2C700DC1E48 /* Products */;
+					ProjectRef = 00D2770E1AB8C2C700DC1E48 /* RCTWebSocketDebugger.xcodeproj */;
+				},
 				{
 					ProductGroup = 13417FFB1AA91531003F314A /* Products */;
 					ProjectRef = 13417FFA1AA91531003F314A /* ReactKit.xcodeproj */;
@@ -370,6 +397,13 @@
 /* End PBXProject section */
 
 /* Begin PBXReferenceProxy section */
+		00D277131AB8C2C700DC1E48 /* libRCTWebSocketDebugger.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTWebSocketDebugger.a;
+			remoteRef = 00D277121AB8C2C700DC1E48 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		13417FE81AA91428003F314A /* libRCTImage.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -482,6 +516,7 @@
 				13B07FB21A68108700A75B9A /* Base */,
 			);
 			name = LaunchScreen.xib;
+			path = UIExplorer;
 			sourceTree = "<group>";
 		};
 /* End PBXVariantGroup section */
@@ -532,7 +567,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../ReactKit/**",
 				);
-				INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
+				INFOPLIST_FILE = "$(SRCROOT)/UIExplorer/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";
@@ -549,7 +584,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../ReactKit/**",
 				);
-				INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
+				INFOPLIST_FILE = "$(SRCROOT)/UIExplorer/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";

Examples/UIExplorer/UIExplorerList.js

@@ -5,66 +5,107 @@
 
 var React = require('react-native/addons');
 var {
+  ListView,
   PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
+  TextInput,
   TouchableHighlight,
   View,
-  invariant,
 } = React;
 
 var createExamplePage = require('./createExamplePage');
 
-var EXAMPLES = [
-  require('./ViewExample'),
-  require('./LayoutExample'),
-  require('./TextExample.ios'),
-  require('./TimerExample'),
-  require('./TextInputExample'),
-  require('./ImageExample'),
-  require('./ListViewSimpleExample'),
-  require('./ListViewPagingExample'),
-  require('./NavigatorIOSExample'),
-  require('./StatusBarIOSExample'),
-  require('./PointerEventsExample'),
-  require('./TouchableExample'),
+var COMPONENTS = [
   require('./ActivityIndicatorExample'),
-  require('./ScrollViewExample'),
-  require('./PickerExample'),
   require('./DatePickerExample'),
-  require('./GeolocationExample'),
-  require('./TabBarExample'),
-  require('./SwitchExample'),
+  require('./ImageExample'),
+  require('./ListViewPagingExample'),
+  require('./ListViewSimpleExample'),
+  require('./MapViewExample'),
+  require('./NavigatorIOSExample'),
+  require('./PickerExample'),
+  require('./ScrollViewExample'),
   require('./SliderIOSExample'),
+  require('./SwitchExample'),
+  require('./TabBarExample'),
+  require('./TextExample.ios'),
+  require('./TextInputExample'),
+  require('./TouchableExample'),
+  require('./ViewExample'),
+  require('./WebViewExample'),
+];
+
+var APIS = [
+  require('./ActionSheetIOSExample'),
+  require('./AdSupportIOSExample'),
+  require('./AlertIOSExample'),
+  require('./AppStateExample'),
+  require('./AppStateIOSExample'),
   require('./AsyncStorageExample'),
   require('./CameraRollExample.ios'),
-  require('./MapViewExample'),
-  require('./WebViewExample'),
-  require('./AppStateIOSExample'),
+  require('./GeolocationExample'),
+  require('./LayoutExample'),
   require('./NetInfoExample'),
-  require('./AlertIOSExample'),
-  require('./AdSupportIOSExample'),
-  require('./AppStateExample'),
-  require('./ActionSheetIOSExample'),
+  require('./PointerEventsExample'),
+  require('./StatusBarIOSExample'),
+  require('./TimerExample'),
   require('./VibrationIOSExample'),
 ];
 
-var UIExplorerList = React.createClass({
-  render: function() {
-    return (
-      <ScrollView style={styles.list}>
-        <View style={styles.group}>
-          <View style={styles.line} />
-          {EXAMPLES.map(this._renderRow)}
-          <View style={styles.line} />
-        </View>
-      </ScrollView>
-    );
-  },
+var ds = new ListView.DataSource({
+  rowHasChanged: (r1, r2) => r1 !== r2,
+  sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
+});
 
-  _renderRow: function(example, i) {
-    invariant(example.title, 'Example must provide a title.');
+class UIExplorerList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: ds.cloneWithRowsAndSections({
+        components: COMPONENTS,
+        apis: APIS,
+      }),
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.listContainer}>
+        <View style={styles.searchRow}>
+          <TextInput
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="always"
+            onChangeText={this._search.bind(this)}
+            placeholder="Search..."
+            style={styles.searchTextInput}
+          />
+        </View>
+        <ListView
+          style={styles.list}
+          dataSource={this.state.dataSource}
+          renderRow={this._renderRow.bind(this)}
+          renderSectionHeader={this._renderSectionHeader}
+          automaticallyAdjustContentInsets={false}
+        />
+      </View>
+    );
+  }
+
+  _renderSectionHeader(data, section) {
+    return (
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionHeaderTitle}>
+          {section.toUpperCase()}
+        </Text>
+      </View>
+    );
+  }
+
+  _renderRow(example, i) {
     return (
       <View key={i}>
         <TouchableHighlight onPress={() => this._onPressRow(example)}>
@@ -80,9 +121,21 @@ var UIExplorerList = React.createClass({
         <View style={styles.separator} />
       </View>
     );
-  },
+  }
 
-  _onPressRow: function(example) {
+  _search(text) {
+    var regex = new RegExp(text, 'i');
+    var filter = (component) => regex.test(component.title);
+
+    this.setState({
+      dataSource: ds.cloneWithRowsAndSections({
+        components: COMPONENTS.filter(filter),
+        apis: APIS.filter(filter),
+      })
+    });
+  }
+
+  _onPressRow(example) {
     var Component = example.examples ?
       createExamplePage(null, example) :
       example;
@@ -90,20 +143,25 @@ var UIExplorerList = React.createClass({
       title: Component.title,
       component: Component,
     });
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
+  listContainer: {
+    flex: 1,
+  },
   list: {
     backgroundColor: '#eeeeee',
   },
+  sectionHeader: {
+    padding: 5,
+  },
   group: {
     backgroundColor: 'white',
-    marginVertical: 25,
   },
-  line: {
-    backgroundColor: '#bbbbbb',
-    height: 1 / PixelRatio.get(),
+  sectionHeaderTitle: {
+    fontWeight: 'bold',
+    fontSize: 11,
   },
   row: {
     backgroundColor: 'white',
@@ -125,6 +183,21 @@ var styles = StyleSheet.create({
     color: '#888888',
     lineHeight: 20,
   },
+  searchRow: {
+    backgroundColor: '#eeeeee',
+    paddingTop: 75,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+  },
+  searchTextInput: {
+    backgroundColor: 'white',
+    borderColor: '#cccccc',
+    borderRadius: 3,
+    borderWidth: 1,
+    height: 30,
+    paddingLeft: 8,
+  },
 });
 
 module.exports = UIExplorerList;

Examples/UIExplorer/WebViewExample.js

@@ -81,8 +81,8 @@ var WebViewExample = React.createClass({
           automaticallyAdjustContentInsets={false}
           style={styles.webView}
           url={this.state.url}
-          renderErrorView={this.renderErrorView}
-          renderLoadingView={this.renderLoadingView}
+          renderError={this.renderError}
+          renderLoading={this.renderLoading}
           onNavigationStateChange={this.onNavigationStateChange}
           startInLoadingState={true}
         />
@@ -115,7 +115,7 @@ var WebViewExample = React.createClass({
     });
   },
 
-  renderErrorView: function(errorDomain, errorCode, errorDesc) {
+  renderError: function(errorDomain, errorCode, errorDesc) {
     return (
       <View style={styles.errorContainer}>
         <Text style={styles.errorTextTitle}>
@@ -134,7 +134,7 @@ var WebViewExample = React.createClass({
     );
   },
 
-  renderLoadingView: function() {
+  renderLoading: function() {
     return (
       <View style={styles.loadingView}>
         <ActivityIndicatorIOS />