Updates from Wed 3 Jun

Examples/Movies/Movies/main.m

@@ -17,6 +17,6 @@
 
 int main(int argc, char * argv[]) {
   @autoreleasepool {
-      return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
   }
 }

Examples/SampleApp/SampleAppTests/SampleAppTests.m

@@ -58,7 +58,7 @@
   }
 
   XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
-  XCTAssertTrue(foundElement, @"Cound't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
 }
 
 

Examples/UIExplorer/CameraRollView.ios.js

@@ -59,6 +59,16 @@ var propTypes = {
    * imagesPerRow: Number of images to be shown in each row.
    */
   imagesPerRow: React.PropTypes.number,
+
+   /**
+   * The asset type, one of 'Photos', 'Videos' or 'All'
+   */
+  assetType: React.PropTypes.oneOf([
+    'Photos',
+    'Videos',
+    'All',
+  ]),
+
 };
 
 var CameraRollView = React.createClass({
@@ -69,6 +79,7 @@ var CameraRollView = React.createClass({
       groupTypes: 'SavedPhotos',
       batchSize: 5,
       imagesPerRow: 1,
+      assetType: 'Photos',
       renderImage: function(asset) {
         var imageSize = 150;
         var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
@@ -89,6 +100,7 @@ var CameraRollView = React.createClass({
       assets: ([]: Array<Image>),
       groupTypes: this.props.groupTypes,
       lastCursor: (null : ?string),
+      assetType: this.props.assetType,
       noMore: false,
       loadingMore: false,
       dataSource: ds,
@@ -124,7 +136,8 @@ var CameraRollView = React.createClass({
 
     var fetchParams: Object = {
       first: this.props.batchSize,
-      groupTypes: this.props.groupTypes
+      groupTypes: this.props.groupTypes,
+      assetType: this.props.assetType,
     };
     if (this.state.lastCursor) {
       fetchParams.after = this.state.lastCursor;

Examples/UIExplorer/NetInfoExample.js

@@ -29,13 +29,13 @@ var ReachabilitySubscription = React.createClass({
     };
   },
   componentDidMount: function() {
-    NetInfo.reachabilityIOS.addEventListener(
+    NetInfo.addEventListener(
       'change',
       this._handleReachabilityChange
     );
   },
   componentWillUnmount: function() {
-    NetInfo.reachabilityIOS.removeEventListener(
+    NetInfo.removeEventListener(
       'change',
       this._handleReachabilityChange
     );
@@ -63,16 +63,16 @@ var ReachabilityCurrent = React.createClass({
     };
   },
   componentDidMount: function() {
-    NetInfo.reachabilityIOS.addEventListener(
+    NetInfo.addEventListener(
       'change',
       this._handleReachabilityChange
     );
-    NetInfo.reachabilityIOS.fetch().done(
+    NetInfo.fetch().done(
       (reachability) => { this.setState({reachability}); }
     );
   },
   componentWillUnmount: function() {
-    NetInfo.reachabilityIOS.removeEventListener(
+    NetInfo.removeEventListener(
       'change',
       this._handleReachabilityChange
     );

Examples/UIExplorer/TransformExample.js

@@ -0,0 +1,159 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TransformExample
+ */
+'use strict';
+
+var React = require('React');
+
+var StyleSheet = require('StyleSheet');
+var TimerMixin = require('react-timer-mixin');
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+var View = require('View');
+
+var TransformExample = React.createClass({
+
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      interval: this.setInterval(this._update, 800),
+      pulse: false,
+    };
+  },
+
+  render() {
+    return (
+      <UIExplorerPage title="Transforms">
+        <UIExplorerBlock title="foo bar">
+          <View style={{height: 500}}>
+            <View style={styles.box1} />
+            <View style={styles.box2} />
+            <View style={styles.box3step1} />
+            <View style={styles.box3step2} />
+            <View style={styles.box3step3} />
+            <View style={styles.box4} />
+            <View style={[
+              styles.box5,
+              this.state.pulse ? styles.box5Transform : null
+            ]} />
+          </View>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+
+  _update() {
+    this.setState({
+      pulse: !this.state.pulse,
+    });
+  },
+
+});
+
+var styles = StyleSheet.create({
+  box1: {
+    left: 0,
+    backgroundColor: 'green',
+    height: 50,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box2: {
+    left: 0,
+    backgroundColor: 'purple',
+    height: 50,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step1: {
+    left: 0,
+    backgroundColor: '#ffb6c1', // lightpink
+    height: 50,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step2: {
+    left: 0,
+    backgroundColor: '#ff69b4', //hotpink
+    height: 50,
+    opacity: 0.5,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box3step3: {
+    left: 0,
+    backgroundColor: '#ff1493', // deeppink
+    height: 50,
+    opacity: 0.5,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 100},
+      {translateY: 50},
+    ],
+    width: 50,
+  },
+  box4: {
+    left: 0,
+    backgroundColor: '#ff8c00', // darkorange
+    height: 50,
+    position: 'absolute',
+    top: 0,
+    transform: [
+      {translate: [200, 350]},
+      {scale: 2.5},
+      {rotate: '-0.2rad'},
+    ],
+    width: 100,
+  },
+  box5: {
+    backgroundColor: '#800000', // maroon
+    height: 50,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: 50,
+  },
+  box5Transform: {
+    transform: [
+      {translate: [-50, 35]},
+      {rotate: '50deg'},
+      {scale: 2},
+    ],
+  },
+});
+
+
+module.exports = TransformExample;

Examples/UIExplorer/UIExplorerList.js

@@ -30,7 +30,7 @@ var {
 var { TestModule } = React.addons;
 var Settings = require('Settings');
 
-import type { Example, ExampleModule } from 'ExampleTypes';
+import type { ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = require('./createExamplePage');
 
@@ -154,7 +154,9 @@ class UIExplorerList extends React.Component {
           dataSource={this.state.dataSource}
           renderRow={this._renderRow.bind(this)}
           renderSectionHeader={this._renderSectionHeader}
+          keyboardShouldPersistTaps={true}
           automaticallyAdjustContentInsets={false}
+          keyboardDismissMode="onDrag"
         />
       </View>
     );

Examples/UIExplorer/UIExplorerTests/UIExplorerTests.m

@@ -62,6 +62,9 @@
 // Make sure this test runs first because the other tests will tear out the rootView
 - (void)testAAA_RootViewLoadsAndRenders
 {
+  // TODO (t7296305) Fix and Re-Enable this UIExplorer Test
+  return;
+
   UIViewController *vc = [UIApplication sharedApplication].delegate.window.rootViewController;
   RCTAssert([vc.view isKindOfClass:[RCTRootView class]], @"This test must run first.");
   NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
@@ -82,7 +85,7 @@
   }
 
   XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
-  XCTAssertTrue(foundElement, @"Cound't find element with '<View>' text in %d seconds", TIMEOUT_SECONDS);
+  XCTAssertTrue(foundElement, @"Couldn't find element with '<View>' text in %d seconds", TIMEOUT_SECONDS);
 }
 
 #define RCT_SNAPSHOT_TEST(name, reRecord) \