Add missing PerfUtil image.

Summary:
Fixes #14202.
Closes https://github.com/facebook/react-native/pull/14211

Differential Revision: D5141377

Pulled By: hramos

fbshipit-source-id: 9a1b76e94e8b775e84988f1b4bb018e01db8fdb2

.buckconfig

@@ -2,9 +2,12 @@
 [android]
   target = Google Inc.:Google APIs:23
 
+[download]
+  max_number_of_retries = 3
+
 [maven_repositories]
   central = https://repo1.maven.org/maven2
 
 [alias]
   movies = //Examples/Movies/android/app:app
-  uiexplorer = //Examples/UIExplorer/android/app:app
+  rntester = //RNTester/android/app:app

.eslintignore

@@ -3,3 +3,4 @@
 **/staticBundle.js
 **/main.js
 Libraries/vendor/**/*
+packager/src/worker-farm/**/*

.flowconfig

@@ -20,11 +20,6 @@
 .*/Libraries/react-native/React.js
 .*/Libraries/react-native/ReactNative.js
 
-; Ignore duplicate ReactErrorUtils in react-dom/lib in React 16 alpha 4.
-; TODO (bvaughn) Remove this once we've synced to React 16 alpha 5.
-; For more info see https://phabricator.intern.facebook.com/D4747529#10
-<PROJECT_ROOT>/node_modules/react-dom/lib/ReactErrorUtils.js
-
 [include]
 
 [libs]
@@ -46,12 +41,12 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.42.0
+^0.45.0

.github/ISSUE_TEMPLATE.md

@@ -1,11 +1,16 @@
 Please read the following carefully before opening a new issue.
 Your issue may be closed if it does not provide the information required by this template.
 
-We use GitHub Issues for tracking bugs in React Native.
+We use GitHub Issues exclusively for tracking bugs in React Native.
 
 - If you have a question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
 - If you have a feature request, post it on Canny: https://react-native.canny.io/feature-requests
 
+Make sure your issue reproduces on master. Your issue may already have been fixed!
+If your issue is present in master and in the stable release, try to reproduce your bug on https://snack.expo.io/
+If you can't reproduce the bug on Snack, provide a sample project. 
+At the very least, provide an example of your code.
+
 --- Delete everything above this line ---
 
 ### Description
@@ -14,8 +19,10 @@ Explain what you did, what you expected to happen, and what actually happens.
 
 ### Reproduction Steps and Sample Code
 
-Try to reproduce your bug on https://sketch.expo.io/ and provide a link. 
-If you can't reproduce the bug on Sketch, provide a sample project. At the very least, provide an example of your code.
+List all the steps required to reproduce the issue you're reporting. These steps should be clear and concise.
+
+  ***An example of your code is REQUIRED***
+
 
 ### Solution
 

ContainerShip/Dockerfile.android-base

@@ -86,10 +86,16 @@ RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Intel x
 RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Google APIs, Android API 23, revision 1" | awk '{ print $1 }' | sed 's/.$//')
 
 # Android Support Repository, revision 45
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android Support Repository, revision 45" | awk '{ print $1 }' | sed 's/.$//')
+RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android Support Repository" | awk '{ print $1 }' | sed 's/.$//')
 
 # Link adb executable
 RUN ln -s /opt/android/platform-tools/adb /usr/bin/adb
 
+# Install google-chrome
+RUN curl -fsSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+     && echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list \
+     && apt-get update \
+     && apt-get install -y google-chrome-stable
+
 # clean up unnecessary directories
 RUN rm -rf /opt/android/system-images/android-19/default/x86

ContainerShip/scripts/run-android-ci-instrumentation-tests.js

@@ -28,12 +28,6 @@ const child_process = require('child_process');
 const fs = require('fs');
 const path = require('path');
 
-// Flaky tests ignored on Circle CI. They still run internally at fb.
-const ignoredTests = [
-  'ReactScrollViewTestCase',
-  'ReactHorizontalScrollViewTestCase'
-];
-
 const colors = {
     GREEN: '\x1b[32m',
     RED: '\x1b[31m',
@@ -42,6 +36,7 @@ const colors = {
 
 const test_opts = {
     FILTER: new RegExp(argv.filter || '.*', 'i'),
+    IGNORE: argv.ignore || null,
     PACKAGE: argv.package || 'com.facebook.react.tests',
     PATH: argv.path || './ReactAndroid/src/androidTest/java/com/facebook/react/tests',
     RETRIES: parseInt(argv.retries || 2, 10),
@@ -59,14 +54,21 @@ let testClasses = fs.readdirSync(path.resolve(process.cwd(), test_opts.PATH))
         return file.endsWith('.java');
     }).map((clazz) => {
         return path.basename(clazz, '.java');
-    }).filter(className => {
-        return ignoredTests.indexOf(className) === -1;
-    }).map((clazz) => {
-        return test_opts.PACKAGE + '.' + clazz;
-    }).filter((clazz) => {
-        return test_opts.FILTER.test(clazz);
     });
 
+if (test_opts.IGNORE) {
+    test_opts.IGNORE = new RegExp(test_opts.IGNORE, 'i');
+    testClasses = testClasses.filter(className => {
+        return !test_opts.IGNORE.test(className);
+    });
+}
+
+testClasses = testClasses.map((clazz) => {
+    return test_opts.PACKAGE + '.' + clazz;
+}).filter((clazz) => {
+    return test_opts.FILTER.test(clazz);
+});
+
 // only process subset of the tests at corresponding offset and count if args provided
 if (test_opts.COUNT != null && test_opts.OFFSET != null) {
     const testCount = testClasses.length;

ContainerShip/scripts/run-ci-e2e-tests.sh

@@ -11,7 +11,7 @@ RUN_CLI_INSTALL=1
 RUN_IOS=0
 RUN_JS=0
 
-RETRY_COUNT=${RETRY_COUNT:-1}
+RETRY_COUNT=${RETRY_COUNT:-2}
 AVD_UUID=$(cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -n 1)
 
 ANDROID_NPM_DEPS="appium@1.5.1 mocha@2.4.5 wd@0.3.11 colors@1.0.3 pretty-data2@0.40.1"
@@ -19,6 +19,10 @@ CLI_PACKAGE=$ROOT/react-native-cli/react-native-cli-*.tgz
 PACKAGE=$ROOT/react-native-*.tgz
 REACT_NATIVE_MAX_WORKERS=1
 
+# solve issue with max user watches limit
+echo 65536 | tee -a /proc/sys/fs/inotify/max_user_watches
+watchman shutdown-server
+
 # retries command on failure
 # $1 -- max attempts
 # $2 -- command to run
@@ -177,7 +181,6 @@ function e2e_suite() {
       cd ..
       keytool -genkey -v -keystore android/keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"
 
-      echo "Starting packager server"
       node ./node_modules/.bin/appium >> /dev/null &
       APPIUM_PID=$!
       echo "Starting appium server $APPIUM_PID"
@@ -193,6 +196,7 @@ function e2e_suite() {
         return 1
       fi
 
+      echo "Starting packager server"
       npm start >> /dev/null &
       SERVER_PID=$!
       sleep 15

Examples/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-alert": 0
-  }
-}

Examples/UIExplorer/UIExplorer/AppDelegate.h

@@ -1,24 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <UIKit/UIKit.h>
-
-@class RCTBridge;
-
-@interface AppDelegate : UIResponder <UIApplicationDelegate>
-
-@property (nonatomic, strong) UIWindow *window;
-@property (nonatomic, readonly) RCTBridge *bridge;
-
-@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.h

@@ -1,21 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <UIKit/UIKit.h>
-
-#import <React/RCTView.h>
-
-@interface FlexibleSizeExampleView : RCTView
-
-@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h

@@ -1,21 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <UIKit/UIKit.h>
-
-#import <React/RCTView.h>
-
-@interface UpdatePropertiesExampleView : RCTView
-
-@end

Examples/UIExplorer/UIExplorer/main.m

@@ -1,23 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <UIKit/UIKit.h>
-
-#import "AppDelegate.h"
-
-int main(int argc, char * argv[]) {
-  @autoreleasepool {
-    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
-  }
-}

Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_YGValueTests.m

@@ -1,45 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <XCTest/XCTest.h>
-
-#import <React/RCTConvert.h>
-
-@interface RCTConvert_YGValueTests : XCTestCase
-
-@end
-
-@implementation RCTConvert_YGValueTests
-
-- (void)testUndefined
-{
-  YGValue value = [RCTConvert YGValue:nil];
-  XCTAssertEqual(value.unit, YGUnitUndefined);
-}
-
-- (void)testNumberPoints
-{
-  YGValue value = [RCTConvert YGValue:@100];
-  XCTAssertEqual(value.unit, YGUnitPoint);
-  XCTAssertEqual(value.value, 100);
-}
-
-- (void)testStringPercent
-{
-  YGValue value = [RCTConvert YGValue:@"100%"];
-  XCTAssertEqual(value.unit, YGUnitPercent);
-  XCTAssertEqual(value.value, 100);
-}
-
-@end

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleMethodTests.m

@@ -1,145 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-#import <UIKit/UIKit.h>
-#import <XCTest/XCTest.h>
-
-#import <React/RCTBridgeModule.h>
-#import <React/RCTLog.h>
-#import <React/RCTModuleMethod.h>
-
-static BOOL RCTLogsError(void (^block)(void))
-{
-  __block BOOL loggedError = NO;
-  RCTPerformBlockWithLogFunction(block, ^(RCTLogLevel level,
-                                          __unused RCTLogSource source,
-                                          __unused NSString *fileName,
-                                          __unused NSNumber *lineNumber,
-                                          __unused NSString *message) {
-    loggedError = (level == RCTLogLevelError);
-  });
-  return loggedError;
-}
-
-@interface RCTModuleMethodTests : XCTestCase <RCTBridgeModule>
-
-@end
-
-@implementation RCTModuleMethodTests
-{
-  CGRect _s;
-}
-
-+ (NSString *)moduleName { return nil; }
-
-- (void)doFooWithBar:(__unused NSString *)bar { }
-
-- (void)testNonnull
-{
-  NSString *methodSignature = @"doFooWithBar:(nonnull NSString *)bar";
-  RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                JSMethodName:nil
-                                                                 moduleClass:[self class]];
-  XCTAssertFalse(RCTLogsError(^{
-    [method invokeWithBridge:nil module:self arguments:@[@"Hello World"]];
-  }));
-
-  XCTAssertTrue(RCTLogsError(^{
-    [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
-  }));
-}
-
-- (void)doFooWithNumber:(__unused NSNumber *)n { }
-- (void)doFooWithDouble:(__unused double)n { }
-- (void)doFooWithInteger:(__unused NSInteger)n { }
-- (void)doFooWithCGRect:(CGRect)s { _s = s; }
-
-- (void)doFoo : (__unused NSString *)foo { }
-
-- (void)testNumbersNonnull
-{
-  {
-    // Specifying an NSNumber param without nonnull isn't allowed
-    XCTAssertTrue(RCTLogsError(^{
-      NSString *methodSignature = @"doFooWithNumber:(NSNumber *)n";
-      RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                    JSMethodName:nil
-                                                                     moduleClass:[self class]];
-      // Invoke method to trigger parsing
-      [method invokeWithBridge:nil module:self arguments:@[@1]];
-    }));
-  }
-
-  {
-    NSString *methodSignature = @"doFooWithNumber:(nonnull NSNumber *)n";
-    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                  JSMethodName:nil
-                                                                   moduleClass:[self class]];
-    XCTAssertTrue(RCTLogsError(^{
-      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
-    }));
-  }
-
-  {
-    NSString *methodSignature = @"doFooWithDouble:(double)n";
-    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                  JSMethodName:nil
-                                                                   moduleClass:[self class]];
-    XCTAssertTrue(RCTLogsError(^{
-      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
-    }));
-  }
-
-  {
-    NSString *methodSignature = @"doFooWithInteger:(NSInteger)n";
-    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                  JSMethodName:nil
-                                                                   moduleClass:[self class]];
-    XCTAssertTrue(RCTLogsError(^{
-      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
-    }));
-  }
-}
-
-- (void)testStructArgument
-{
-  NSString *methodSignature = @"doFooWithCGRect:(CGRect)s";
-  RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                                JSMethodName:nil
-                                                                 moduleClass:[self class]];
-
-  CGRect r = CGRectMake(10, 20, 30, 40);
-  [method invokeWithBridge:nil module:self arguments:@[@[@10, @20, @30, @40]]];
-  XCTAssertTrue(CGRectEqualToRect(r, _s));
-}
-
-- (void)testWhitespaceTolerance
-{
-  NSString *methodSignature = @"doFoo : \t (NSString *)foo";
-
-  __block RCTModuleMethod *method;
-  XCTAssertFalse(RCTLogsError(^{
-    method = [[RCTModuleMethod alloc] initWithMethodSignature:methodSignature
-                                                 JSMethodName:nil
-                                                  moduleClass:[self class]];
-  }));
-
-  XCTAssertEqualObjects(method.JSMethodName, @"doFoo");
-
-  XCTAssertFalse(RCTLogsError(^{
-    [method invokeWithBridge:nil module:self arguments:@[@"bar"]];
-  }));
-}
-
-@end

Examples/UIExplorer/android/app/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">UIExplorer App</string>
-</resources>

Examples/UIExplorer/js/ExampleTypes.js

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule ExampleTypes
- * @flow
- */
-'use strict';
-
-import type React from 'react';
-
-export type Example = {
-  title: string,
-  render: () => ?React.Element<any>,
-  description?: string,
-  platform?: string,
-};
-
-export type ExampleModule = {
-  title: string,
-  description: string,
-  examples: Array<Example>,
-};

Examples/UIExplorer/js/ImageEditingExample.js

