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 @@ - (void)testRendersWelcomeScreen {
   }
 
   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 @@ - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
 // 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 @@ - (void)testAAA_RootViewLoadsAndRenders
   }
 
   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) \

Libraries/CameraRoll/CameraRoll.js

@@ -29,8 +29,16 @@ var GROUP_TYPES_OPTIONS = [
   'SavedPhotos', // default
 ];
 
+var ASSET_TYPE_OPTIONS = [
+  'All',
+  'Videos',
+  'Photos', // default
+];
+
+
 // Flow treats Object and Array as disjoint types, currently.
 deepFreezeAndThrowOnMutationInDev((GROUP_TYPES_OPTIONS: any));
+deepFreezeAndThrowOnMutationInDev((ASSET_TYPE_OPTIONS: any));
 
 /**
  * Shape of the param arg for the `getPhotos` function.
@@ -58,6 +66,11 @@ var getPhotosParamChecker = createStrictShapeTypeChecker({
    * titles.
    */
   groupName: ReactPropTypes.string,
+
+  /**
+  * Specifies filter on asset type
+  */
+  assetType: ReactPropTypes.oneOf(ASSET_TYPE_OPTIONS),
 });
 
 /**
@@ -94,6 +107,7 @@ var getPhotosReturnChecker = createStrictShapeTypeChecker({
 class CameraRoll {
 
   static GroupTypesOptions: Array<string>;
+  static AssetTypeOptions: Array<string>;
   /**
    * Saves the image with tag `tag` to the camera roll.
    *
@@ -154,5 +168,6 @@ class CameraRoll {
 }
 
 CameraRoll.GroupTypesOptions = GROUP_TYPES_OPTIONS;
+CameraRoll.AssetTypeOptions = ASSET_TYPE_OPTIONS;
 
 module.exports = CameraRoll;

Libraries/CustomComponents/ListView/ListView.js

@@ -45,7 +45,6 @@ var DEFAULT_INITIAL_ROWS = 10;
 var DEFAULT_SCROLL_RENDER_AHEAD = 1000;
 var DEFAULT_END_REACHED_THRESHOLD = 1000;
 var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
-var RENDER_INTERVAL = 20;
 var SCROLLVIEW_REF = 'listviewscroll';
 
 
@@ -258,7 +257,6 @@ var ListView = React.createClass({
     // the component is laid out
     this.requestAnimationFrame(() => {
       this._measureAndUpdateScrollProps();
-      this.setInterval(this._renderMoreRowsIfNeeded, RENDER_INTERVAL);
     });
   },
 
@@ -329,7 +327,7 @@ var ListView = React.createClass({
         totalIndex++;
 
         if (this.props.renderSeparator &&
-            (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length -1)) {
+            (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)) {
           var adjacentRowHighlighted =
             this.state.highlightedRow.sectionID === sectionID && (
               this.state.highlightedRow.rowID === rowID ||
@@ -397,6 +395,7 @@ var ListView = React.createClass({
   _setScrollVisibleHeight: function(left, top, width, height) {
     this.scrollProperties.visibleHeight = height;
     this._updateVisibleRows();
+    this._renderMoreRowsIfNeeded();
   },
 
   _renderMoreRowsIfNeeded: function() {
@@ -443,8 +442,8 @@ var ListView = React.createClass({
     }
     var updatedFrames = e && e.nativeEvent.updatedChildFrames;
     if (updatedFrames) {
-      updatedFrames.forEach((frame) => {
-        this._childFrames[frame.index] = merge(frame);
+      updatedFrames.forEach((newFrame) => {
+        this._childFrames[newFrame.index] = merge(newFrame);
       });
     }
     var dataSource = this.props.dataSource;

Libraries/CustomComponents/Navigator/Navigator.js

@@ -1290,7 +1290,7 @@ var Navigator = React.createClass({
         key={this.state.idStack[i]}
         ref={'scene_' + i}
         onStartShouldSetResponderCapture={() => {
-          return i !== this.state.presentedIndex;
+          return !!this.state.transitionFromIndex || !!this.state.activeGesture;
         }}
         style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
         {React.cloneElement(child, {