@@ -1,331 +0,0 @@
-/*
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- * @providesModule ImageEditingExample
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  CameraRoll,
-  Image,
-  ImageEditor,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = ReactNative;
-
-var PAGE_SIZE = 20;
-
-type ImageOffset = {
-  x: number;
-  y: number;
-};
-
-type ImageSize = {
-  width: number;
-  height: number;
-};
-
-type ImageCropData = {
-  offset: ImageOffset;
-  size: ImageSize;
-  displaySize?: ?ImageSize;
-  resizeMode?: ?any;
-};
-
-class SquareImageCropper extends React.Component {
-  state: any;
-  _isMounted: boolean;
-  _transformData: ImageCropData;
-
-  constructor(props) {
-    super(props);
-    this._isMounted = true;
-    this.state = {
-      randomPhoto: null,
-      measuredSize: null,
-      croppedImageURI: null,
-      cropError: null,
-    };
-    this._fetchRandomPhoto();
-  }
-
-  async _fetchRandomPhoto() {
-    try {
-      const data = await CameraRoll.getPhotos({first: PAGE_SIZE});
-      if (!this._isMounted) {
-        return;
-      }
-      var edges = data.edges;
-      var edge = edges[Math.floor(Math.random() * edges.length)];
-      var randomPhoto = edge && edge.node && edge.node.image;
-      if (randomPhoto) {
-        this.setState({randomPhoto});
-      }
-    } catch (error) {
-      console.warn("Can't get a photo from camera roll", error);
-    }
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
-  render() {
-    if (!this.state.measuredSize) {
-      return (
-        <View
-          style={styles.container}
-          onLayout={(event) => {
-            var measuredWidth = event.nativeEvent.layout.width;
-            if (!measuredWidth) {
-              return;
-            }
-            this.setState({
-              measuredSize: {width: measuredWidth, height: measuredWidth},
-            });
-          }}
-        />
-      );
-    }
-
-    if (!this.state.croppedImageURI) {
-      return this._renderImageCropper();
-    }
-    return this._renderCroppedImage();
-  }
-
-  _renderImageCropper() {
-    if (!this.state.randomPhoto) {
-      return (
-        <View style={styles.container} />
-      );
-    }
-    var error = null;
-    if (this.state.cropError) {
-      error = (
-        <Text>{this.state.cropError.message}</Text>
-      );
-    }
-    return (
-      <View style={styles.container}>
-        <Text>Drag the image within the square to crop:</Text>
-        <ImageCropper
-          image={this.state.randomPhoto}
-          size={this.state.measuredSize}
-          style={[styles.imageCropper, this.state.measuredSize]}
-          onTransformDataChange={(data) => this._transformData = data}
-        />
-        <TouchableHighlight
-          style={styles.cropButtonTouchable}
-          onPress={this._crop.bind(this)}>
-          <View style={styles.cropButton}>
-            <Text style={styles.cropButtonLabel}>
-              Crop
-            </Text>
-          </View>
-        </TouchableHighlight>
-        {error}
-      </View>
-    );
-  }
-
-  _renderCroppedImage() {
-    return (
-      <View style={styles.container}>
-        <Text>Here is the cropped image:</Text>
-        <Image
-          source={{uri: this.state.croppedImageURI}}
-          style={[styles.imageCropper, this.state.measuredSize]}
-        />
-        <TouchableHighlight
-          style={styles.cropButtonTouchable}
-          onPress={this._reset.bind(this)}>
-          <View style={styles.cropButton}>
-            <Text style={styles.cropButtonLabel}>
-              Try again
-            </Text>
-          </View>
-        </TouchableHighlight>
-      </View>
-    );
-  }
-
-  _crop() {
-    ImageEditor.cropImage(
-      this.state.randomPhoto.uri,
-      this._transformData,
-      (croppedImageURI) => this.setState({croppedImageURI}),
-      (cropError) => this.setState({cropError})
-    );
-  }
-
-  _reset() {
-    this.setState({
-      randomPhoto: null,
-      croppedImageURI: null,
-      cropError: null,
-    });
-    this._fetchRandomPhoto();
-  }
-
-}
-
-class ImageCropper extends React.Component {
-  _contentOffset: ImageOffset;
-  _maximumZoomScale: number;
-  _minimumZoomScale: number;
-  _scaledImageSize: ImageSize;
-  _horizontal: boolean;
-
-  componentWillMount() {
-    // Scale an image to the minimum size that is large enough to completely
-    // fill the crop box.
-    var widthRatio = this.props.image.width / this.props.size.width;
-    var heightRatio = this.props.image.height / this.props.size.height;
-    this._horizontal = widthRatio > heightRatio;
-    if (this._horizontal) {
-      this._scaledImageSize = {
-        width: this.props.image.width / heightRatio,
-        height: this.props.size.height,
-      };
-    } else {
-      this._scaledImageSize = {
-        width: this.props.size.width,
-        height: this.props.image.height / widthRatio,
-      };
-      if (Platform.OS === 'android') {
-        // hack to work around Android ScrollView a) not supporting zoom, and
-        // b) not supporting vertical scrolling when nested inside another
-        // vertical ScrollView (which it is, when displayed inside UIExplorer)
-        this._scaledImageSize.width *= 2;
-        this._scaledImageSize.height *= 2;
-        this._horizontal = true;
-      }
-    }
-    this._contentOffset = {
-      x: (this._scaledImageSize.width - this.props.size.width) / 2,
-      y: (this._scaledImageSize.height - this.props.size.height) / 2,
-    };
-    this._maximumZoomScale = Math.min(
-      this.props.image.width / this._scaledImageSize.width,
-      this.props.image.height / this._scaledImageSize.height
-    );
-    this._minimumZoomScale = Math.max(
-      this.props.size.width / this._scaledImageSize.width,
-      this.props.size.height / this._scaledImageSize.height
-    );
-    this._updateTransformData(
-      this._contentOffset,
-      this._scaledImageSize,
-      this.props.size
-    );
-  }
-
-  _onScroll(event) {
-    this._updateTransformData(
-      event.nativeEvent.contentOffset,
-      event.nativeEvent.contentSize,
-      event.nativeEvent.layoutMeasurement
-    );
-  }
-
-  _updateTransformData(offset, scaledImageSize, croppedImageSize) {
-    var offsetRatioX = offset.x / scaledImageSize.width;
-    var offsetRatioY = offset.y / scaledImageSize.height;
-    var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
-    var sizeRatioY = croppedImageSize.height / scaledImageSize.height;
-
-    var cropData: ImageCropData = {
-      offset: {
-        x: this.props.image.width * offsetRatioX,
-        y: this.props.image.height * offsetRatioY,
-      },
-      size: {
-        width: this.props.image.width * sizeRatioX,
-        height: this.props.image.height * sizeRatioY,
-      },
-    };
-    this.props.onTransformDataChange && this.props.onTransformDataChange(cropData);
-  }
-
-  render() {
-    return (
-      <ScrollView
-        alwaysBounceVertical={true}
-        automaticallyAdjustContentInsets={false}
-        contentOffset={this._contentOffset}
-        decelerationRate="fast"
-        horizontal={this._horizontal}
-        maximumZoomScale={this._maximumZoomScale}
-        minimumZoomScale={this._minimumZoomScale}
-        onMomentumScrollEnd={this._onScroll.bind(this)}
-        onScrollEndDrag={this._onScroll.bind(this)}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-        style={this.props.style}
-        scrollEventThrottle={16}>
-        <Image source={this.props.image} style={this._scaledImageSize} />
-      </ScrollView>
-    );
-  }
-
-}
-
-exports.framework = 'React';
-exports.title = 'ImageEditor';
-exports.description = 'Cropping and scaling with ImageEditor';
-exports.examples = [{
-  title: 'Image Cropping',
-  render() {
-    return <SquareImageCropper/>;
-  }
-}];
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignSelf: 'stretch',
-  },
-  imageCropper: {
-    alignSelf: 'center',
-    marginTop: 12,
-  },
-  cropButtonTouchable: {
-    alignSelf: 'center',
-    marginTop: 12,
-  },
-  cropButton: {
-    padding: 12,
-    backgroundColor: 'blue',
-    borderRadius: 4,
-  },
-  cropButtonLabel: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '500',
-  },
-});

Examples/UIExplorer/js/UIExplorerActions.js

@@ -1,71 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- * @providesModule UIExplorerActions
- */
-'use strict';
-
-export type UIExplorerBackAction = {
-  type: 'UIExplorerBackAction',
-};
-
-export type UIExplorerListAction = {
-  type: 'UIExplorerListAction',
-};
-
-export type UIExplorerExampleAction = {
-  type: 'UIExplorerExampleAction',
-  openExample: string,
-};
-
-export type UIExplorerAction = (
-  UIExplorerBackAction |
-  UIExplorerListAction |
-  UIExplorerExampleAction
-);
-
-
-function Back(): UIExplorerBackAction {
-  return {
-    type: 'UIExplorerBackAction',
-  };
-}
-
-function ExampleList(): UIExplorerListAction {
-  return {
-    type: 'UIExplorerListAction',
-  };
-}
-
-function ExampleAction(openExample: string): UIExplorerExampleAction {
-  return {
-    type: 'UIExplorerExampleAction',
-    openExample,
-  };
-}
-
-const UIExplorerActions = {
-  Back,
-  ExampleList,
-  ExampleAction,
-};
-
-module.exports = UIExplorerActions;

Examples/UIExplorer/js/UIExplorerExampleContainer.js

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule UIExplorerExampleContainer
- */
-'use strict';
-
-const React = require('react');
-const {
-  Platform,
-} = require('react-native');
-const UIExplorerBlock = require('./UIExplorerBlock');
-const UIExplorerPage = require('./UIExplorerPage');
-
-class UIExplorerExampleContainer extends React.Component {
-  renderExample(example, i) {
-    // Filter platform-specific examples
-    var {title, description, platform} = example;
-    if (platform) {
-      if (Platform.OS !== platform) {
-        return null;
-      }
-      title += ' (' + platform + ' only)';
-    }
-    return (
-      <UIExplorerBlock
-        key={i}
-        title={title}
-        description={description}>
-        {example.render()}
-      </UIExplorerBlock>
-    );
-  }
-
-  render(): React.Element<any> {
-    if (!this.props.module.examples) {
-      return <this.props.module />;
-    }
-
-    return (
-      <UIExplorerPage title={this.props.title}>
-        {this.props.module.examples.map(this.renderExample)}
-      </UIExplorerPage>
-    );
-  }
-}
-
-module.exports = UIExplorerExampleContainer;

Examples/UIExplorer/js/UIExplorerNavigationReducer.js

@@ -1,69 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- * @providesModule UIExplorerNavigationReducer
- */
-'use strict';
-
-// $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
-const UIExplorerList = require('./UIExplorerList');
-
-export type UIExplorerNavigationState = {
-  openExample: ?string,
-};
-
-function UIExplorerNavigationReducer(
-  state: ?UIExplorerNavigationState,
-  action: any
-): UIExplorerNavigationState {
-
-  if (
-    // Default value is to see example list
-    !state ||
-
-    // Handle the explicit list action
-    action.type === 'UIExplorerListAction' ||
-
-    // Handle requests to go back to the list when an example is open
-    (state.openExample && action.type === 'UIExplorerBackAction')
-  ) {
-    return {
-      // A null openExample will cause the views to display the UIExplorer example list
-      openExample: null,
-    };
-  }
-
-  if (action.type === 'UIExplorerExampleAction') {
-
-    // Make sure we see the module before returning the new state
-    const ExampleModule = UIExplorerList.Modules[action.openExample];
-
-    if (ExampleModule) {
-      return {
-        openExample: action.openExample,
-      };
-    }
-  }
-
-  return state;
-}
-
-module.exports = UIExplorerNavigationReducer;

Examples/UIExplorer/js/URIActionMap.js

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- * @providesModule URIActionMap
- */
-'use strict';
-
-const ReactNative = require('react-native');
-const UIExplorerActions = require('./UIExplorerActions');
-// $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
-const UIExplorerList = require('./UIExplorerList');
-
-const {
-  Alert,
-} = ReactNative;
-
-import type { UIExplorerAction } from './UIExplorerActions';
-
-function PathActionMap(path: string): ?UIExplorerAction {
-  // Warning! Hacky parsing for example code. Use a library for this!
-  const exampleParts = path.split('/example/');
-  const exampleKey = exampleParts[1];
-  if (exampleKey) {
-    if (!UIExplorerList.Modules[exampleKey]) {
-      Alert.alert(`${exampleKey} example could not be found!`);
-      return null;
-    }
-    return UIExplorerActions.ExampleAction(exampleKey);
-  }
-  return null;
-}
-
-function URIActionMap(uri: ?string): ?UIExplorerAction {
-  if (!uri) {
-    return null;
-  }
-  // Warning! Hacky parsing for example code. Use a library for this!
-  const parts = uri.split('rnuiexplorer:/');
-  if (!parts[1]) {
-    return null;
-  }
-  const path = parts[1];
-  return PathActionMap(path);
-}
-
-module.exports = URIActionMap;

Examples/UIExplorer/js/createExamplePage.js

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule createExamplePage
- * @flow
- */
-'use strict';
-
-const React = require('react');
-
-const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
-
-import type { ExampleModule } from 'ExampleTypes';
-
-var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
-  : ReactClass<any> {
-
-  class ExamplePage extends React.Component {
-    render() {
-      return <UIExplorerExampleContainer module={exampleModule} title={title} />;
-    }
-  }
-
-  return ExamplePage;
-};
-
-module.exports = createExamplePage;

IntegrationTests/IntegrationTestHarnessTest.js

@@ -13,6 +13,7 @@
 
 var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   Text,
@@ -27,8 +28,8 @@ class IntegrationTestHarnessTest extends React.Component {
   };
 
   static propTypes = {
-    shouldThrow: React.PropTypes.bool,
-    waitOneFrame: React.PropTypes.bool,
+    shouldThrow: PropTypes.bool,
+    waitOneFrame: PropTypes.bool,
   };
 
   state = {

IntegrationTests/IntegrationTestsApp.js

@@ -22,7 +22,7 @@ var {
   View,
 } = ReactNative;
 
-// Keep this list in sync with UIExplorerIntegrationTests.m
+// Keep this list in sync with RNTesterIntegrationTests.m
 var TESTS = [
   require('./IntegrationTestHarnessTest'),
   require('./TimersTest'),
@@ -33,6 +33,7 @@ var TESTS = [
   require('./ImageCachePolicyTest'),
   require('./ImageSnapshotTest'),
   require('./PromiseTest'),
+  require('./SyncMethodTest'),
   require('./WebSocketTest'),
 ];
 

IntegrationTests/SyncMethodTest.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ * @providesModule SyncMethodTest
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var { View } = ReactNative;
+
+const {
+  TestModule,
+  RNTesterTestModule,
+} = ReactNative.NativeModules;
+
+
+class SyncMethodTest extends React.Component {
+  componentDidMount() {
+    if (RNTesterTestModule.echoString('test string value') !== 'test string value') {
+      throw new Error('Something wrong with sync method export');
+    }
+    if (RNTesterTestModule.methodThatReturnsNil() != null) {
+      throw new Error('Something wrong with sync method export');
+    }
+    TestModule.markTestCompleted();
+  }
+
+  render(): React.Element<any> {
+    return <View />;
+  }
+}
+
+SyncMethodTest.displayName = 'SyncMethodTest';
+
+module.exports = SyncMethodTest;

IntegrationTests/TimersTest.js

@@ -82,17 +82,17 @@ var TimersTest = React.createClass({
   },
 
   testClearMulti() {
-    var fails = [this.setTimeout(() => this._fail('testClearMulti-1'), 20)];
+    var fails = [];
+    fails.push(this.setTimeout(() => this._fail('testClearMulti-1'), 20));
     fails.push(this.setTimeout(() => this._fail('testClearMulti-2'), 50));
     var delayClear = this.setTimeout(() => this._fail('testClearMulti-3'), 50);
     fails.push(this.setTimeout(() => this._fail('testClearMulti-4'), 0));
-
-    this.setTimeout(this.testOrdering, 100); // Next test interleaved
-
     fails.push(this.setTimeout(() => this._fail('testClearMulti-5'), 10));
 
     fails.forEach((timeout) => this.clearTimeout(timeout));
     this.setTimeout(() => this.clearTimeout(delayClear), 20);
+
+    this.setTimeout(this.testOrdering, 50);
   },
 
   testOrdering() {
@@ -110,14 +110,14 @@ var TimersTest = React.createClass({
       () => this._fail('testOrdering-Anim, setTimeout 0 should happen before ' +
         'requestAnimationFrame')
     );
-    var fail50;
-    this.setTimeout(() => this.clearTimeout(fail50), 20);
-    fail50 = this.setTimeout(
-      () => this._fail('testOrdering-t50, setTimeout 20 should happen before ' +
-        'setTimeout 50'),
-      50
+    var fail25;
+    this.setTimeout(() => { this.clearTimeout(fail25); }, 20);
+    fail25 = this.setTimeout(
+      () => this._fail('testOrdering-t25, setTimeout 20 should happen before ' +
+        'setTimeout 25'),
+      25
     );
-    this.setTimeout(this.done, 75);
+    this.setTimeout(this.done, 50);
   },
 
   done() {

Jenkinsfile

@@ -52,11 +52,13 @@ def getParallelInstrumentationTests(testDir, parallelCount, imageName) {
     def testCount = sh(script: "ls ${testDir} | wc -l", returnStdout: true).trim().toInteger()
     def testPerParallel = testCount.intdiv(parallelCount) + 1
 
+    def ignoredTests = 'CatalystNativeJavaToJSReturnValuesTestCase|CatalystUIManagerTestCase|CatalystMeasureLayoutTest|CatalystNativeJavaToJSArgumentsTestCase|CatalystNativeJSToJavaParametersTestCase|ReactScrollViewTestCase|ReactHorizontalScrollViewTestCase|ViewRenderingTestCase';
+
     for (def x = 0; (x*testPerParallel) < testCount; x++) {
         def offset = x
         integrationTests["android integration tests: ${offset}"] = {
             run: {
-                runCmdOnDockerImage(imageName, "bash /app/ContainerShip/scripts/run-android-docker-instrumentation-tests.sh --offset=${offset} --count=${testPerParallel}", '--privileged --rm')
+                runCmdOnDockerImage(imageName, "bash /app/ContainerShip/scripts/run-android-docker-instrumentation-tests.sh --offset=${offset} --count=${testPerParallel} --ignore=\"${ignoredTests}\"", '--privileged --rm')
             }
         }
     }
@@ -106,7 +108,7 @@ def runStages() {
                 jsImageName = "${buildInfo.image.name}-js:${jsTag}"
                 androidImageName = "${buildInfo.image.name}-android:${androidTag}"
 
-                parallelInstrumentationTests = getParallelInstrumentationTests('./ReactAndroid/src/androidTest/java/com/facebook/react/tests', 1, androidImageName)
+                parallelInstrumentationTests = getParallelInstrumentationTests('./ReactAndroid/src/androidTest/java/com/facebook/react/tests', 3, androidImageName)
 
                 parallel(
                     'javascript build': {
@@ -148,9 +150,7 @@ def runStages() {
                             runCmdOnDockerImage(androidImageName, 'bash /app/ContainerShip/scripts/run-android-docker-unit-tests.sh', '--privileged --rm')
                         },
                         'android e2e tests': {
-                            // temporarily disable e2e tests, they have a high transient failure rate
-                            // runCmdOnDockerImage(androidImageName, 'bash /app/ContainerShip/scripts/run-ci-e2e-tests.sh --android --js', '--rm')
-                            echo "Android E2E tests have been temporarily disabled"
+                            runCmdOnDockerImage(androidImageName, 'bash /app/ContainerShip/scripts/run-ci-e2e-tests.sh --android --js', '--privileged --rm')
                         }
                     )
                 } catch(e) {

LICENSE-examples

@@ -1,9 +0,0 @@
-The examples provided by Facebook are for non-commercial testing and evaluation
-purposes only. Facebook reserves all rights not expressly granted.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
-FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
-ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Libraries/ART/ART.xcodeproj/project.pbxproj

@@ -25,6 +25,24 @@
 		0CF68B141AF0549300FF9E5C /* ARTShapeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */; };
 		0CF68B151AF0549300FF9E5C /* ARTSurfaceViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */; };
 		0CF68B161AF0549300FF9E5C /* ARTTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B041AF0549300FF9E5C /* ARTTextManager.m */; };
+		325CF7AD1E5F2ABA00AC9606 /* ARTBrush.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEC1AF0549300FF9E5C /* ARTBrush.m */; };
+		325CF7AE1E5F2ABA00AC9606 /* ARTLinearGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEE1AF0549300FF9E5C /* ARTLinearGradient.m */; };
+		325CF7AF1E5F2ABA00AC9606 /* ARTPattern.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF01AF0549300FF9E5C /* ARTPattern.m */; };
+		325CF7B01E5F2ABA00AC9606 /* ARTRadialGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF21AF0549300FF9E5C /* ARTRadialGradient.m */; };
+		325CF7B11E5F2ABA00AC9606 /* ARTSolidColor.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF41AF0549300FF9E5C /* ARTSolidColor.m */; };
+		325CF7B21E5F2ABA00AC9606 /* ARTGroupManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFA1AF0549300FF9E5C /* ARTGroupManager.m */; };
+		325CF7B31E5F2ABA00AC9606 /* ARTNodeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFC1AF0549300FF9E5C /* ARTNodeManager.m */; };
+		325CF7B41E5F2ABA00AC9606 /* ARTRenderableManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFE1AF0549300FF9E5C /* ARTRenderableManager.m */; };
+		325CF7B51E5F2ABA00AC9606 /* ARTShapeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */; };
+		325CF7B61E5F2ABA00AC9606 /* ARTSurfaceViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */; };
+		325CF7B71E5F2ABA00AC9606 /* ARTTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B041AF0549300FF9E5C /* ARTTextManager.m */; };
+		325CF7B81E5F2ABA00AC9606 /* ARTGroup.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68ADE1AF0549300FF9E5C /* ARTGroup.m */; };
+		325CF7B91E5F2ABA00AC9606 /* ARTNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE01AF0549300FF9E5C /* ARTNode.m */; };
+		325CF7BA1E5F2ABA00AC9606 /* ARTRenderable.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE21AF0549300FF9E5C /* ARTRenderable.m */; };
+		325CF7BB1E5F2ABA00AC9606 /* ARTShape.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE41AF0549300FF9E5C /* ARTShape.m */; };
+		325CF7BC1E5F2ABA00AC9606 /* ARTSurfaceView.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE61AF0549300FF9E5C /* ARTSurfaceView.m */; };
+		325CF7BD1E5F2ABA00AC9606 /* ARTText.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE81AF0549300FF9E5C /* ARTText.m */; };
+		325CF7BE1E5F2ABA00AC9606 /* RCTConvert+ART.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF71AF0549300FF9E5C /* RCTConvert+ART.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -37,6 +55,15 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
+		323A12851E5F266B004975B8 /* CopyFiles */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "include/$(PRODUCT_NAME)";
+			dstSubfolderSpec = 16;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
@@ -80,6 +107,7 @@
 		0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTSurfaceViewManager.m; sourceTree = "<group>"; };
 		0CF68B031AF0549300FF9E5C /* ARTTextManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTTextManager.h; sourceTree = "<group>"; };
 		0CF68B041AF0549300FF9E5C /* ARTTextManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTTextManager.m; sourceTree = "<group>"; };
+		323A12871E5F266B004975B8 /* libART-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libART-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -90,6 +118,13 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
+		323A12841E5F266B004975B8 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
@@ -123,6 +158,7 @@
 			isa = PBXGroup;
 			children = (
 				0CF68AC11AF0540F00FF9E5C /* libART.a */,
+				323A12871E5F266B004975B8 /* libART-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -183,6 +219,23 @@
 			productReference = 0CF68AC11AF0540F00FF9E5C /* libART.a */;
 			productType = "com.apple.product-type.library.static";
 		};
+		323A12861E5F266B004975B8 /* ART-tvOS */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 323A128D1E5F266B004975B8 /* Build configuration list for PBXNativeTarget "ART-tvOS" */;
+			buildPhases = (
+				323A12831E5F266B004975B8 /* Sources */,
+				323A12841E5F266B004975B8 /* Frameworks */,
+				323A12851E5F266B004975B8 /* CopyFiles */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = "ART-tvOS";
+			productName = "ART-tvOS";
+			productReference = 323A12871E5F266B004975B8 /* libART-tvOS.a */;
+			productType = "com.apple.product-type.library.static";
+		};
 /* End PBXNativeTarget section */
 
 /* Begin PBXProject section */
@@ -194,6 +247,10 @@
 					0CF68AC01AF0540F00FF9E5C = {
 						CreatedOnToolsVersion = 6.2;
 					};
+					323A12861E5F266B004975B8 = {
+						CreatedOnToolsVersion = 6.2;
+						ProvisioningStyle = Automatic;
+					};
 				};
 			};
 			buildConfigurationList = 0CF68ABC1AF0540F00FF9E5C /* Build configuration list for PBXProject "ART" */;
@@ -209,6 +266,7 @@
 			projectRoot = "";
 			targets = (
 				0CF68AC01AF0540F00FF9E5C /* ART */,
+				323A12861E5F266B004975B8 /* ART-tvOS */,
 			);
 		};
 /* End PBXProject section */
@@ -239,6 +297,31 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
+		323A12831E5F266B004975B8 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				325CF7B71E5F2ABA00AC9606 /* ARTTextManager.m in Sources */,
+				325CF7B21E5F2ABA00AC9606 /* ARTGroupManager.m in Sources */,
+				325CF7AF1E5F2ABA00AC9606 /* ARTPattern.m in Sources */,
+				325CF7BD1E5F2ABA00AC9606 /* ARTText.m in Sources */,
+				325CF7B31E5F2ABA00AC9606 /* ARTNodeManager.m in Sources */,
+				325CF7B81E5F2ABA00AC9606 /* ARTGroup.m in Sources */,
+				325CF7B41E5F2ABA00AC9606 /* ARTRenderableManager.m in Sources */,
+				325CF7BC1E5F2ABA00AC9606 /* ARTSurfaceView.m in Sources */,
+				325CF7B01E5F2ABA00AC9606 /* ARTRadialGradient.m in Sources */,
+				325CF7B61E5F2ABA00AC9606 /* ARTSurfaceViewManager.m in Sources */,
+				325CF7BB1E5F2ABA00AC9606 /* ARTShape.m in Sources */,
+				325CF7BA1E5F2ABA00AC9606 /* ARTRenderable.m in Sources */,
+				325CF7BE1E5F2ABA00AC9606 /* RCTConvert+ART.m in Sources */,
+				325CF7B91E5F2ABA00AC9606 /* ARTNode.m in Sources */,
+				325CF7B11E5F2ABA00AC9606 /* ARTSolidColor.m in Sources */,
+				325CF7AE1E5F2ABA00AC9606 /* ARTLinearGradient.m in Sources */,
+				325CF7AD1E5F2ABA00AC9606 /* ARTBrush.m in Sources */,
+				325CF7B51E5F2ABA00AC9606 /* ARTShapeManager.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
 /* End PBXSourcesBuildPhase section */
 
 /* Begin XCBuildConfiguration section */
@@ -334,6 +417,41 @@
 			};
 			name = Release;
 		};
+		323A128E1E5F266B004975B8 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_TESTABILITY = YES;
+				GCC_NO_COMMON_BLOCKS = YES;
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				SKIP_INSTALL = YES;
+				TVOS_DEPLOYMENT_TARGET = 9.2;
+			};
+			name = Debug;
+		};
+		323A128F1E5F266B004975B8 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				GCC_NO_COMMON_BLOCKS = YES;
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				SKIP_INSTALL = YES;
+				TVOS_DEPLOYMENT_TARGET = 9.2;
+			};
+			name = Release;
+		};
 /* End XCBuildConfiguration section */
 
 /* Begin XCConfigurationList section */
@@ -355,6 +473,15 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
+		323A128D1E5F266B004975B8 /* Build configuration list for PBXNativeTarget "ART-tvOS" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				323A128E1E5F266B004975B8 /* Debug */,
+				323A128F1E5F266B004975B8 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
 /* End XCConfigurationList section */
 	};
 	rootObject = 0CF68AB91AF0540F00FF9E5C /* Project object */;

Libraries/ART/ReactNativeART.js

@@ -15,6 +15,7 @@ var Path = require('ARTSerializablePath');
 var Transform = require('art/core/transform');
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
@@ -139,7 +140,7 @@ function childrenAsString(children) {
 
 class Surface extends React.Component {
   static childContextTypes = {
-    isInSurface: React.PropTypes.bool,
+    isInSurface: PropTypes.bool,
   };
 
   getChildContext() {
@@ -213,7 +214,7 @@ function extractOpacity(props) {
 
 class Group extends React.Component {
   static contextTypes = {
-    isInSurface: React.PropTypes.bool.isRequired,
+    isInSurface: PropTypes.bool.isRequired,
   };
 
   render() {

Libraries/AdSupport/AdSupportIOS.js

@@ -13,6 +13,20 @@
 
 var AdSupport = require('NativeModules').AdSupport;
 
+/**
+ * `AdSupport` provides access to the "advertising identifier". If you link this library
+ * in your project, you may need to justify your use for this identifier when submitting
+ * your application to the App Store.
+ *
+ * In order to use `AdSupport` in your project, you must link the `RCTAdSupport` library.
+ * In Xcode, you can manually add the `RCTAdSupport.m` and `RCTAdSupport.h` files from
+ * `node_modules/react-native/Libraries/AdSupport/` to the `Libraries/React/Base/` folder
+ * of your current project.
+ *
+ * You can refer to [Linking](docs/linking-libraries-ios.html) for help.
+ *
+ */
+
 module.exports = {
   getAdvertisingId: function(onSuccess: Function, onFailure: Function) {
     AdSupport.getAdvertisingId(onSuccess, onFailure);

Libraries/Animated/examples/style.css

@@ -14,8 +14,8 @@ html, h1, h2 {
   height: 50px;
   position: absolute;
   display: inline-block;
-  box-shadow: 0px 1px 2px #999;
-  text-shadow: 0px 1px 2px #999;
+  box-shadow: 0 1px 2px #999;
+  text-shadow: 0 1px 2px #999;
   background-image: url(pic1.jpg);
   background-size: cover;
   line-height: 80px;
@@ -34,7 +34,7 @@ html, h1, h2 {
 }
 
 div.code {
-  box-shadow: 0px 1px 2px #999;
+  box-shadow: 0 1px 2px #999;
   width: 600px;
   padding: 5px;
   position: relative;

Libraries/Animated/src/AnimatedImplementation.js

@@ -1138,12 +1138,12 @@ class AnimatedInterpolation extends AnimatedWithChildren {
         return value;
       }
       if (/deg$/.test(value)) {
-        const degrees = parseFloat(value, 10) || 0;
+        const degrees = parseFloat(value) || 0;
         const radians = degrees * Math.PI / 180.0;
         return radians;
       } else {
         // Assume radians
-        return parseFloat(value, 10) || 0;
+        return parseFloat(value) || 0;
       }
     });
   }

Libraries/Animated/src/__tests__/Animated-test.js

@@ -111,11 +111,6 @@ describe('Animated tests', () => {
 
 
     it('stops animation when detached', () => {
-      // jest environment doesn't have cancelAnimationFrame :(
-      if (!global.cancelAnimationFrame) {
-        global.cancelAnimationFrame = jest.fn();
-      }
-
       var anim = new Animated.Value(0);
       var callback = jest.fn();
 

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -55,11 +55,6 @@ describe('Native Animated', () => {
     nativeAnimatedModule.startListeningToAnimatedNodeValue = jest.fn();
     nativeAnimatedModule.stopAnimation = jest.fn();
     nativeAnimatedModule.stopListeningToAnimatedNodeValue = jest.fn();
-
-    // jest environment doesn't have cancelAnimationFrame :(
-    if (!global.cancelAnimationFrame) {
-      global.cancelAnimationFrame = jest.fn();
-    }
   });
 
   describe('Animated Value', () => {

Libraries/BatchedBridge/MessageQueue.js

@@ -44,8 +44,8 @@ const DEBUG_INFO_LIMIT = 32;
 class MessageQueue {
   _callableModules: {[key: string]: Object};
   _queue: [Array<number>, Array<number>, Array<any>, number];
-  _callbacks: [];
-  _callbackID: number;
+  _successCallbacks: Array<?Function>;
+  _failureCallbacks: Array<?Function>;
   _callID: number;
   _inCall: number;
   _lastFlush: number;
@@ -60,8 +60,8 @@ class MessageQueue {
   constructor() {
     this._callableModules = {};
     this._queue = [[], [], [], 0];
-    this._callbacks = [];
-    this._callbackID = 0;
+    this._successCallbacks = [];
+    this._failureCallbacks = [];
     this._callID = 0;
     this._lastFlush = 0;
     this._eventLoopStartTime = new Date().getTime();
@@ -143,22 +143,17 @@ class MessageQueue {
   enqueueNativeCall(moduleID: number, methodID: number, params: Array<any>, onFail: ?Function, onSucc: ?Function) {
     if (onFail || onSucc) {
       if (__DEV__) {
-        const callId = this._callbackID >> 1;
-        this._debugInfo[callId] = [moduleID, methodID];
-        if (callId > DEBUG_INFO_LIMIT) {
-          delete this._debugInfo[callId - DEBUG_INFO_LIMIT];
+        this._debugInfo[this._callID] = [moduleID, methodID];
+        if (this._callID > DEBUG_INFO_LIMIT) {
+          delete this._debugInfo[this._callID - DEBUG_INFO_LIMIT];
         }
       }
-      onFail && params.push(this._callbackID);
-      /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
-       * detected during the deployment of v0.38.0. To see the error, remove
-       * this comment and run flow */
-      this._callbacks[this._callbackID++] = onFail;
-      onSucc && params.push(this._callbackID);
-      /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
-       * detected during the deployment of v0.38.0. To see the error, remove
-       * this comment and run flow */
-      this._callbacks[this._callbackID++] = onSucc;
+      // Encode callIDs into pairs of callback identifiers by shifting left and using the rightmost bit
+      // to indicate fail (0) or success (1)
+      onFail && params.push(this._callID << 1);
+      onSucc && params.push((this._callID << 1) | 1);
+      this._successCallbacks[this._callID] = onSucc;
+      this._failureCallbacks[this._callID] = onFail;
     }
 
     if (__DEV__) {
@@ -255,13 +250,16 @@ class MessageQueue {
   __invokeCallback(cbID: number, args: Array<any>) {
     this._lastFlush = new Date().getTime();
     this._eventLoopStartTime = this._lastFlush;
-    const callback = this._callbacks[cbID];
+
+    // The rightmost bit of cbID indicates fail (0) or success (1), the other bits are the callID shifted left.
+    const callID = cbID >>> 1;
+    const callback = (cbID & 1) ? this._successCallbacks[callID] : this._failureCallbacks[callID];
 
     if (__DEV__) {
-      const debug = this._debugInfo[cbID >> 1];
+      const debug = this._debugInfo[callID];
       const module = debug && this._remoteModuleTable[debug[0]];
       const method = debug && this._remoteMethodTable[debug[0]][debug[1]];
-      if (callback == null) {
+      if (!callback) {
         let errorMessage = `Callback with id ${cbID}: ${module}.${method}() not found`;
         if (method) {
           errorMessage = `The callback ${method}() exists in module ${module}, `
@@ -278,21 +276,13 @@ class MessageQueue {
       }
       Systrace.beginEvent(
         `MessageQueue.invokeCallback(${profileName}, ${stringifySafe(args)})`);
-    } else {
-      if (!callback) {
-        return;
-      }
     }
 
-    /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
-     * detected during the deployment of v0.38.0. To see the error, remove this
-     * comment and run flow */
-    this._callbacks[cbID & ~1] = null;
-    /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
-     * detected during the deployment of v0.38.0. To see the error, remove this
-     * comment and run flow */
-    this._callbacks[cbID |  1] = null;
-    // $FlowIssue(>=0.35.0) #14551610
+    if (!callback) {
+      return;
+    }
+
+    this._successCallbacks[callID] = this._failureCallbacks[callID] = null;
     callback.apply(null, args);
 
     if (__DEV__) {

Libraries/CameraRoll/CameraRoll.js

@@ -8,42 +8,36 @@
  *
  * @providesModule CameraRoll
  * @flow
+ * @format
  */
 'use strict';
 
-// $FlowFixMe `checkPropTypes` is not in Flow's built in React typedefs yet.
-var {PropTypes, checkPropTypes} = require('React');
-var RCTCameraRollManager = require('NativeModules').CameraRollManager;
+const {PropTypes, checkPropTypes} = require('React');
+const RCTCameraRollManager = require('NativeModules').CameraRollManager;
 
-var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
-var deepFreezeAndThrowOnMutationInDev =
-  require('deepFreezeAndThrowOnMutationInDev');
-var invariant = require('fbjs/lib/invariant');
+const createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
+const invariant = require('fbjs/lib/invariant');
 
-var GROUP_TYPES_OPTIONS = [
-  'Album',
-  'All',
-  'Event',
-  'Faces',
-  'Library',
-  'PhotoStream',
-  'SavedPhotos', // default
-];
+const GROUP_TYPES_OPTIONS = {
+  Album: 'Album',
+  All: 'All',
+  Event: 'Event',
+  Faces: 'Faces',
+  Library: 'Library',
+  PhotoStream: 'PhotoStream',
+  SavedPhotos: '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));
+const ASSET_TYPE_OPTIONS = {
+  All: 'All',
+  Videos: 'Videos',
+  Photos: 'Photos',
+};
 
 /**
  * Shape of the param arg for the `getPhotos` function.
  */
-var getPhotosParamChecker = createStrictShapeTypeChecker({
+const getPhotosParamChecker = createStrictShapeTypeChecker({
   /**
    * The number of photos wanted in reverse order of the photo application
    * (i.e. most recent first for SavedPhotos).
@@ -59,7 +53,7 @@ var getPhotosParamChecker = createStrictShapeTypeChecker({
   /**
    * Specifies which group types to filter the results to.
    */
-  groupTypes: PropTypes.oneOf(GROUP_TYPES_OPTIONS),
+  groupTypes: PropTypes.oneOf(Object.keys(GROUP_TYPES_OPTIONS)),
 
   /**
    * Specifies filter on group names, like 'Recent Photos' or custom album
@@ -70,7 +64,7 @@ var getPhotosParamChecker = createStrictShapeTypeChecker({
   /**
   * Specifies filter on asset type
   */
-  assetType: PropTypes.oneOf(ASSET_TYPE_OPTIONS),
+  assetType: PropTypes.oneOf(Object.keys(ASSET_TYPE_OPTIONS)),
 
   /**
    * Filter by mimetype (e.g. image/jpeg).
@@ -81,28 +75,30 @@ var getPhotosParamChecker = createStrictShapeTypeChecker({
 /**
  * Shape of the return value of the `getPhotos` function.
  */
-var getPhotosReturnChecker = createStrictShapeTypeChecker({
+const getPhotosReturnChecker = createStrictShapeTypeChecker({
   // $FlowFixMe(>=0.41.0)
-  edges: PropTypes.arrayOf(createStrictShapeTypeChecker({
-    node: createStrictShapeTypeChecker({
-      type: PropTypes.string.isRequired,
-      group_name: PropTypes.string.isRequired,
-      image: createStrictShapeTypeChecker({
-        uri: PropTypes.string.isRequired,
-        height: PropTypes.number.isRequired,
-        width: PropTypes.number.isRequired,
-        isStored: PropTypes.bool,
+  edges: PropTypes.arrayOf(
+    createStrictShapeTypeChecker({
+      node: createStrictShapeTypeChecker({
+        type: PropTypes.string.isRequired,
+        group_name: PropTypes.string.isRequired,
+        image: createStrictShapeTypeChecker({
+          uri: PropTypes.string.isRequired,
+          height: PropTypes.number.isRequired,
+          width: PropTypes.number.isRequired,
+          isStored: PropTypes.bool,
+        }).isRequired,
+        timestamp: PropTypes.number.isRequired,
+        location: createStrictShapeTypeChecker({
+          latitude: PropTypes.number,
+          longitude: PropTypes.number,
+          altitude: PropTypes.number,
+          heading: PropTypes.number,
+          speed: PropTypes.number,
+        }),
       }).isRequired,
-      timestamp: PropTypes.number.isRequired,
-      location: createStrictShapeTypeChecker({
-        latitude: PropTypes.number,
-        longitude: PropTypes.number,
-        altitude: PropTypes.number,
-        heading: PropTypes.number,
-        speed: PropTypes.number,
-      }),
-    }).isRequired,
-  })).isRequired,
+    }),
+  ).isRequired,
   page_info: createStrictShapeTypeChecker({
     has_next_page: PropTypes.bool.isRequired,
     start_cursor: PropTypes.string,
@@ -117,17 +113,18 @@ var getPhotosReturnChecker = createStrictShapeTypeChecker({
  *
  * ### Permissions
  * The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
- * Fill out the `NSCameraUsageDescription` key in your `Info.plist` with a string that describes how your
- * app will use this data. This key will appear as `Privacy - Camera Usage Description` in Xcode.
+ * Add the `NSPhotoLibraryUsageDescription` key in your `Info.plist` with a string that describes how your
+ * app will use this data. This key will appear as `Privacy - Photo Library Usage Description` in Xcode.
  *
  */
 class CameraRoll {
-
-  static GroupTypesOptions: Array<string>;
-  static AssetTypeOptions: Array<string>;
+  static GroupTypesOptions: Object = GROUP_TYPES_OPTIONS;
+  static AssetTypeOptions: Object = ASSET_TYPE_OPTIONS;
 
   static saveImageWithTag(tag: string): Promise<Object> {
-    console.warn('CameraRoll.saveImageWithTag is deprecated. Use CameraRoll.saveToCameraRoll instead');
+    console.warn(
+      'CameraRoll.saveImageWithTag is deprecated. Use CameraRoll.saveToCameraRoll instead',
+    );
     return this.saveToCameraRoll(tag, 'photo');
   }
 
@@ -145,16 +142,19 @@ class CameraRoll {
    *
    * Returns a Promise which will resolve with the new URI.
    */
-  static saveToCameraRoll(tag: string, type?: 'photo' | 'video'): Promise<Object> {
+  static saveToCameraRoll(
+    tag: string,
+    type?: 'photo' | 'video',
+  ): Promise<Object> {
     invariant(
       typeof tag === 'string',
-      'CameraRoll.saveToCameraRoll must be a valid string.'
+      'CameraRoll.saveToCameraRoll must be a valid string.',
     );
 
     invariant(
       type === 'photo' || type === 'video' || type === undefined,
       // $FlowFixMe(>=0.28.0)
-      `The second argument to saveToCameraRoll must be 'photo' or 'video'. You passed ${type}`
+      `The second argument to saveToCameraRoll must be 'photo' or 'video'. You passed ${type}`,
     );
 
     let mediaType = 'photo';
@@ -215,32 +215,39 @@ class CameraRoll {
    */
   static getPhotos(params) {
     if (__DEV__) {
-      checkPropTypes({params: getPhotosParamChecker}, {params}, 'params', 'CameraRoll.getPhotos');
+      checkPropTypes(
+        {params: getPhotosParamChecker},
+        {params},
+        'params',
+        'CameraRoll.getPhotos',
+      );
     }
     if (arguments.length > 1) {
-      console.warn('CameraRoll.getPhotos(tag, success, error) is deprecated.  Use the returned Promise instead');
+      console.warn(
+        'CameraRoll.getPhotos(tag, success, error) is deprecated.  Use the returned Promise instead',
+      );
       let successCallback = arguments[1];
       if (__DEV__) {
         const callback = arguments[1];
-        successCallback = (response) => {
+        successCallback = response => {
           checkPropTypes(
             {response: getPhotosReturnChecker},
             {response},
             'response',
-            'CameraRoll.getPhotos callback'
+            'CameraRoll.getPhotos callback',
           );
           callback(response);
         };
       }
-      const errorCallback = arguments[2] || ( () => {} );
-      RCTCameraRollManager.getPhotos(params).then(successCallback, errorCallback);
+      const errorCallback = arguments[2] || (() => {});
+      RCTCameraRollManager.getPhotos(params).then(
+        successCallback,
+        errorCallback,
+      );
     }
     // TODO: Add the __DEV__ check back in to verify the Promise result
     return RCTCameraRollManager.getPhotos(params);
   }
 }
 
-CameraRoll.GroupTypesOptions = GROUP_TYPES_OPTIONS;
-CameraRoll.AssetTypeOptions = ASSET_TYPE_OPTIONS;
-
 module.exports = CameraRoll;

Libraries/CameraRoll/RCTCameraRoll.xcodeproj/project.pbxproj

@@ -235,7 +235,6 @@
 				CLANG_STATIC_ANALYZER_MODE = deep;
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/UIExplorer-gjaibsjtheitasdxdtcvxxqavkvy/Build/Products/Debug-iphoneos",
 				);
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RCTCameraRoll;
@@ -249,7 +248,6 @@
 				CLANG_STATIC_ANALYZER_MODE = deep;
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/UIExplorer-gjaibsjtheitasdxdtcvxxqavkvy/Build/Products/Debug-iphoneos",
 				);
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RCTCameraRoll;

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -15,15 +15,13 @@ const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-const PropTypes = React.PropTypes;
-
 const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';

Libraries/Components/Button.js

@@ -14,6 +14,7 @@
 const ColorPropType = require('ColorPropType');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TouchableNativeFeedback = require('TouchableNativeFeedback');
@@ -62,11 +63,11 @@ class Button extends React.Component {
     /**
      * Text to display inside the button
      */
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
     /**
      * Text to display for blindness accessibility features
      */
-    accessibilityLabel: React.PropTypes.string,
+    accessibilityLabel: PropTypes.string,
     /**
      * Color of the text (iOS), or background color of the button (Android)
      */
@@ -74,15 +75,15 @@ class Button extends React.Component {
     /**
      * If true, disable all interactions for this component.
      */
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
      * Handler to be called when the user taps the button
      */
-    onPress: React.PropTypes.func.isRequired,
+    onPress: PropTypes.func.isRequired,
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: React.PropTypes.string,
+    testID: PropTypes.string,
   };
 
   render() {
@@ -124,7 +125,7 @@ class Button extends React.Component {
         disabled={disabled}
         onPress={onPress}>
         <View style={buttonStyles}>
-          <Text style={textStyles}>{formattedTitle}</Text>
+          <Text style={textStyles} disabled={disabled}>{formattedTitle}</Text>
         </View>
       </Touchable>
     );

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -15,15 +15,13 @@
 
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-const PropTypes = React.PropTypes;
-
 type DefaultProps = {
   mode: 'date' | 'time' | 'datetime',
 };

Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js

@@ -52,7 +52,7 @@ class DatePickerAndroid {
    *
    *   - `date` (`Date` object or timestamp in milliseconds) - date to show by default
    *   - `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
-   *   - `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected
+   *   - `maxDate` (`Date` object or timestamp in milliseconds) - maximum date that can be selected
    *   - `mode` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker mode to calendar/spinner/default
    *     - 'calendar': Show a date picker in calendar mode.
    *     - 'spinner': Show a date picker in spinner mode.

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -14,21 +14,19 @@ var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StatusBar = require('StatusBar');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
-
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var RK_DRAWER_REF = 'drawerlayout';
 var INNERVIEW_REF = 'innerView';
 
@@ -81,7 +79,7 @@ var DrawerLayoutAndroid = React.createClass({
      *   - 'none' (the default), drags do not dismiss the keyboard.
      *   - 'on-drag', the keyboard is dismissed when a drag begins.
      */
-    keyboardDismissMode: ReactPropTypes.oneOf([
+    keyboardDismissMode: PropTypes.oneOf([
       'none', // default
       'on-drag',
     ]),
@@ -100,7 +98,7 @@ var DrawerLayoutAndroid = React.createClass({
     /**
      * Specifies the side of the screen from which the drawer will slide in.
      */
-    drawerPosition: ReactPropTypes.oneOf([
+    drawerPosition: PropTypes.oneOf([
       DrawerConsts.DrawerPosition.Left,
       DrawerConsts.DrawerPosition.Right
     ]),
@@ -108,7 +106,7 @@ var DrawerLayoutAndroid = React.createClass({
      * Specifies the width of the drawer, more precisely the width of the view that be pulled in
      * from the edge of the window.
      */
-    drawerWidth: ReactPropTypes.number,
+    drawerWidth: PropTypes.number,
     /**
      * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
      * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
@@ -116,7 +114,7 @@ var DrawerLayoutAndroid = React.createClass({
      * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
      * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
      */
-    drawerLockMode: ReactPropTypes.oneOf([
+    drawerLockMode: PropTypes.oneOf([
       'unlocked',
       'locked-closed',
       'locked-open'
@@ -124,7 +122,7 @@ var DrawerLayoutAndroid = React.createClass({
     /**
      * Function called whenever there is an interaction with the navigation view.
      */
-    onDrawerSlide: ReactPropTypes.func,
+    onDrawerSlide: PropTypes.func,
     /**
      * Function called when the drawer state has changed. The drawer can be in 3 states:
      * - idle, meaning there is no interaction with the navigation view happening at the time
@@ -132,19 +130,19 @@ var DrawerLayoutAndroid = React.createClass({
      * - settling, meaning that there was an interaction with the navigation view, and the
      * navigation view is now finishing its closing or opening animation
      */
-    onDrawerStateChanged: ReactPropTypes.func,
+    onDrawerStateChanged: PropTypes.func,
     /**
      * Function called whenever the navigation view has been opened.
      */
-    onDrawerOpen: ReactPropTypes.func,
+    onDrawerOpen: PropTypes.func,
     /**
      * Function called whenever the navigation view has been closed.
      */
-    onDrawerClose: ReactPropTypes.func,
+    onDrawerClose: PropTypes.func,
     /**
      * The navigation view that will be rendered to the side of the screen and can be pulled in.
      */
-    renderNavigationView: ReactPropTypes.func.isRequired,
+    renderNavigationView: PropTypes.func.isRequired,
 
     /**
      * Make the drawer take the entire screen and draw the background of the

Libraries/Components/Keyboard/Keyboard.js

@@ -99,6 +99,9 @@ let Keyboard = {
    * - `keyboardWillChangeFrame`
    * - `keyboardDidChangeFrame`
    *
+   * Note that if you set `android:windowSoftInputMode` to `adjustResize`  or `adjustNothing`,
+   * only `keyboardDidShow` and `keyboardDidHide` events will available on Android.
+   *
    * @param {function} callback function to be called when the event fires.
    */
   addListener(eventName: KeyboardEventName, callback: KeyboardEventListener) {

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -15,13 +15,11 @@ const Keyboard = require('Keyboard');
 const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
-const PropTypes = React.PropTypes;
-
 import type EmitterSubscription from 'EmitterSubscription';
 
 type Rect = {

Libraries/Components/LazyRenderer.js

@@ -11,13 +11,14 @@
 'use strict';
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 
 var LazyRenderer = React.createClass({
   mixin: [TimerMixin],
 
   propTypes: {
-    render: React.PropTypes.func.isRequired,
+    render: PropTypes.func.isRequired,
   },
 
   componentWillMount: function(): void {

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -15,13 +15,13 @@ var EventEmitter = require('EventEmitter');
 var Image = require('Image');
 var RCTNavigatorManager = require('NativeModules').NavigatorManager;
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var TVEventHandler = require('TVEventHandler');
 var View = require('View');
-
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var invariant = require('fbjs/lib/invariant');
 var logError = require('logError');
@@ -31,8 +31,6 @@ const keyMirror = require('fbjs/lib/keyMirror');
 
 var TRANSITIONER_REF = 'transitionerRef';
 
-var PropTypes = React.PropTypes;
-
 var __uid = 0;
 function getuid() {
   return __uid++;
@@ -134,7 +132,7 @@ type Event = Object;
  * animations and behavior from UIKIt.
  *
  * As the name implies, it is only available on iOS. Take a look at
- * [`React Navigation`](https://reactnavigation.org/) for a cross-platform 
+ * [`React Navigation`](https://reactnavigation.org/) for a cross-platform
  * solution in JavaScript, or check out either of these components for native
  * solutions: [native-navigation](http://airbnb.io/native-navigation/),
  * [react-native-navigation](https://github.com/wix/react-native-navigation).
@@ -589,8 +587,8 @@ var NavigatorIOS = React.createClass({
   },
 
   childContextTypes: {
-    onFocusRequested: React.PropTypes.func,
-    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
+    onFocusRequested: PropTypes.func,
+    focusEmitter: PropTypes.instanceOf(EventEmitter),
   },
 
   _tryLockNavigator: function(cb: () => void) {

Libraries/Components/Picker/Picker.js

@@ -17,6 +17,7 @@ var PickerIOS = require('PickerIOS');
 var PickerAndroid = require('PickerAndroid');
 var Platform = require('Platform');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
 var UnimplementedView = require('UnimplementedView');
@@ -33,12 +34,50 @@ var pickerStyleType = StyleSheetPropType({
 var MODE_DIALOG = 'dialog';
 var MODE_DROPDOWN = 'dropdown';
 
+/**
+ * Individual selectable item in a Picker.
+ */
+class PickerItem extends React.Component {
+ props: {
+  label: string,
+  value?: any,
+  color?: ColorPropType,
+  testID?: string,
+ };
+
+ static propTypes = {
+   /**
+    * Text to display for this item.
+    */
+   label: PropTypes.string.isRequired,
+   /**
+    * The value to be passed to picker's `onValueChange` callback when
+    * this item is selected. Can be a string or an integer.
+    */
+   value: PropTypes.any,
+   /**
+    * Color of this item's text.
+    * @platform android
+    */
+   color: ColorPropType,
+   /**
+    * Used to locate the item in end-to-end tests.
+    */
+   testID: PropTypes.string,
+ };
+
+ render() {
+   // The items are not rendered directly
+   throw null;
+ }
+}
+
 /**
  * Renders the native picker component on iOS and Android. Example:
  *
  *     <Picker
  *       selectedValue={this.state.language}
- *       onValueChange={(lang) => this.setState({language: lang})}>
+ *       onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  *       <Picker.Item label="Java" value="java" />
  *       <Picker.Item label="JavaScript" value="js" />
  *     </Picker>
@@ -65,6 +104,8 @@ class Picker extends React.Component {
   */
  static MODE_DROPDOWN = MODE_DROPDOWN;
 
+ static Item = PickerItem;
+
  static defaultProps = {
    mode: MODE_DIALOG,
  };
@@ -76,19 +117,19 @@ class Picker extends React.Component {
    /**
     * Value matching value of one of the items. Can be a string or an integer.
     */
-   selectedValue: React.PropTypes.any,
+   selectedValue: PropTypes.any,
    /**
     * Callback for when an item is selected. This is called with the following parameters:
     *   - `itemValue`: the `value` prop of the item that was selected
     *   - `itemPosition`: the index of the selected item in this picker
     */
-   onValueChange: React.PropTypes.func,
+   onValueChange: PropTypes.func,
    /**
     * If set to false, the picker will be disabled, i.e. the user will not be able to make a
     * selection.
     * @platform android
     */
-   enabled: React.PropTypes.bool,
+   enabled: PropTypes.bool,
    /**
     * On Android, specifies how to display the selection items when the user taps on the picker:
     *
@@ -97,7 +138,7 @@ class Picker extends React.Component {
     *
     * @platform android
     */
-   mode: React.PropTypes.oneOf(['dialog', 'dropdown']),
+   mode: PropTypes.oneOf(['dialog', 'dropdown']),
    /**
     * Style to apply to each of the item labels.
     * @platform ios
@@ -107,11 +148,11 @@ class Picker extends React.Component {
     * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
     * @platform android
     */
-   prompt: React.PropTypes.string,
+   prompt: PropTypes.string,
    /**
     * Used to locate this view in end-to-end tests.
     */
-   testID: React.PropTypes.string,
+   testID: PropTypes.string,
  };
 
  render() {
@@ -127,43 +168,4 @@ class Picker extends React.Component {
  }
 }
 
-/**
- * Individual selectable item in a Picker.
- */
-// $FlowFixMe found when converting React.createClass to ES6
-Picker.Item = class extends React.Component {
- props: {
-  label: string,
-  value?: any,
-  color?: ColorPropType,
-  testID?: string,
- };
-
- static propTypes = {
-   /**
-    * Text to display for this item.
-    */
-   label: React.PropTypes.string.isRequired,
-   /**
-    * The value to be passed to picker's `onValueChange` callback when
-    * this item is selected. Can be a string or an integer.
-    */
-   value: React.PropTypes.any,
-   /**
-    * Color of this item's text.
-    * @platform android
-    */
-   color: ColorPropType,
-   /**
-    * Used to locate the item in end-to-end tests.
-    */
-   testID: React.PropTypes.string,
- };
-
- render() {
-   // The items are not rendered directly
-   throw null;
- }
-};
-
 module.exports = Picker;

Libraries/Components/Picker/PickerIOS.ios.js

@@ -14,6 +14,7 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
@@ -30,8 +31,8 @@ var PickerIOS = React.createClass({
   propTypes: {
     ...ViewPropTypes,
     itemStyle: itemStylePropType,
-    onValueChange: React.PropTypes.func,
-    selectedValue: React.PropTypes.any, // string or integer basically
+    onValueChange: PropTypes.func,
+    selectedValue: PropTypes.any, // string or integer basically
   },
 
   getInitialState: function() {
@@ -99,9 +100,9 @@ var PickerIOS = React.createClass({
 
 PickerIOS.Item = class extends React.Component {
   static propTypes = {
-    value: React.PropTypes.any, // string or integer basically
-    label: React.PropTypes.string,
-    color: React.PropTypes.string,
+    value: PropTypes.any, // string or integer basically
+    label: PropTypes.string,
+    color: PropTypes.string,
   };
 
   render() {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -12,13 +12,12 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
-const ViewPropTypes = require('ViewPropTypes');
+var PropTypes = require('prop-types');
+var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var STYLE_ATTRIBUTES = [
   'Horizontal',
   'Normal',
@@ -38,7 +37,7 @@ var indeterminateType = function(props, propName, componentName) {
     }
   };
 
-  return ReactPropTypes.bool(props, propName, componentName) || checker();
+  return PropTypes.bool(props, propName, componentName) || checker();
 };
 
 /**
@@ -78,7 +77,7 @@ var ProgressBarAndroid = React.createClass({
      * - SmallInverse
      * - LargeInverse
      */
-    styleAttr: ReactPropTypes.oneOf(STYLE_ATTRIBUTES),
+    styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
     /**
      * If the progress bar will show indeterminate progress. Note that this
      * can only be false if styleAttr is Horizontal.
@@ -87,7 +86,7 @@ var ProgressBarAndroid = React.createClass({
     /**
      * The progress value (between 0 and 1).
      */
-    progress: ReactPropTypes.number,
+    progress: PropTypes.number,
     /**
      * Color of the progress bar.
      */
@@ -95,7 +94,7 @@ var ProgressBarAndroid = React.createClass({
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: ReactPropTypes.string,
+    testID: PropTypes.string,
   },
 
   getDefaultProps: function() {

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -14,13 +14,12 @@
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */

Libraries/Components/RefreshControl/RefreshControl.js

@@ -15,6 +15,7 @@ const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
@@ -83,11 +84,11 @@ const RefreshControl = React.createClass({
     /**
      * Called when the view starts refreshing.
      */
-    onRefresh: React.PropTypes.func,
+    onRefresh: PropTypes.func,
     /**
      * Whether the view should be indicating an active refresh.
      */
-    refreshing: React.PropTypes.bool.isRequired,
+    refreshing: PropTypes.bool.isRequired,
     /**
      * The color of the refresh indicator.
      * @platform ios
@@ -102,17 +103,17 @@ const RefreshControl = React.createClass({
      * The title displayed under the refresh indicator.
      * @platform ios
      */
-    title: React.PropTypes.string,
+    title: PropTypes.string,
     /**
      * Whether the pull to refresh functionality is enabled.
      * @platform android
      */
-    enabled: React.PropTypes.bool,
+    enabled: PropTypes.bool,
     /**
      * The colors (at least one) that will be used to draw the refresh indicator.
      * @platform android
      */
-    colors: React.PropTypes.arrayOf(ColorPropType),
+    colors: PropTypes.arrayOf(ColorPropType),
     /**
      * The background color of the refresh indicator.
      * @platform android
@@ -122,12 +123,12 @@ const RefreshControl = React.createClass({
      * Size of the refresh indicator, see RefreshControl.SIZE.
      * @platform android
      */
-    size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
+    size: PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
     /**
      * Progress view top offset
      * @platform android
      */
-    progressViewOffset: React.PropTypes.number,
+    progressViewOffset: PropTypes.number,
   },
 
   _nativeRef: (null: any),

Libraries/Components/ScrollResponder.js

@@ -13,18 +13,19 @@
 
 var Dimensions = require('Dimensions');
 var FrameRateLogger = require('FrameRateLogger');
-var Platform = require('Platform');
 var Keyboard = require('Keyboard');
 var ReactNative = require('ReactNative');
 var Subscribable = require('Subscribable');
 var TextInputState = require('TextInputState');
 var UIManager = require('UIManager');
-var warning = require('fbjs/lib/warning');
-
-var { getInstanceFromNode } = require('ReactNativeComponentTree');
-var { ScrollViewManager } = require('NativeModules');
 
 var invariant = require('fbjs/lib/invariant');
+var nullthrows = require('fbjs/lib/nullthrows');
+var performanceNow = require('fbjs/lib/performanceNow');
+var warning = require('fbjs/lib/warning');
+
+var { ScrollViewManager } = require('NativeModules');
+var { getInstanceFromNode } = require('ReactNativeComponentTree');
 
 /**
  * Mixin that can be integrated in order to handle scrolling that plays well
@@ -321,7 +322,7 @@ var ScrollResponderMixin = {
    * Invoke this from an `onMomentumScrollBegin` event.
    */
   scrollResponderHandleMomentumScrollBegin: function(e: Event) {
-    this.state.lastMomentumScrollBeginTime = Date.now();
+    this.state.lastMomentumScrollBeginTime = performanceNow();
     this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
   },
 
@@ -330,7 +331,7 @@ var ScrollResponderMixin = {
    */
   scrollResponderHandleMomentumScrollEnd: function(e: Event) {
     FrameRateLogger.endScroll();
-    this.state.lastMomentumScrollEndTime = Date.now();
+    this.state.lastMomentumScrollEndTime = performanceNow();
     this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
   },
 
@@ -371,7 +372,7 @@ var ScrollResponderMixin = {
    * a touch has just started or ended.
    */
   scrollResponderIsAnimating: function(): boolean {
-    var now = Date.now();
+    var now = performanceNow();
     var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
     var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
       this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
@@ -411,7 +412,7 @@ var ScrollResponderMixin = {
       ({x, y, animated} = x || {});
     }
     UIManager.dispatchViewManagerCommand(
-      this.scrollResponderGetScrollableNode(),
+      nullthrows(this.scrollResponderGetScrollableNode()),
       UIManager.RCTScrollView.Commands.scrollTo,
       [x || 0, y || 0, animated !== false],
     );

Libraries/Components/ScrollView/ScrollView.js

@@ -16,6 +16,7 @@ const ColorPropType = require('ColorPropType');
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const Platform = require('Platform');
 const PointPropType = require('PointPropType');
+const PropTypes = require('prop-types');
 const React = require('React');
 const ReactNative = require('ReactNative');
 const ScrollResponder = require('ScrollResponder');
@@ -30,7 +31,6 @@ const dismissKeyboard = require('dismissKeyboard');
 const flattenStyle = require('flattenStyle');
 const invariant = require('fbjs/lib/invariant');
 const processDecelerationRate = require('processDecelerationRate');
-const PropTypes = React.PropTypes;
 const requireNativeComponent = require('requireNativeComponent');
 
 /**
@@ -56,7 +56,7 @@ const requireNativeComponent = require('requireNativeComponent');
  *
  * On the other hand, this has a performance downside. Imagine you have a very
  * long list of items you want to display, maybe several screens worth of
- * content. Creating JS components and native views for everythign all at once,
+ * content. Creating JS components and native views for everything all at once,
  * much of which may not even be shown, will contribute to slow rendering and
  * increased memory usage.
  *
@@ -436,7 +436,7 @@ const ScrollView = React.createClass({
    *
    * Example:
    *
-   * `scrollTo({x: 0; y: 0; animated: true})`
+   * `scrollTo({x: 0, y: 0, animated: true})`
    *
    * Note: The weird function signature is due to the fact that, for historical reasons,
    * the function also accepts separate arguments as an alternative to the options object.
@@ -650,9 +650,7 @@ const ScrollView = React.createClass({
         {...contentSizeChangeProps}
         ref={this._setInnerViewRef}
         style={contentContainerStyle}
-        removeClippedSubviews={
-          hasStickyHeaders && Platform.OS === 'android' ? false : this.props.removeClippedSubviews
-        }
+        removeClippedSubviews={this.props.removeClippedSubviews}
         collapsable={false}>
         {children}
       </ScrollContentContainerViewClass>;

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -13,13 +13,12 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 type DefaultProps = {
   values: Array<string>,
   enabled: boolean,

Libraries/Components/Slider/Slider.js

@@ -17,13 +17,12 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 type Event = Object;
 
 /**
@@ -126,8 +125,9 @@ var Slider = React.createClass({
     onValueChange: PropTypes.func,
 
     /**
-     * Callback called when the user finishes changing the value (e.g. when
-     * the slider is released).
+     * Callback that is called when the user releases the slider,
+     * regardless if the value has changed. The current value is passed
+     * as an argument to the callback handler.
      */
     onSlidingComplete: PropTypes.func,
 

Libraries/Components/StaticRenderer.js

@@ -13,6 +13,8 @@
 
 var React = require('React');
 
+var PropTypes = require('prop-types');
+
 class StaticRenderer extends React.Component {
   props: {
     shouldUpdate: boolean,
@@ -20,8 +22,8 @@ class StaticRenderer extends React.Component {
   };
 
   static propTypes = {
-    shouldUpdate: React.PropTypes.bool.isRequired,
-    render: React.PropTypes.func.isRequired,
+    shouldUpdate: PropTypes.bool.isRequired,
+    render: PropTypes.func.isRequired,
   };
 
   shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {

Libraries/Components/StatusBar/StatusBar.js

@@ -12,6 +12,7 @@
 'use strict';
 
 const React = require('React');
+const PropTypes = require('prop-types');
 const ColorPropType = require('ColorPropType');
 const Platform = require('Platform');
 
@@ -253,12 +254,12 @@ class StatusBar extends React.Component {
     /**
      * If the status bar is hidden.
      */
-    hidden: React.PropTypes.bool,
+    hidden: PropTypes.bool,
     /**
      * If the transition between status bar property changes should be animated.
      * Supported for backgroundColor, barStyle and hidden.
      */
-    animated: React.PropTypes.bool,
+    animated: PropTypes.bool,
     /**
      * The background color of the status bar.
      * @platform android
@@ -271,11 +272,11 @@ class StatusBar extends React.Component {
      *
      * @platform android
      */
-    translucent: React.PropTypes.bool,
+    translucent: PropTypes.bool,
     /**
      * Sets the color of the status bar text.
      */
-    barStyle: React.PropTypes.oneOf([
+    barStyle: PropTypes.oneOf([
       'default',
       'light-content',
       'dark-content',
@@ -285,14 +286,14 @@ class StatusBar extends React.Component {
      *
      * @platform ios
      */
-    networkActivityIndicatorVisible: React.PropTypes.bool,
+    networkActivityIndicatorVisible: PropTypes.bool,
     /**
      * The transition effect when showing and hiding the status bar using the `hidden`
      * prop. Defaults to 'fade'.
      *
      * @platform ios
      */
-    showHideTransition: React.PropTypes.oneOf([
+    showHideTransition: PropTypes.oneOf([
       'fade',
       'slide',
     ]),

Libraries/Components/Switch/Switch.js

@@ -15,13 +15,12 @@ var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var Platform = require('Platform');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 const ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var { PropTypes } = React;
-
 type DefaultProps = {
   value: boolean,
   disabled: boolean,

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -13,6 +13,7 @@
 
 var ColorPropType = require('ColorPropType');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var TabBarItemIOS = require('TabBarItemIOS');
 const ViewPropTypes = require('ViewPropTypes');
@@ -55,7 +56,7 @@ class TabBarIOS extends React.Component {
     /**
      * A Boolean value that indicates whether the tab bar is translucent
      */
-    translucent: React.PropTypes.bool,
+    translucent: PropTypes.bool,
     /**
      * Specifies tab bar item positioning. Available values are:
      * - fill - distributes items across the entire width of the tab bar
@@ -65,7 +66,7 @@ class TabBarIOS extends React.Component {
      * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
      * it defaults to center.
      */
-    itemPositioning: React.PropTypes.oneOf(['fill', 'center', 'auto']),
+    itemPositioning: PropTypes.oneOf(['fill', 'center', 'auto']),
   };
 
   render() {

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -14,6 +14,7 @@
 var ColorPropType = require('ColorPropType');
 var Image = require('Image');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
@@ -28,9 +29,9 @@ class TabBarItemIOS extends React.Component {
     /**
      * Little red bubble that sits at the top right of the icon.
      */
-    badge: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
+    badge: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
     ]),
     /**
      * Background color for the badge. Available since iOS 10.
@@ -41,7 +42,7 @@ class TabBarItemIOS extends React.Component {
      * using them, the title and selectedIcon will be overridden with the
      * system ones.
      */
-    systemIcon: React.PropTypes.oneOf([
+    systemIcon: PropTypes.oneOf([
       'bookmarks',
       'contacts',
       'downloads',
@@ -68,17 +69,17 @@ class TabBarItemIOS extends React.Component {
      * Callback when this tab is being selected, you should change the state of your
      * component to set selected={true}.
      */
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
     /**
      * If set to true it renders the image as original,
      * it defaults to being displayed as a template
      */
-    renderAsOriginal: React.PropTypes.bool,
+    renderAsOriginal: PropTypes.bool,
     /**
      * 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,
+    selected: PropTypes.bool,
     /**
      * React style object.
      */
@@ -87,14 +88,14 @@ class TabBarItemIOS extends React.Component {
      * Text that appears under the icon. It is ignored when a system icon
      * is defined.
      */
-    title: React.PropTypes.string,
+    title: PropTypes.string,
     /**
      *(Apple TV only)* When set to true, this view will be focusable
      * and navigable using the Apple TV remote.
      *
      * @platform ios
      */
-    isTVSelectable: React.PropTypes.bool,
+    isTVSelectable: PropTypes.bool,
   };
 
   state = {

Libraries/Components/TextInput/TextInput.js

@@ -17,6 +17,7 @@ const EventEmitter = require('EventEmitter');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
@@ -31,8 +32,6 @@ const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
 const warning = require('fbjs/lib/warning');
 
-const PropTypes = React.PropTypes;
-
 const onlyMultiline = {
   onTextInput: true,
   children: true,
@@ -75,7 +74,7 @@ const DataDetectorTypes = [
  * import React, { Component } from 'react';
  * import { AppRegistry, TextInput } from 'react-native';
  *
- * class UselessTextInput extends Component {
+ * export default class UselessTextInput extends Component {
  *   constructor(props) {
  *     super(props);
  *     this.state = { text: 'Useless Placeholder' };
@@ -92,7 +91,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
  * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
  * ```
  *
@@ -118,7 +117,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * class UselessTextInputMultiline extends Component {
+ * export default class UselessTextInputMultiline extends Component {
  *   constructor(props) {
  *     super(props);
  *     this.state = {
@@ -146,7 +145,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
  * AppRegistry.registerComponent(
  *  'AwesomeProject',
  *  () => UselessTextInputMultiline
@@ -336,7 +335,7 @@ const TextInput = React.createClass({
      * The default value is `simple`.
      * @platform android
      */
-    textBreakStrategy: React.PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
+    textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
     /**
      * Callback that is called when the text input is blurred.
      */
@@ -549,8 +548,8 @@ const TextInput = React.createClass({
   },
 
   contextTypes: {
-    onFocusRequested: React.PropTypes.func,
-    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
+    onFocusRequested: PropTypes.func,
+    focusEmitter: PropTypes.instanceOf(EventEmitter),
   },
 
   _inputRef: (undefined: any),
@@ -593,7 +592,7 @@ const TextInput = React.createClass({
   },
 
   childContextTypes: {
-    isInAParentText: React.PropTypes.bool
+    isInAParentText: PropTypes.bool
   },
 
   /**
@@ -698,6 +697,7 @@ const TextInput = React.createClass({
         accessible={props.accessible}
         accessibilityLabel={props.accessibilityLabel}
         accessibilityTraits={props.accessibilityTraits}
+        nativeID={this.props.nativeID}
         testID={props.testID}>
         {textContainer}
       </TouchableWithoutFeedback>
@@ -748,6 +748,7 @@ const TextInput = React.createClass({
         accessible={this.props.accessible}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityComponentType={this.props.accessibilityComponentType}
+        nativeID={this.props.nativeID}
         testID={this.props.testID}>
         {textContainer}
       </TouchableWithoutFeedback>

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -14,21 +14,20 @@
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var UIManager = require('UIManager');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var ReactPropTypes = React.PropTypes;
-
-var optionalImageSource = ReactPropTypes.oneOfType([
+var optionalImageSource = PropTypes.oneOfType([
   Image.propTypes.source,
   // Image.propTypes.source is required but we want it to be optional, so we OR
   // it with a nullable propType.
-  ReactPropTypes.oneOf([]),
+  PropTypes.oneOf([]),
 ]);
 
 /**
@@ -84,11 +83,11 @@ var ToolbarAndroid = React.createClass({
      * `ifRoom` or `never`
      * * `showWithText`: boolean, whether to show text alongside the icon or not
      */
-    actions: ReactPropTypes.arrayOf(ReactPropTypes.shape({
-      title: ReactPropTypes.string.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
       icon: optionalImageSource,
-      show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']),
-      showWithText: ReactPropTypes.bool
+      show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
+      showWithText: PropTypes.bool
     })),
     /**
      * Sets the toolbar logo.
@@ -102,11 +101,11 @@ var ToolbarAndroid = React.createClass({
      * Callback that is called when an action is selected. The only argument that is passed to the
      * callback is the position of the action in the actions array.
      */
-    onActionSelected: ReactPropTypes.func,
+    onActionSelected: PropTypes.func,
     /**
      * Callback called when the icon is selected.
      */
-    onIconClicked: ReactPropTypes.func,
+    onIconClicked: PropTypes.func,
     /**
      * Sets the overflow icon.
      */
@@ -114,7 +113,7 @@ var ToolbarAndroid = React.createClass({
     /**
      * Sets the toolbar subtitle.
      */
-    subtitle: ReactPropTypes.string,
+    subtitle: PropTypes.string,
     /**
      * Sets the toolbar subtitle color.
      */
@@ -122,7 +121,7 @@ var ToolbarAndroid = React.createClass({
     /**
      * Sets the toolbar title.
      */
-    title: ReactPropTypes.string,
+    title: PropTypes.string,
     /**
      * Sets the toolbar title color.
      */
@@ -135,7 +134,7 @@ var ToolbarAndroid = React.createClass({
      * these components and can be used to effectively align Toolbar content
      * along well-known gridlines.
      */
-    contentInsetStart: ReactPropTypes.number,
+    contentInsetStart: PropTypes.number,
     /**
      * Sets the content inset for the toolbar ending edge.
      *
@@ -144,7 +143,7 @@ var ToolbarAndroid = React.createClass({
      * these components and can be used to effectively align Toolbar content
      * along well-known gridlines.
      */
-    contentInsetEnd: ReactPropTypes.number,
+    contentInsetEnd: PropTypes.number,
     /**
      * Used to set the toolbar direction to RTL.
      * In addition to this property you need to add
@@ -155,11 +154,11 @@ var ToolbarAndroid = React.createClass({
      * `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity
      * `onCreate` method.
      */
-    rtl: ReactPropTypes.bool,
+    rtl: PropTypes.bool,
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: ReactPropTypes.string,
+    testID: PropTypes.string,
   },
 
   render: function() {

Libraries/Components/Touchable/BoundingDimensions.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var PooledClass = require('react/lib/PooledClass');
+var PooledClass = require('PooledClass');
 
 var twoArgumentPooler = PooledClass.twoArgumentPooler;
 

Libraries/Components/Touchable/Position.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var PooledClass = require('react/lib/PooledClass');
+var PooledClass = require('PooledClass');
 
 var twoArgumentPooler = PooledClass.twoArgumentPooler;
 

Libraries/Components/Touchable/TouchableBounce.js

@@ -15,6 +15,7 @@ var Animated = require('Animated');
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var Touchable = require('Touchable');
 
 type Event = Object;
@@ -42,17 +43,17 @@ var TouchableBounce = React.createClass({
      * When true, indicates that the view is an accessibility element. By default,
      * all the touchable elements are accessible.
      */
-    accessible: React.PropTypes.bool,
+    accessible: PropTypes.bool,
 
-    onPress: React.PropTypes.func,
-    onPressIn: React.PropTypes.func,
-    onPressOut: React.PropTypes.func,
+    onPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func,
     // The function passed takes a callback to start the animation which should
     // be run after this onPress handler is done. You can use this (for example)
     // to update UI before starting the animation.
-    onPressWithCompletion: React.PropTypes.func,
+    onPressWithCompletion: PropTypes.func,
     // the function passed is called after the animation is complete
-    onPressAnimationComplete: React.PropTypes.func,
+    onPressAnimationComplete: PropTypes.func,
     /**
      * When the scroll view is disabled, this defines how far your touch may
      * move off of the button, before deactivating the button. Once deactivated,
@@ -141,6 +142,7 @@ var TouchableBounce = React.createClass({
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityComponentType={this.props.accessibilityComponentType}
         accessibilityTraits={this.props.accessibilityTraits}
+        nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -15,6 +15,7 @@
 
 var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+const PropTypes = require('prop-types');
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheet = require('StyleSheet');
@@ -22,7 +23,6 @@ var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 var View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
 var ensureComponentIsNative = require('ensureComponentIsNative');
@@ -75,7 +75,7 @@ var TouchableHighlight = React.createClass({
      * Determines what the opacity of the wrapped view should be when touch is
      * active.
      */
-    activeOpacity: React.PropTypes.number,
+    activeOpacity: PropTypes.number,
     /**
      * The color of the underlay that will show through when the touch is
      * active.
@@ -85,17 +85,17 @@ var TouchableHighlight = React.createClass({
     /**
      * Called immediately after the underlay is shown
      */
-    onShowUnderlay: React.PropTypes.func,
+    onShowUnderlay: PropTypes.func,
     /**
      * Called immediately after the underlay is hidden
      */
-    onHideUnderlay: React.PropTypes.func,
+    onHideUnderlay: PropTypes.func,
     /**
      * *(Apple TV only)* TV preferred focus (see documentation for the View component).
      *
      * @platform ios
      */
-    hasTVPreferredFocus: React.PropTypes.bool,
+    hasTVPreferredFocus: PropTypes.bool,
     /**
      * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
      *
@@ -107,7 +107,7 @@ var TouchableHighlight = React.createClass({
      *
      * @platform ios
      */
-    tvParallaxProperties: React.PropTypes.object,
+    tvParallaxProperties: PropTypes.object,
 
   },
 
@@ -137,16 +137,22 @@ var TouchableHighlight = React.createClass({
   },
 
   getInitialState: function() {
+    this._isMounted = false;
     return merge(
       this.touchableGetInitialState(), this._computeSyntheticState(this.props)
     );
   },
 
   componentDidMount: function() {
+    this._isMounted = true;
     ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
+  componentWillUnmount: function() {
+    this._isMounted = false;
+  },
+
   componentDidUpdate: function() {
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
@@ -216,7 +222,7 @@ var TouchableHighlight = React.createClass({
   },
 
   _showUnderlay: function() {
-    if (!this.isMounted() || !this._hasPressHandler()) {
+    if (!this._isMounted || !this._hasPressHandler()) {
       return;
     }
 
@@ -267,6 +273,7 @@ var TouchableHighlight = React.createClass({
         onResponderMove={this.touchableHandleResponderMove}
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
+        nativeID={this.props.nativeID}
         testID={this.props.testID}>
         {React.cloneElement(
           React.Children.only(this.props.children),

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -12,6 +12,7 @@
 
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
@@ -20,16 +21,14 @@ var UIManager = require('UIManager');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var processColor = require('processColor');
 
-var PropTypes = React.PropTypes;
-
 var rippleBackgroundPropType = PropTypes.shape({
-  type: React.PropTypes.oneOf(['RippleAndroid']),
+  type: PropTypes.oneOf(['RippleAndroid']),
   color: PropTypes.number,
   borderless: PropTypes.bool,
 });
 
 var themeAttributeBackgroundPropType = PropTypes.shape({
-  type: React.PropTypes.oneOf(['ThemeAttrAndroid']),
+  type: PropTypes.oneOf(['ThemeAttrAndroid']),
   attribute: PropTypes.string.isRequired,
 });
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -17,6 +17,7 @@ var Animated = require('Animated');
 var Easing = require('Easing');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
@@ -59,12 +60,12 @@ var TouchableOpacity = React.createClass({
      * Determines what the opacity of the wrapped view should be when touch is
      * active. Defaults to 0.2.
      */
-    activeOpacity: React.PropTypes.number,
-    focusedOpacity: React.PropTypes.number,
+    activeOpacity: PropTypes.number,
+    focusedOpacity: PropTypes.number,
     /**
      * Apple TV parallax effects
      */
-    tvParallaxProperties: React.PropTypes.object,
+    tvParallaxProperties: PropTypes.object,
   },
 
   getDefaultProps: function() {
@@ -165,7 +166,7 @@ var TouchableOpacity = React.createClass({
   _opacityFocused: function() {
     this.setOpacityTo(this.props.focusedOpacity);
   },
-  
+
   _getChildStyleOpacityWithDefault: function() {
    var childStyle = flattenStyle(this.props.style) || {};
    return childStyle.opacity == undefined ? 1 : childStyle.opacity;
@@ -179,6 +180,7 @@ var TouchableOpacity = React.createClass({
         accessibilityComponentType={this.props.accessibilityComponentType}
         accessibilityTraits={this.props.accessibilityTraits}
         style={[this.props.style, {opacity: this.state.anim}]}
+        nativeID={this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         isTVSelectable={true}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,6 +13,7 @@
 
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const React = require('React');
+const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');
 
@@ -29,7 +30,7 @@ type Event = Object;
 const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
 /**
- * Do not use unless you have a very good reason. All the elements that
+ * Do not use unless you have a very good reason. All elements that
  * respond to press should have a visual feedback when touched.
  *
  * TouchableWithoutFeedback supports only one child.
@@ -40,46 +41,46 @@ const TouchableWithoutFeedback = React.createClass({
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
-    accessible: React.PropTypes.bool,
-    accessibilityComponentType: React.PropTypes.oneOf(
+    accessible: PropTypes.bool,
+    accessibilityComponentType: PropTypes.oneOf(
       AccessibilityComponentTypes
     ),
-    accessibilityTraits: React.PropTypes.oneOfType([
-      React.PropTypes.oneOf(AccessibilityTraits),
-      React.PropTypes.arrayOf(React.PropTypes.oneOf(AccessibilityTraits)),
+    accessibilityTraits: PropTypes.oneOfType([
+      PropTypes.oneOf(AccessibilityTraits),
+      PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),
     ]),
     /**
      * If true, disable all interactions for this component.
      */
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).
      */
-    onPress: React.PropTypes.func,
-    onPressIn: React.PropTypes.func,
-    onPressOut: React.PropTypes.func,
+    onPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func,
     /**
      * Invoked on mount and layout changes with
      *
      *   `{nativeEvent: {layout: {x, y, width, height}}}`
      */
-    onLayout: React.PropTypes.func,
+    onLayout: PropTypes.func,
 
-    onLongPress: React.PropTypes.func,
+    onLongPress: PropTypes.func,
 
     /**
      * Delay in ms, from the start of the touch, before onPressIn is called.
      */
-    delayPressIn: React.PropTypes.number,
+    delayPressIn: PropTypes.number,
     /**
      * Delay in ms, from the release of the touch, before onPressOut is called.
      */
-    delayPressOut: React.PropTypes.number,
+    delayPressOut: PropTypes.number,
     /**
      * Delay in ms, from onPressIn, before onLongPress is called.
      */
-    delayLongPress: React.PropTypes.number,
+    delayLongPress: PropTypes.number,
     /**
      * When the scroll view is disabled, this defines how far your touch may
      * move off of the button, before deactivating the button. Once deactivated,
@@ -176,6 +177,8 @@ const TouchableWithoutFeedback = React.createClass({
       accessibilityComponentType: this.props.accessibilityComponentType,
       accessibilityTraits: this.props.accessibilityTraits,
       // $FlowFixMe(>=0.41.0)
+      nativeID: this.props.nativeID,
+      // $FlowFixMe(>=0.41.0)
       testID: this.props.testID,
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

@@ -9,6 +9,7 @@ exports[`TouchableHighlight renders correctly 1`] = `
   hasTVPreferredFocus={undefined}
   hitSlop={undefined}
   isTVSelectable={true}
+  nativeID={undefined}
   onLayout={undefined}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -30,6 +31,7 @@ exports[`TouchableHighlight renders correctly 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     Touchable

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -23,6 +23,7 @@ ReactNativeViewAttributes.UIView = {
   accessibilityLiveRegion: true,
   accessibilityTraits: true,
   importantForAccessibility: true,
+  nativeID: true,
   testID: true,
   renderToHardwareTextureAndroid: true,
   shouldRasterizeIOS: true,

Libraries/Components/View/View.js

@@ -15,6 +15,7 @@ const NativeMethodsMixin = require('NativeMethodsMixin');
 const NativeModules = require('NativeModules');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
@@ -112,7 +113,7 @@ const View = React.createClass({
   },
 
   contextTypes: {
-    isInAParentText: React.PropTypes.bool,
+    isInAParentText: PropTypes.bool,
   },
 
   render: function() {

Libraries/Components/View/ViewPropTypes.js

@@ -173,6 +173,15 @@ module.exports = {
    */
   testID: PropTypes.string,
 
+  /**
+   * Used to locate this view from native classes.
+   *
+   * > This disables the 'layout-only view removal' optimization for this view!
+   *
+   * @platform android
+   */
+  nativeID: PropTypes.string,
+
   /**
    * For most touch interactions, you'll simply want to wrap your component in
    * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -12,15 +12,14 @@
 'use strict';
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var UIManager = require('UIManager');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var VIEWPAGER_REF = 'viewPager';
 
 type Event = Object;
@@ -86,7 +85,7 @@ class ViewPagerAndroid extends React.Component {
      * Index of initial page that should be selected. Use `setPage` method to
      * update the page, and `onPageSelected` to monitor page changes
      */
-    initialPage: ReactPropTypes.number,
+    initialPage: PropTypes.number,
 
     /**
      * Executed when transitioning between pages (ether because of animation for
@@ -97,7 +96,7 @@ class ViewPagerAndroid extends React.Component {
      *    Value x means that (1 - x) fraction of the page at "position" index is
      *    visible, and x fraction of the next page is visible.
      */
-    onPageScroll: ReactPropTypes.func,
+    onPageScroll: PropTypes.func,
 
     /**
      * Function called when the page scrolling state has changed.
@@ -107,7 +106,7 @@ class ViewPagerAndroid extends React.Component {
      * - settling, meaning that there was an interaction with the page scroller, and the
      *   page scroller is now finishing it's closing or opening animation
      */
-    onPageScrollStateChanged: ReactPropTypes.func,
+    onPageScrollStateChanged: PropTypes.func,
 
     /**
      * This callback will be called once ViewPager finish navigating to selected page
@@ -115,20 +114,20 @@ class ViewPagerAndroid extends React.Component {
      * callback will have following fields:
      *  - position - index of page that has been selected
      */
-    onPageSelected: ReactPropTypes.func,
+    onPageSelected: PropTypes.func,
 
     /**
      * Blank space to show between pages. This is only visible while scrolling, pages are still
      * edge-to-edge.
      */
-    pageMargin: ReactPropTypes.number,
+    pageMargin: PropTypes.number,
 
     /**
      * Determines whether the keyboard gets dismissed in response to a drag.
      *   - 'none' (the default), drags do not dismiss the keyboard.
      *   - 'on-drag', the keyboard is dismissed when a drag begins.
      */
-    keyboardDismissMode: ReactPropTypes.oneOf([
+    keyboardDismissMode: PropTypes.oneOf([
       'none', // default
       'on-drag',
     ]),
@@ -137,7 +136,7 @@ class ViewPagerAndroid extends React.Component {
     * When false, the content does not scroll.
     * The default value is true.
     */
-    scrollEnabled: ReactPropTypes.bool,
+    scrollEnabled: PropTypes.bool,
   };
 
   componentDidMount() {

Libraries/Components/WebView/WebView.android.js

@@ -13,20 +13,18 @@
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var ActivityIndicator = require('ActivityIndicator');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
-
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var deprecatedPropType = require('deprecatedPropType');
 var keyMirror = require('fbjs/lib/keyMirror');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
-
 var RCT_WEBVIEW_REF = 'webview';
 
 var WebViewState = keyMirror({
@@ -184,11 +182,18 @@ class WebView extends React.Component {
       'always',
       'compatibility'
     ]),
+
+    /**
+     * Used on Android only, controls whether form autocomplete data should be saved
+     * @platform android
+     */
+    saveFormDataDisabled: PropTypes.bool,
   };
 
   static defaultProps = {
     javaScriptEnabled : true,
     scalesPageToFit: true,
+    saveFormDataDisabled: false
   };
 
   state = {
@@ -261,6 +266,7 @@ class WebView extends React.Component {
         mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
         allowUniversalAccessFromFileURLs={this.props.allowUniversalAccessFromFileURLs}
         mixedContentMode={this.props.mixedContentMode}
+        saveFormDataDisabled={this.props.saveFormDataDisabled}
       />;
 
     return (

Libraries/Components/WebView/WebView.ios.js

@@ -14,12 +14,13 @@
 var ActivityIndicator = require('ActivityIndicator');
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var UIManager = require('UIManager');
 var View = require('View');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ScrollView = require('ScrollView');
 
 var deprecatedPropType = require('deprecatedPropType');
@@ -29,7 +30,6 @@ var processDecelerationRate = require('processDecelerationRate');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
 var RCTWebViewManager = require('NativeModules').WebViewManager;
 
 var BGWASH = 'rgba(255,255,255,0.8)';

Libraries/Experimental/Incremental.js

@@ -14,6 +14,8 @@
 const InteractionManager = require('InteractionManager');
 const React = require('React');
 
+const PropTypes = require('prop-types');
+
 const infoLog = require('infoLog');
 
 const DEBUG = false;
@@ -110,8 +112,8 @@ class Incremental extends React.Component<DefaultProps, Props, State> {
   };
 
   static contextTypes = {
-    incrementalGroup: React.PropTypes.object,
-    incrementalGroupEnabled: React.PropTypes.bool,
+    incrementalGroup: PropTypes.object,
+    incrementalGroupEnabled: PropTypes.bool,
   };
 
   constructor(props: Props, context: Context) {

Libraries/Experimental/IncrementalExample.js

@@ -1,15 +1,10 @@
 /**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
  *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule IncrementalExample
  * @flow

Libraries/Experimental/IncrementalGroup.js

@@ -14,6 +14,8 @@
 const Incremental = require('Incremental');
 const React = require('React');
 
+const PropTypes = require('prop-types');
+
 const infoLog = require('infoLog');
 
 let _groupCounter = -1;
@@ -75,8 +77,8 @@ class IncrementalGroup extends React.Component {
   }
 }
 IncrementalGroup.contextTypes = {
-  incrementalGroup: React.PropTypes.object,
-  incrementalGroupEnabled: React.PropTypes.bool,
+  incrementalGroup: PropTypes.object,
+  incrementalGroupEnabled: PropTypes.bool,
 };
 IncrementalGroup.childContextTypes = IncrementalGroup.contextTypes;
 

Libraries/Experimental/IncrementalPresenter.js

@@ -13,6 +13,7 @@
 
 const IncrementalGroup = require('IncrementalGroup');
 const React = require('React');
+const PropTypes = require('prop-types');
 const View = require('View');
 
 const ViewPropTypes = require('ViewPropTypes');
@@ -45,15 +46,15 @@ class IncrementalPresenter extends React.Component {
   _isDone: boolean;
 
   static propTypes = {
-    name: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    onDone: React.PropTypes.func,
-    onLayout: React.PropTypes.func,
+    name: PropTypes.string,
+    disabled: PropTypes.bool,
+    onDone: PropTypes.func,
+    onLayout: PropTypes.func,
     style: ViewPropTypes.style,
   };
   static contextTypes = {
-    incrementalGroup: React.PropTypes.object,
-    incrementalGroupEnabled: React.PropTypes.bool,
+    incrementalGroup: PropTypes.object,
+    incrementalGroupEnabled: PropTypes.bool,
   };
 
   constructor(props: Props, context: Context) {

Libraries/Experimental/SwipeableRow/SwipeableListView.js

@@ -18,6 +18,11 @@ const SwipeableRow = require('SwipeableRow');
 
 const {PropTypes} = React;
 
+type DefaultProps = {
+  bounceFirstRowOnMount: boolean,
+  renderQuickActions: Function,
+};
+
 type Props = {
   bounceFirstRowOnMount: boolean,
   dataSource: SwipeableListViewDataSource,
@@ -49,7 +54,7 @@ type State = {
  * - It can bounce the 1st row of the list so users know it's swipeable
  * - More to come
  */
-class SwipeableListView extends React.Component {
+class SwipeableListView extends React.Component<DefaultProps, Props, State> {
   props: Props;
   state: State;
 

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -13,14 +13,13 @@
 
 const Image = require('Image');
 const React = require('React');
+const PropTypes = require('prop-types');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 
 const ViewPropTypes = require('ViewPropTypes');
 
-const {PropTypes} = React;
-
 import type {ImageSource} from 'ImageSource';
 
 /**

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -15,12 +15,11 @@ const Animated = require('Animated');
 const I18nManager = require('I18nManager');
 const PanResponder = require('PanResponder');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
 
-const {PropTypes} = React;
-
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
 const IS_RTL = I18nManager.isRTL;

Libraries/Geolocation/Geolocation.js

@@ -37,7 +37,20 @@ type GeoOptions = {
  * As a browser polyfill, this API is available through the `navigator.geolocation`
  * global - you do not need to `import` it.
  *
- * ### iOS
+ * ### Configuration and Permissions
+ *
+ * <div class="banner-crna-ejected">
+ *   <h3>Projects with Native Code Only</h3>
+ *   <p>
+ *     This section only applies to projects made with <code>react-native init</code>
+ *     or to those made with Create React Native App which have since ejected. For
+ *     more information about ejecting, please see
+ *     the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
+ *     the Create React Native App repository.
+ *   </p>
+ * </div>
+ *
+ * #### iOS
  * You need to include the `NSLocationWhenInUseUsageDescription` key
  * in Info.plist to enable geolocation when using the app. Geolocation is
  * enabled by default when you create a project with `react-native init`.
@@ -46,7 +59,7 @@ type GeoOptions = {
  * 'NSLocationAlwaysUsageDescription' key in Info.plist and add location as
  * a background mode in the 'Capabilities' tab in Xcode.
  *
- * ### Android
+ * #### Android
  * To request access to location, you need to add the following line to your
  * app's `AndroidManifest.xml`:
  *

Libraries/Image/AssetRegistry.js

@@ -13,15 +13,15 @@
 
 
 export type PackagerAsset = {
-  __packager_asset: boolean,
-  fileSystemLocation: string,
-  httpServerLocation: string,
-  width: number,
-  height: number,
-  scales: Array<number>,
-  hash: string,
-  name: string,
-  type: string,
+  +__packager_asset: boolean,
+  +fileSystemLocation: string,
+  +httpServerLocation: string,
+  +width: ?number,
+  +height: ?number,
+  +scales: Array<number>,
+  +hash: string,
+  +name: string,
+  +type: string,
 };
 
 

Libraries/Image/AssetSourceResolver.js

@@ -13,8 +13,8 @@
 
 export type ResolvedAssetSource = {
   __packager_asset: boolean,
-  width: number,
-  height: number,
+  width: ?number,
+  height: ?number,
   uri: string,
   scale: number,
 };

Libraries/Image/Image.android.js

@@ -15,14 +15,14 @@ var ImageResizeMode = require('ImageResizeMode');
 var ImageStylePropTypes = require('ImageStylePropTypes');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var NativeModules = require('NativeModules');
-var PropTypes = require('react/lib/ReactPropTypes');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Set = require('Set');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
 var filterObject = require('fbjs/lib/filterObject');
@@ -31,7 +31,6 @@ var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
 var {
   ImageLoader,
 } = NativeModules;
@@ -194,7 +193,7 @@ var Image = React.createClass({
     getSize(
       url: string,
       success: (width: number, height: number) => void,
-      failure: (error: any) => void,
+      failure?: (error: any) => void,
     ) {
       return ImageLoader.getSize(url)
         .then(function(sizes) {
@@ -276,7 +275,7 @@ var Image = React.createClass({
   },
 
   contextTypes: {
-    isInAParentText: React.PropTypes.bool
+    isInAParentText: PropTypes.bool
   },
 
   render: function() {

Libraries/Image/Image.ios.js

@@ -18,6 +18,7 @@ const ImageStylePropTypes = require('ImageStylePropTypes');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const NativeModules = require('NativeModules');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheet = require('StyleSheet');
 const StyleSheetPropType = require('StyleSheetPropType');
@@ -26,8 +27,6 @@ const flattenStyle = require('flattenStyle');
 const requireNativeComponent = require('requireNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
 
-const PropTypes = React.PropTypes;
-
 const ImageViewManager = NativeModules.ImageViewManager;
 
 /**
@@ -42,7 +41,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  * import React, { Component } from 'react';
  * import { AppRegistry, View, Image } from 'react-native';
  *
- * class DisplayAnImage extends Component {
+ * export default class DisplayAnImage extends Component {
  *   render() {
  *     return (
  *       <View>
@@ -58,7 +57,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
  * AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
  * ```
  *
@@ -75,7 +74,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * });
  *
- * class DisplayAnImageWithStyle extends Component {
+ * export default class DisplayAnImageWithStyle extends Component {
  *   render() {
  *     return (
  *       <View>
@@ -88,7 +87,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
  * AppRegistry.registerComponent(
  *   'DisplayAnImageWithStyle',
  *   () => DisplayAnImageWithStyle
@@ -97,24 +96,24 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *
  * ### GIF and WebP support on Android
  *
- * By default, GIF and WebP are not supported on Android.
+ * When building your own native code, GIF and WebP are not supported by default on Android.
  *
  * You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.
  *
  * ```
  * dependencies {
  *   // If your app supports Android versions before Ice Cream Sandwich (API level 14)
- *   compile 'com.facebook.fresco:animated-base-support:0.11.0'
+ *   compile 'com.facebook.fresco:animated-base-support:1.0.1'
  *
  *   // For animated GIF support
- *   compile 'com.facebook.fresco:animated-gif:0.11.0'
+ *   compile 'com.facebook.fresco:animated-gif:1.0.1'
  *
  *   // For WebP support, including animated WebP
- *   compile 'com.facebook.fresco:animated-webp:0.11.0'
- *   compile 'com.facebook.fresco:webpsupport:0.11.0'
+ *   compile 'com.facebook.fresco:animated-webp:1.0.1'
+ *   compile 'com.facebook.fresco:webpsupport:1.0.1'
  *
  *   // For WebP support, without animations
- *   compile 'com.facebook.fresco:webpsupport:0.11.0'
+ *   compile 'com.facebook.fresco:webpsupport:1.0.1'
  * }
  * ```
  *
@@ -304,7 +303,7 @@ const Image = React.createClass({
     getSize: function(
       uri: string,
       success: (width: number, height: number) => void,
-      failure: (error: any) => void,
+      failure?: (error: any) => void,
     ) {
       ImageViewManager.getSize(uri, success, failure || function() {
         console.warn('Failed to get size for image: ' + uri);

Libraries/Image/RCTImage.xcodeproj/project.pbxproj

@@ -449,7 +449,6 @@
 				CLANG_STATIC_ANALYZER_MODE = deep;
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/UIExplorer-gjaibsjtheitasdxdtcvxxqavkvy/Build/Products/Debug-iphoneos",
 				);
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RCTImage;
@@ -464,7 +463,6 @@
 				CLANG_STATIC_ANALYZER_MODE = deep;
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/UIExplorer-gjaibsjtheitasdxdtcvxxqavkvy/Build/Products/Debug-iphoneos",
 				);
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RCTImage;

Libraries/Inspector/ElementProperties.js

@@ -13,6 +13,7 @@
 
 const BoxInspector = require('BoxInspector');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleInspector = require('StyleInspector');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
@@ -24,8 +25,6 @@ const flattenStyle = require('flattenStyle');
 const mapWithSeparator = require('mapWithSeparator');
 const openFileInEditor = require('openFileInEditor');
 
-const PropTypes = React.PropTypes;
-
 class ElementProperties extends React.Component {
   props: {
     hierarchy: Array<$FlowFixMe>,

Libraries/Inspector/InspectorOverlay.js

@@ -14,13 +14,12 @@
 var Dimensions = require('Dimensions');
 var InspectorUtils = require('InspectorUtils');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
 var ElementBox = require('ElementBox');
 
-var PropTypes = React.PropTypes;
-
 type EventLike = {
   nativeEvent: Object,
 };

Libraries/Inspector/InspectorPanel.js

@@ -15,14 +15,13 @@ const ElementProperties = require('ElementProperties');
 const NetworkOverlay = require('NetworkOverlay');
 const PerformanceOverlay = require('PerformanceOverlay');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ScrollView = require('ScrollView');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 
-const PropTypes = React.PropTypes;
-
 class InspectorPanel extends React.Component {
   renderWaiting() {
     if (this.props.inspecting) {

Libraries/Interaction/PanResponder.js

@@ -77,7 +77,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  *       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  *
  *       onPanResponderGrant: (evt, gestureState) => {
- *         // The guesture has started. Show visual feedback so the user knows
+ *         // The gesture has started. Show visual feedback so the user knows
  *         // what is happening!
  *
  *         // gestureState.d{x,y} will be set to zero now
@@ -116,7 +116,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * ### Working Example
  *
  * To see it in action, try the
- * [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/PanResponderExample.js)
+ * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js)
  */
 
 const PanResponder = {

Libraries/LayoutAnimation/LayoutAnimation.js

@@ -15,7 +15,6 @@ var UIManager = require('UIManager');
 
 var keyMirror = require('fbjs/lib/keyMirror');
 
-// $FlowFixMe checkPropTypes not yet landed to Flow
 var {checkPropTypes, PropTypes} = require('react');
 
 var TypesEnum = {

Libraries/Linking/Linking.js

@@ -21,6 +21,17 @@ const LinkingManager = Platform.OS === 'android' ?
   NativeModules.IntentAndroid : NativeModules.LinkingManager;
 
 /**
+ * <div class="banner-crna-ejected">
+ *   <h3>Projects with Native Code Only</h3>
+ *   <p>
+ *     This section only applies to projects made with <code>react-native init</code>
+ *     or to those made with Create React Native App which have since ejected. For
+ *     more information about ejecting, please see
+ *     the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
+ *     the Create React Native App repository.
+ *   </p>
+ * </div>
+ *
  * `Linking` gives you a general interface to interact with both incoming
  * and outgoing app links.
  *
@@ -58,7 +69,7 @@ const LinkingManager = Platform.OS === 'android' ?
  * NOTE: On iOS you'll need to link `RCTLinking` to your project by following
  * the steps described [here](docs/linking-libraries-ios.html#manual-linking).
  * In case you also want to listen to incoming app links during your app's
- * execution you'll need to add the following lines to you `*AppDelegate.m`:
+ * execution you'll need to add the following lines to your `*AppDelegate.m`:
  *
  * ```
  * #import <React/RCTLinkingManager.h>
@@ -142,6 +153,10 @@ class Linking extends NativeEventEmitter {
    * or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact,
    * or any other URL that can be opened with the installed apps.
    *
+   * The method returns a `Promise` object. If the user confirms the open dialog or the
+   * url automatically opens, the promise is resolved.  If the user cancels the open dialog
+   * or there are no registered applications for the url, the promise is rejected.
+   *
    * NOTE: This method will fail if the system doesn't know how to open the specified URL.
    * If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.
    *

Libraries/Lists/FillRateHelper.js

@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule FillRateHelper
+ * @flow
+ */
+
+/* eslint-disable no-console-disallow */
+
+'use strict';
+
+const performanceNow = require('fbjs/lib/performanceNow');
+const warning = require('fbjs/lib/warning');
+
+export type FillRateInfo = Info;
+
+class Info {
+  any_blank_count = 0;
+  any_blank_ms = 0;
+  any_blank_speed_sum = 0;
+  mostly_blank_count = 0;
+  mostly_blank_ms = 0;
+  pixels_blank = 0;
+  pixels_sampled = 0;
+  pixels_scrolled = 0;
+  total_time_spent = 0;
+  sample_count = 0;
+}
+
+type FrameMetrics = {inLayout?: boolean, length: number, offset: number};
+
+const DEBUG = false;
+
+let _listeners: Array<(Info) => void> = [];
+let _minSampleCount = 10;
+let _sampleRate = DEBUG ? 1 : null;
+
+/**
+ * A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
+ * By default the sampling rate is set to zero and this will do nothing. If you want to collect
+ * samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
+ *
+ * Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
+ * `SceneTracker.getActiveScene` to determine the context of the events.
+ */
+class FillRateHelper {
+  _anyBlankStartTime = (null: ?number);
+  _enabled = false;
+  _getFrameMetrics: (index: number) => ?FrameMetrics;
+  _info = new Info();
+  _mostlyBlankStartTime = (null: ?number);
+  _samplesStartTime = (null: ?number);
+
+  static addListener(
+    callback: (FillRateInfo) => void
+  ): {remove: () => void} {
+    warning(
+      _sampleRate !== null,
+      'Call `FillRateHelper.setSampleRate` before `addListener`.'
+    );
+    _listeners.push(callback);
+    return {
+      remove: () => {
+        _listeners = _listeners.filter((listener) => callback !== listener);
+      },
+    };
+  }
+
+  static setSampleRate(sampleRate: number) {
+    _sampleRate = sampleRate;
+  }
+
+  static setMinSampleCount(minSampleCount: number) {
+    _minSampleCount = minSampleCount;
+  }
+
+  constructor(getFrameMetrics: (index: number) => ?FrameMetrics) {
+    this._getFrameMetrics = getFrameMetrics;
+    this._enabled = (_sampleRate || 0) > Math.random();
+    this._resetData();
+  }
+
+  activate() {
+    if (this._enabled && this._samplesStartTime == null) {
+      DEBUG && console.debug('FillRateHelper: activate');
+      this._samplesStartTime = performanceNow();
+    }
+  }
+
+  deactivateAndFlush() {
+    if (!this._enabled) {
+      return;
+    }
+    const start = this._samplesStartTime; // const for flow
+    if (start == null) {
+      DEBUG && console.debug('FillRateHelper: bail on deactivate with no start time');
+      return;
+    }
+    if (this._info.sample_count < _minSampleCount) {
+      // Don't bother with under-sampled events.
+      this._resetData();
+      return;
+    }
+    const total_time_spent = performanceNow() - start;
+    const info: any = {
+      ...this._info,
+      total_time_spent,
+    };
+    if (DEBUG) {
+      const derived = {
+        avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
+        avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
+        avg_speed_when_any_blank: this._info.any_blank_speed_sum / this._info.any_blank_count,
+        any_blank_per_min: this._info.any_blank_count / (total_time_spent / 1000 / 60),
+        any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
+        mostly_blank_per_min: this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
+        mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
+      };
+      for (const key in derived) {
+        derived[key] = Math.round(1000 * derived[key]) / 1000;
+      }
+      console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
+    }
+    _listeners.forEach((listener) => listener(info));
+    this._resetData();
+  }
+
+  computeBlankness(
+    props: {
+      data: Array<any>,
+      getItemCount: (data: Array<any>) => number,
+      initialNumToRender: number,
+    },
+    state: {
+      first: number,
+      last: number,
+    },
+    scrollMetrics: {
+      dOffset: number,
+      offset: number,
+      velocity: number,
+      visibleLength: number,
+    },
+  ): number {
+    if (!this._enabled || props.getItemCount(props.data) === 0 || this._samplesStartTime == null) {
+      return 0;
+    }
+    const {dOffset, offset, velocity, visibleLength} = scrollMetrics;
+
+    // Denominator metrics that we track for all events - most of the time there is no blankness and
+    // we want to capture that.
+    this._info.sample_count++;
+    this._info.pixels_sampled += Math.round(visibleLength);
+    this._info.pixels_scrolled += Math.round(Math.abs(dOffset));
+    const scrollSpeed = Math.round(Math.abs(velocity) * 1000); // px / sec
+
+    // Whether blank now or not, record the elapsed time blank if we were blank last time.
+    const now = performanceNow();
+    if (this._anyBlankStartTime != null) {
+      this._info.any_blank_ms += now - this._anyBlankStartTime;
+    }
+    this._anyBlankStartTime = null;
+    if (this._mostlyBlankStartTime != null) {
+      this._info.mostly_blank_ms += now - this._mostlyBlankStartTime;
+    }
+    this._mostlyBlankStartTime = null;
+
+    let blankTop = 0;
+    let first = state.first;
+    let firstFrame = this._getFrameMetrics(first);
+    while (first <= state.last && (!firstFrame || !firstFrame.inLayout)) {
+      firstFrame = this._getFrameMetrics(first);
+      first++;
+    }
+    // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
+    // as blank.
+    if (firstFrame && first > 0) {
+      blankTop = Math.min(visibleLength, Math.max(0, firstFrame.offset - offset));
+    }
+    let blankBottom = 0;
+    let last = state.last;
+    let lastFrame = this._getFrameMetrics(last);
+    while (last >= state.first && (!lastFrame || !lastFrame.inLayout)) {
+      lastFrame = this._getFrameMetrics(last);
+      last--;
+    }
+    // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
+    // footer as blank.
+    if (lastFrame && last < props.getItemCount(props.data) - 1) {
+      const bottomEdge = lastFrame.offset + lastFrame.length;
+      blankBottom = Math.min(visibleLength, Math.max(0, offset + visibleLength - bottomEdge));
+    }
+    const pixels_blank = Math.round(blankTop + blankBottom);
+    const blankness = pixels_blank / visibleLength;
+    if (blankness > 0) {
+      this._anyBlankStartTime = now;
+      this._info.any_blank_speed_sum += scrollSpeed;
+      this._info.any_blank_count++;
+      this._info.pixels_blank += pixels_blank;
+      if (blankness > 0.5) {
+        this._mostlyBlankStartTime = now;
+        this._info.mostly_blank_count++;
+      }
+    } else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
+      this.deactivateAndFlush();
+    }
+    return blankness;
+  }
+
+  enabled(): boolean {
+    return this._enabled;
+  }
+
+  _resetData() {
+    this._anyBlankStartTime = null;
+    this._info = new Info();
+    this._mostlyBlankStartTime = null;
+    this._samplesStartTime = null;
+  }
+}
+
+module.exports = FillRateHelper;

Libraries/Lists/FlatList.js

@@ -13,7 +13,6 @@
 
 const MetroListView = require('MetroListView'); // Used as a fallback legacy option
 const React = require('React');
-const ReactNative = require('ReactNative');
 const View = require('View');
 const VirtualizedList = require('VirtualizedList');
 
@@ -25,38 +24,69 @@ import type {Props as VirtualizedListProps} from 'VirtualizedList';
 
 type RequiredProps<ItemT> = {
   /**
-   * Takes an item from `data` and renders it into the list. Typical usage:
+   * Takes an item from `data` and renders it into the list. Example usage:
    *
-   *     _renderItem = ({item}) => (
-   *       <TouchableOpacity onPress={() => this._onPress(item)}>
-   *         <Text>{item.title}}</Text>
-   *       </TouchableOpacity>
-   *     );
-   *     ...
-   *     <FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />
+   *     <FlatList
+   *       ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
+   *         <View style={[style.separator, highlighted && {marginLeft: 0}]} />
+   *       )}
+   *       data={[{title: 'Title Text', key: 'item1'}]}
+   *       renderItem={({item, separators}) => (
+   *         <TouchableHighlight
+   *           onPress={() => this._onPress(item)}
+   *           onShowUnderlay={separators.highlight}
+   *           onHideUnderlay={separators.unhighlight}>
+   *           <View style={{backgroundColor: 'white'}}>
+   *             <Text>{item.title}}</Text>
+   *           </View>
+   *         </TouchableHighlight>
+   *       )}
+   *     />
    *
-   * Provides additional metadata like `index` if you need it.
+   * Provides additional metadata like `index` if you need it, as well as a more generic
+   * `separators.updateProps` function which let's you set whatever props you want to change the
+   * rendering of either the leading separator or trailing separator in case the more common
+   * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
+   * your use-case.
    */
-  renderItem: (info: {item: ItemT, index: number}) => ?React.Element<any>,
+  renderItem: (info: {
+    item: ItemT,
+    index: number,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+    },
+  }) => ?React.Element<any>,
   /**
    * For simplicity, data is just a plain array. If you want to use something else, like an
    * immutable list, use the underlying `VirtualizedList` directly.
    */
-  data: ?Array<ItemT>,
+  data: ?$ReadOnlyArray<ItemT>,
 };
 type OptionalProps<ItemT> = {
   /**
-   * Rendered in between each item, but not at the top or bottom.
+   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
+   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
+   * which will update the `highlighted` prop, but you can also add custom props with
+   * `separators.updateProps`.
    */
   ItemSeparatorComponent?: ?ReactClass<any>,
   /**
-   * Rendered at the bottom of all the items.
+   * Rendered when the list is empty. Can be a React Component Class, a render function, or
+   * a rendered element.
    */
-  ListFooterComponent?: ?ReactClass<any>,
+  ListEmptyComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
-   * Rendered at the top of all the items.
+   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
    */
-  ListHeaderComponent?: ?ReactClass<any>,
+  ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
+  /**
+   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListHeaderComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
    * Optional custom style for multi-item rows generated when numColumns > 1.
    */
@@ -91,6 +121,13 @@ type OptionalProps<ItemT> = {
    * to improve perceived performance of scroll-to-top actions.
    */
   initialNumToRender: number,
+  /**
+   * Instead of starting at the top with the first item, start at `initialScrollIndex`. This
+   * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
+   * always rendered and immediately renders the items starting at this initial index. Requires
+   * `getItemLayout` to be implemented.
+   */
+  initialScrollIndex?: ?number,
   /**
    * Used to extract a unique key for a given item at the specified index. Key is used for caching
    * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
@@ -131,6 +168,12 @@ type OptionalProps<ItemT> = {
    * Set this true while waiting for new data from a refresh.
    */
   refreshing?: ?boolean,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean,
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
@@ -140,8 +183,6 @@ type Props<ItemT> = RequiredProps<ItemT> & OptionalProps<ItemT> & VirtualizedLis
 
 const defaultProps = {
   ...VirtualizedList.defaultProps,
-  getItem: undefined,
-  getItemCount: undefined,
   numColumns: 1,
 };
 type DefaultProps = typeof defaultProps;
@@ -205,7 +246,7 @@ type DefaultProps = typeof defaultProps;
  *         this.setState((state) => {
  *           // copy the map rather than modifying state.
  *           const selected = new Map(state.selected);
- *           selected.set(id, !state.get(id)); // toggle
+ *           selected.set(id, !selected.get(id)); // toggle
  *           return {selected};
  *         });
  *       };
@@ -232,20 +273,22 @@ type DefaultProps = typeof defaultProps;
  *     }
  *
  * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
- * and thus inherits it's props that aren't explicitly listed here along with the following caveats:
+ * and thus inherits it's props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
  *
  * - Internal state is not preserved when content scrolls out of the render window. Make sure all
  *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
  * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
- *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop that
- *   is not `===` after updates, otherwise your UI may not update on changes. This includes the
- *   `data` prop and parent component state.
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
  * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
  *   offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
  *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
  *   and we are working on improving it behind the scenes.
  * - By default, the list looks for a `key` prop on each item and uses that for the React key.
  *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
  */
 class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, void> {
   static defaultProps: DefaultProps = defaultProps;
@@ -260,17 +303,22 @@ class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, vo
   /**
    * Scrolls to the item at a the specified index such that it is positioned in the viewable area
    * such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the
-   * middle.
+   * middle. `viewOffset` is a fixed number of pixels to offset the final target position.
    *
-   * May be janky without `getItemLayout` prop.
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
    */
-  scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
+  scrollToIndex(params: {
+    animated?: ?boolean, index: number, viewOffset?: number, viewPosition?: number,
+  }) {
     this._listRef.scrollToIndex(params);
   }
 
   /**
-   * Requires linear scan through data - use `scrollToIndex` instead if possible. May be janky
-   * without `getItemLayout` prop.
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
    */
   scrollToItem(params: {animated?: ?boolean, item: ItemT, viewPosition?: number}) {
     this._listRef.scrollToItem(params);
@@ -292,11 +340,18 @@ class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, vo
     this._listRef.recordInteraction();
   }
 
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder() {
+    if (this._listRef) {
+      return this._listRef.getScrollResponder();
+    }
+  }
+
   getScrollableNode() {
-    if (this._listRef && this._listRef.getScrollableNode) {
+    if (this._listRef) {
       return this._listRef.getScrollableNode();
-    } else {
-      return ReactNative.findNodeHandle(this._listRef);
     }
   }
 
@@ -405,7 +460,7 @@ class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, vo
     }
   };
 
-  _renderItem = (info: {item: ItemT | Array<ItemT>, index: number}) => {
+  _renderItem = (info: Object) => {
     const {renderItem, numColumns, columnWrapperStyle} = this.props;
     if (numColumns > 1) {
       const {item, index} = info;
@@ -413,7 +468,11 @@ class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, vo
       return (
         <View style={[{flexDirection: 'row'}, columnWrapperStyle]}>
           {item.map((it, kk) => {
-            const element = renderItem({item: it, index:  index * numColumns + kk});
+            const element = renderItem({
+              item: it,
+              index: index * numColumns + kk,
+              separators: info.separators,
+            });
             return element && React.cloneElement(element, {key: kk});
           })}
         </View>

Libraries/Lists/ListView/ListView.js

@@ -14,6 +14,7 @@
 var ListViewDataSource = require('ListViewDataSource');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
 var ScrollView = require('ScrollView');
@@ -26,8 +27,6 @@ var cloneReferencedElement = require('react-clone-referenced-element');
 var isEmpty = require('isEmpty');
 var merge = require('merge');
 
-var PropTypes = React.PropTypes;
-
 var DEFAULT_PAGE_SIZE = 1;
 var DEFAULT_INITIAL_ROWS = 10;
 var DEFAULT_SCROLL_RENDER_AHEAD = 1000;
@@ -181,12 +180,12 @@ var ListView = React.createClass({
      * A function that returns the scrollable component in which the list rows
      * are rendered. Defaults to returning a ScrollView with the given props.
      */
-    renderScrollComponent: React.PropTypes.func.isRequired,
+    renderScrollComponent: PropTypes.func.isRequired,
     /**
      * How early to start rendering rows before they come on screen, in
      * pixels.
      */
-    scrollRenderAheadDistance: React.PropTypes.number.isRequired,
+    scrollRenderAheadDistance: PropTypes.number.isRequired,
     /**
      * (visibleRows, changedRows) => void
      *
@@ -196,13 +195,13 @@ var ListView = React.createClass({
      * that have changed their visibility, with true indicating visible, and
      * false indicating the view has moved out of view.
      */
-    onChangeVisibleRows: React.PropTypes.func,
+    onChangeVisibleRows: PropTypes.func,
     /**
      * A performance optimization for improving scroll perf of
      * large lists, used in conjunction with overflow: 'hidden' on the row
      * containers. This is enabled by default.
      */
-    removeClippedSubviews: React.PropTypes.bool,
+    removeClippedSubviews: PropTypes.bool,
     /**
      * Makes the sections headers sticky. The sticky behavior means that it
      * will scroll with the content at the top of the section until it reaches
@@ -211,7 +210,7 @@ var ListView = React.createClass({
      * not supported in conjunction with `horizontal={true}`. Only enabled by
      * default on iOS because of typical platform standards.
      */
-    stickySectionHeadersEnabled: React.PropTypes.bool,
+    stickySectionHeadersEnabled: PropTypes.bool,
     /**
      * An array of child indices determining which children get docked to the
      * top of the screen when scrolling. For example, passing

Libraries/Lists/ListView/ListViewDataSource.js

@@ -139,10 +139,10 @@ class ListViewDataSource {
    * this function as the `dataBlob`.
    */
    cloneWithRows(
-       dataBlob: Array<any> | {[key: string]: any},
-       rowIdentities: ?Array<string>
+       dataBlob: $ReadOnlyArray<any> | {+[key: string]: any},
+       rowIdentities: ?$ReadOnlyArray<string>
    ): ListViewDataSource {
-    var rowIds = rowIdentities ? [rowIdentities] : null;
+    var rowIds = rowIdentities ? [[...rowIdentities]] : null;
     if (!this._sectionHeaderHasChanged) {
       this._sectionHeaderHasChanged = () => false;
     }