Fix #17610 , Add fixtures to metro blacklist

Summary: Include a default blacklist into the build settings to prevent processing of incorrect fixture files by Metro.  Fix #17610 issue, preventing metro from processing fixture files 1. Have a working demo 2. Install https://github.com/oblador/react-native-vector-icons 3. Use in a component 4. Start the app 5. The app starts successfully and display the icons [ GENERAL ] [ BUGFIX ] [local-cli/util/Config.js] - Add default file blacklist Closes https://github.com/facebook/react-native/pull/17672 Differential Revision: D7014627 Pulled By: hramos fbshipit-source-id: 20974e6fdd0977eeeb1048c29c9d621c803c26e9
[0.53.3] Bump version numbers
2025-11-01 09:14:26 +00:00 · 2018-02-21 12:55:00 +01:00 · 2018-02-20 11:35:21 +01:00 · 2018-02-20 11:35:02 +01:00 · 2018-02-19 14:10:55 +01:00 · 2018-02-14 15:46:43 +01:00
1355 changed files with 50817 additions and 50663 deletions
@@ -0,0 +1,500 @@
+aliases:
+  - &restore-node-cache
+    keys:
+      - v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+      # Fallback in case checksum fails
+      - v1-dependencies-{{ arch }}-
+
+  - &save-node-cache
+    paths:
+      - node_modules
+    key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+
+  - &restore-cache-analysis
+    keys:
+      - v1-analysis-dependencies-{{ arch }}-{{ checksum "package.json" }}{{ checksum "danger/package.json" }}
+      # Fallback in case checksum fails
+      - v1-analysis-dependencies-{{ arch }}-
+  - &save-cache-analysis
+    paths:
+      - danger/node_modules
+      - node_modules
+    key: v1-analysis-dependencies-{{ arch }}-{{ checksum "package.json" }}{{ checksum "danger/package.json" }}
+
+  - &restore-cache-android-packages
+    keys:
+      - v2-android-sdkmanager-packages-{{ arch }}-{{ checksum "scripts/circle-ci-android-setup.sh" }}
+      # Fallback in case checksum fails
+      - v2-android-sdkmanager-packages-{{ arch }}-
+  - &save-cache-android-packages
+    paths:
+      - /opt/android/sdk
+    key: v2-android-sdkmanager-packages-{{ arch }}-{{ checksum "scripts/circle-ci-android-setup.sh" }}
+
+  - &restore-cache-ndk
+    keys:
+      - v1-android-ndk-{{ arch }}-r10e-32-64
+
+  - &install-ndk
+    |
+      source scripts/circle-ci-android-setup.sh && getAndroidNDK
+
+  - &save-cache-ndk
+    paths:
+      - /opt/ndk
+    key: v1-android-ndk-{{ arch }}-r10e-32-64
+
+  - &restore-cache-buck
+    keys:
+      - v2-buck-{{ arch }}-v2017.09.04.02
+  - &save-cache-buck
+    paths:
+      - ~/buck
+    key: v2-buck-{{ arch }}-v2017.09.04.02
+
+  - &restore-cache-watchman
+    keys:
+      - v1-watchman-{{ arch }}-v4.9.0
+  - &save-cache-watchman
+    paths:
+      - ~/watchman
+    key: v1-watchman-{{ arch }}-v4.9.0
+
+  - &install-node-dependencies
+    |
+      npm install --no-package-lock --no-spin --no-progress
+
+  - &install-buck
+    |
+      if [[ ! -e ~/buck ]]; then
+        git clone https://github.com/facebook/buck.git ~/buck --branch v2017.09.04.02 --depth=1
+      fi
+      cd ~/buck && ant
+      buck --version
+
+  - &install-node 
+    |
+      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
+      sudo apt-get install -y nodejs
+
+  - &run-node-tests
+    | 
+      npm test -- --maxWorkers=2
+
+  - &run-lint-checks
+    | 
+      npm run lint
+
+  - &run-flow-checks
+    | 
+      npm run flow -- check
+
+
+  - &filter-only-master-stable
+    branches:
+      only:
+        - /.*-stable/
+        - master
+
+  - &filter-only-stable
+    branches:
+      only:
+        - /.*-stable/
+
+  - &filter-ignore-gh-pages
+    branches:
+      ignore: gh-pages
+
+  - &filter-ignore-master-stable
+    branches:
+      ignore:
+        - master
+        - /.*-stable/
+        - gh-pages
+
+  - &create-ndk-directory
+    |
+      if [[ ! -e /opt/ndk ]]; then
+        sudo mkdir /opt/ndk
+      fi
+      sudo chown ${USER:=$(/usr/bin/id -run)}:$USER /opt/ndk
+
+  # CircleCI does not support interpolating env variables in the environment
+  #  https://circleci.com/docs/2.0/env-vars/#interpolating-environment-variables-to-set-other-environment-variables
+  - &configure-android-path
+    | 
+      echo 'export PATH=${ANDROID_NDK}:~/react-native/gradle-2.9/bin:~/buck/bin:$PATH' >> $BASH_ENV
+      source $BASH_ENV
+
+  - &install-android-packages
+    | 
+      source scripts/circle-ci-android-setup.sh && getAndroidSDK
+
+  - &install-build-dependencies
+    |
+      sudo apt-get update -y
+      sudo apt-get install ant autoconf automake g++ gcc libqt5widgets5 lib32z1 lib32stdc++6  make maven python-dev python3-dev qml-module-qtquick-controls qtdeclarative5-dev file -y
+
+  - &build-android-app
+    name: Build Android App
+    command: |
+      buck build ReactAndroid/src/main/java/com/facebook/react
+      buck build ReactAndroid/src/main/java/com/facebook/react/shell
+
+  - &wait-for-avd
+    name: Wait for Android Virtual Device
+    command: source scripts/circle-ci-android-setup.sh && waitForAVD
+
+  - &check-js-bundle
+    name: Check for JavaScript Bundle
+    command: |
+      if [[ ! -e ReactAndroid/src/androidTest/assets/AndroidTestBundle.js ]]; then
+        echo "JavaScript bundle missing, verify build-js-bundle step"; exit 1;
+      else
+        echo "JavaScript bundle found.";
+      fi
+
+  - &compile-native-libs
+    name: Compile Native Libs for Unit and Integration Tests
+    command: ./gradlew :ReactAndroid:packageReactNdkLibsForBuck -Pjobs=$BUILD_THREADS -Pcom.android.build.threadPoolSize=1
+    no_output_timeout: 6m
+
+  - &run-android-unit-tests
+    name: Unit Tests
+    command: buck test ReactAndroid/src/test/... --config build.threads=$BUILD_THREADS
+
+  - &run-android-integration-tests
+    name: Build and Install Test APK
+    command: source scripts/circle-ci-android-setup.sh && NO_BUCKD=1 retry3 buck install ReactAndroid/src/androidTest/buck-runner:instrumentation-tests --config build.threads=$BUILD_THREADS
+  
+  - &collect-android-test-results
+    name: Collect Test Results
+    command: |
+      mkdir -p ~/junit/
+      find . -type f -regex ".*/build/test-results/debug/.*xml" -exec cp {} ~/junit/ \;
+      find . -type f -regex ".*/outputs/androidTest-results/connected/.*xml" -exec cp {} ~/junit/ \;
+    when: always
+
+defaults: &defaults
+  working_directory: ~/react-native
+
+android_defaults: &android_defaults
+  <<: *defaults
+  docker:
+    - image: circleci/android:api-26-alpha
+  resource_class: "large"
+  environment:
+    - TERM: "dumb"
+    - ADB_INSTALL_TIMEOUT: 10
+    - _JAVA_OPTIONS: "-XX:+UnlockExperimentalVMOptions -XX:+UseCGroupMemoryLimitForHeap"
+    - GRADLE_OPTS: '-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs="-XX:+HeapDumpOnOutOfMemoryError"'
+    - ANDROID_NDK: '/opt/ndk/android-ndk-r10e'
+    - BUILD_THREADS: 2
+
+version: 2
+jobs:
+  # Runs JavaScript lint and flow checks
+  run-js-checks:
+    <<: *defaults
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: *run-lint-checks
+      - run: *run-flow-checks
+
+  # Runs JavaScript tests on Node 8
+  test-js-node-8:
+    <<: *defaults
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: *run-node-tests
+
+  # Runs JavaScript tests on Node 6
+  test-js-node-6:
+    <<: *defaults
+    docker:
+      - image: circleci/node:6
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: *run-node-tests
+
+  # Runs unit tests on iOS devices
+  test-objc-ios:
+    <<: *defaults
+    macos:
+      xcode: "9.0"
+    dependencies:
+      pre:
+        - xcrun instruments -w "iPhone 5s (10.3.1)" || true
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: ./scripts/objc-test-ios.sh
+
+  # Runs unit tests on tvOS devices
+  test-objc-tvos:
+    <<: *defaults
+    macos:
+      xcode: "9.0"
+    dependencies:
+      pre:
+        - xcrun instruments -w "Apple TV 1080p (10.0)" || true
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: ./scripts/objc-test-tvos.sh
+
+  # Runs end to end tests
+  test-objc-e2e:
+    <<: *defaults
+    macos:
+      xcode: "9.0"
+    dependencies:
+      pre:
+        - xcrun instruments -w "iPhone 5s (10.3.1)" || true
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3;
+
+  # Checks podspec
+  test-podspec:
+    <<: *defaults
+    macos:
+      xcode: "9.0"
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: ./scripts/process-podspecs.sh
+      
+  # Publishes new version onto npm
+  deploy:
+    <<: *android_defaults
+    steps:
+      - checkout
+
+      # Configure Android dependencies
+      - run: *configure-android-path
+      - run: *install-build-dependencies
+      - restore-cache: *restore-cache-android-packages
+      - run: *install-android-packages
+      - save-cache: *save-cache-android-packages
+      - run: *create-ndk-directory
+      - restore-cache: *restore-cache-ndk
+      - run: *install-ndk
+      - save-cache: *save-cache-ndk
+      - restore-cache: *restore-cache-buck
+      - run: *install-buck
+      - save-cache: *save-cache-buck
+      - run: *install-node
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run: buck fetch ReactAndroid/src/test/java/com/facebook/react/modules
+      - run: buck fetch ReactAndroid/src/main/java/com/facebook/react
+      - run: buck fetch ReactAndroid/src/main/java/com/facebook/react/shell
+      - run: buck fetch ReactAndroid/src/test/...
+      - run: buck fetch ReactAndroid/src/androidTest/...
+      - run: ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog :ReactAndroid:downloadJSCHeaders
+
+      - run:
+          name: Publish React Native Package
+          command: |
+            if [ -z "$CIRCLE_PULL_REQUEST" ]; then
+              echo "//registry.npmjs.org/:_authToken=${CIRCLE_NPM_TOKEN}" > ~/.npmrc
+              git config --global user.email "reactjs-bot@users.noreply.github.com"
+              git config --global user.name "npm Deployment Script"
+              echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc
+              node ./scripts/publish-npm.js
+            else
+              echo "Skipping deploy."            
+            fi
+
+  # Build JavaScript bundle for Android tests
+  build-js-bundle:
+    <<: *defaults
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+      - run:
+          name: Build JavaScript Bundle
+          command: node local-cli/cli.js bundle --max-workers 2 --platform android --dev true --entry-file ReactAndroid/src/androidTest/js/TestBundle.js --bundle-output ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
+      - persist_to_workspace:
+          root: ReactAndroid/src/androidTest/assets/
+          paths:
+            - AndroidTestBundle.js
+      - store_artifacts:
+          path: ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
+
+  # Runs unit tests tests on Android
+  test-android:
+    <<: *android_defaults
+    steps:
+      - checkout
+      
+      # Configure Android dependencies
+      - run: *configure-android-path
+      - run: *install-build-dependencies
+      - restore-cache: *restore-cache-android-packages
+      - run: *install-android-packages
+      - save-cache: *save-cache-android-packages
+
+      # Starting emulator in advance as it takes some time to boot.      
+      - run:
+          name: Create Android Virtual Device
+          command: source scripts/circle-ci-android-setup.sh && createAVD
+      - run:
+          name: Launch Android Virtual Device in Background
+          command: source scripts/circle-ci-android-setup.sh && launchAVD
+          background: true
+      
+      # Keep configuring Android dependencies while AVD boots up
+      - run: *create-ndk-directory
+      - restore-cache: *restore-cache-ndk
+      - run: *install-ndk
+      - save-cache: *save-cache-ndk
+
+      - restore-cache: *restore-cache-buck
+      - run: *install-buck
+      - save-cache: *save-cache-buck
+
+      - run: *install-node
+
+      - restore-cache: *restore-node-cache
+      - run: *install-node-dependencies
+      - save-cache: *save-node-cache
+
+      - run: buck fetch ReactAndroid/src/test/java/com/facebook/react/modules
+      - run: buck fetch ReactAndroid/src/main/java/com/facebook/react
+      - run: buck fetch ReactAndroid/src/main/java/com/facebook/react/shell
+      - run: buck fetch ReactAndroid/src/test/...
+      - run: buck fetch ReactAndroid/src/androidTest/...
+      - run: ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog :ReactAndroid:downloadJSCHeaders
+
+      - run: *build-android-app
+      - run: *compile-native-libs
+
+      # The JavaScript Bundle is built as part of the build-js-bundle workflow, 
+      # and is required for instrumentation tests.
+      - attach_workspace:
+          at: ReactAndroid/src/androidTest/assets/
+      - run: *check-js-bundle
+
+      # Wait for AVD to finish booting before running tests
+      - run: *wait-for-avd
+            
+      # Tests
+      - run: *run-android-unit-tests
+      - run: *run-android-integration-tests
+      
+      # post (always runs)
+      - run: *collect-android-test-results
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
+  analyze-pull-request:
+    <<: *defaults
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - restore-cache: *restore-cache-analysis
+      - run: *install-node-dependencies
+      - run:
+          name: Install Dependencies
+          command: |
+            if [ -n "$CIRCLE_PULL_REQUEST" ]; then
+              npm install github@0.2.4
+              cd danger
+              npm install --no-package-lock --no-spin --no-progress
+            else
+              echo "Skipping dependency installation."            
+            fi
+      - save-cache: *save-cache-analysis
+      - run:
+          name: Analyze Pull Request
+          command: |
+            if [ -n "$CIRCLE_PULL_REQUEST" ]; then
+              cd danger && DANGER_GITHUB_API_TOKEN="e622517d9f1136ea8900""07c6373666312cdfaa69" npm run danger
+            else
+              echo "Skipping pull request analysis."            
+            fi
+          when: always
+      - run:
+          name: Analyze Code
+          command: |
+            if [ -n "$CIRCLE_PULL_REQUEST" ]; then
+              cat <(echo eslint; npm run lint --silent -- --format=json; echo flow; npm run flow --silent -- check --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" CI_USER=$CIRCLE_PROJECT_USERNAME CI_REPO=$CIRCLE_PROJECT_REPONAME PULL_REQUEST_NUMBER=$CIRCLE_PR_NUMBER node bots/code-analysis-bot.js
+            else
+              echo "Skipping code analysis."            
+            fi
+          when: always
+          
+# Workflows enables us to run multiple jobs in parallel
+workflows:
+  version: 2
+
+  build:
+    jobs:
+
+      # Run lint and flow checks
+      - run-js-checks:
+          filters: *filter-ignore-gh-pages
+
+      # Test JavaScript on Node 8 and 6
+      - test-js-node-8:
+          filters: *filter-ignore-gh-pages
+      - test-js-node-6:
+          filters: *filter-ignore-gh-pages
+
+      # Test Android
+      - build-js-bundle:
+          filters: *filter-ignore-gh-pages
+      - test-android:
+          requires:
+            - build-js-bundle
+
+      # Test iOS & tvOS
+      - test-objc-ios:
+          filters: *filter-ignore-gh-pages
+      - test-objc-tvos:
+          filters: *filter-ignore-gh-pages
+      - test-objc-e2e:
+          filters: *filter-ignore-gh-pages
+    
+      # If we are on a stable branch, deploy to `npm`
+      - hold:
+          type: approval
+      - deploy:
+          filters: *filter-only-stable
+          requires:
+            - hold
+      
+      - analyze-pull-request:
+          filters: *filter-ignore-master-stable
@@ -4,12 +4,7 @@
 **/main.js
 Libraries/vendor/**/*
 Libraries/Renderer/*
-website/node_modules
 pr-inactivity-bookmarklet.js
 question-bookmarklet.js
 flow/
-website/core/metadata.js
-website/core/metadata-blog.js
-website/src/react-native/docs/
-website/src/react-native/blog/
 danger/
@@ -9,13 +9,15 @@

  "env": {
    "es6": true,
-    "jasmine": true,
+    "jest": true,
  },

  "plugins": [
+    "eslint-comments",
    "flowtype",
    "prettier",
-    "react"
+    "react",
+    "jest"
  ],

  // Map from global var to bool specifying if it can be redefined
@@ -57,11 +59,6 @@
  },

  "rules": {
-  // Flow Plugin
-  // The following rules are made available via `eslint-plugin-flowtype`
-    "flowtype/define-flow-type": 1,
-    "flowtype/use-flow-type": 1,
-
  // General

    // This must be disallowed in this repo because the minimum supported
@@ -81,7 +78,7 @@
    "no-constant-condition": 0,      // disallow use of constant expressions in conditions
    "no-control-regex": 1,           // disallow control characters in regular expressions
    "no-debugger": 1,                // disallow use of debugger
-    "no-dupe-keys": 1,               // disallow duplicate keys when creating object literals
+    "no-dupe-keys": 2,               // disallow duplicate keys when creating object literals
    "no-empty": 0,                   // disallow empty statements
    "no-ex-assign": 1,               // disallow assigning to the exception in a catch block
    "no-extra-boolean-cast": 1,      // disallow double-negation boolean casts in a boolean context
@@ -95,7 +92,7 @@
    "no-regex-spaces": 1,            // disallow multiple spaces in a regular expression literal
    "no-reserved-keys": 0,           // disallow reserved words being used as object literal keys (off by default)
    "no-sparse-arrays": 1,           // disallow sparse arrays
-    "no-unreachable": 1,             // disallow unreachable statements after a return, throw, continue, or break statement
+    "no-unreachable": 2,             // disallow unreachable statements after a return, throw, continue, or break statement
    "use-isnan": 1,                  // disallow comparisons with the value NaN
    "valid-jsdoc": 0,                // Ensure JSDoc comments are valid (off by default)
    "valid-typeof": 1,               // Ensure that the results of typeof are compared against a valid string
@@ -116,7 +113,7 @@
    "no-div-regex": 1,               // disallow division operators explicitly at beginning of regular expression (off by default)
    "no-else-return": 0,             // disallow else after a return in an if (off by default)
    "no-eq-null": 0,                 // disallow comparisons to null without a type-checking operator (off by default)
-    "no-eval": 1,                    // disallow use of eval()
+    "no-eval": 2,                    // disallow use of eval()
    "no-extend-native": 1,           // disallow adding to native types
    "no-extra-bind": 1,              // disallow unnecessary function binding
    "no-fallthrough": 1,             // disallow fallthrough of case statements
@@ -129,7 +126,7 @@
    "no-multi-str": 0,               // disallow use of multiline strings
    "no-native-reassign": 0,         // disallow reassignments of native objects
    "no-new": 1,                     // disallow use of new operator when not part of the assignment or comparison
-    "no-new-func": 1,                // disallow use of new operator for Function object
+    "no-new-func": 2,                // disallow use of new operator for Function object
    "no-new-wrappers": 1,            // disallows creating new instances of String,Number, and Boolean
    "no-octal": 1,                   // disallow use of octal literals
    "no-octal-escape": 1,            // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
@@ -174,6 +171,18 @@
    "no-restricted-modules": 1,      // restrict usage of specified node modules (off by default)
    "no-sync": 0,                    // disallow use of synchronous methods (off by default)

+  // ESLint Comments Plugin
+  // The following rules are made available via `eslint-plugin-eslint-comments`
+    'eslint-comments/no-aggregating-enable': 1, // disallows eslint-enable comments for multiple eslint-disable comments
+    'eslint-comments/no-unlimited-disable': 1, // disallows eslint-disable comments without rule names
+    'eslint-comments/no-unused-disable': 1, // disallow disables that don't cover any errors
+    'eslint-comments/no-unused-enable': 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
+
+  // Flow Plugin
+  // The following rules are made available via `eslint-plugin-flowtype`
+    "flowtype/define-flow-type": 1,
+    "flowtype/use-flow-type": 1,
+
  // Prettier Plugin
  // https://github.com/prettier/eslint-plugin-prettier
    "prettier/prettier": [2, "fb", "@format"],
@@ -183,12 +192,12 @@

    "key-spacing": 0,
    "keyword-spacing": 1,            // enforce spacing before and after keywords
-    "jsx-quotes": [1, "prefer-double"],
+    "jsx-quotes": [1, "prefer-double"], // enforces the usage of double quotes for all JSX attribute values which doesn’t contain a double quote
    "comma-spacing": 0,
    "no-multi-spaces": 0,
    "brace-style": 0,                // enforce one true brace style (off by default)
    "camelcase": 0,                  // require camel case names
-    "consistent-this": [1, "self"],            // enforces consistent naming when capturing the current execution context (off by default)
+    "consistent-this": 1,            // enforces consistent naming when capturing the current execution context (off by default)
    "eol-last": 1,                   // enforce newline at the end of file, with no multiple empty lines
    "func-names": 0,                 // require function expressions to have a name (off by default)
    "func-style": 0,                 // enforces use of function declarations or expressions (off by default)
@@ -196,6 +205,7 @@
    "new-parens": 1,                 // disallow the omission of parentheses when invoking a constructor with no arguments
    "no-nested-ternary": 0,          // disallow nested ternary expressions (off by default)
    "no-array-constructor": 1,       // disallow use of the Array constructor
+    'no-empty-character-class': 1,   // disallow the use of empty character classes in regular expressions
    "no-lonely-if": 0,               // disallow if as the only statement in an else block (off by default)
    "no-new-object": 1,              // disallow use of the Object constructor
    "no-spaced-func": 1,             // disallow space between function identifier and application
@@ -232,7 +242,7 @@
    "react/jsx-boolean-value": 0,
    "react/jsx-no-comment-textnodes": 1,
    "react/jsx-no-duplicate-props": 2,
-    "react/jsx-no-undef": 1,
+    "react/jsx-no-undef": 2,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
@@ -244,6 +254,13 @@
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 1,
    "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
+
+  // Jest Plugin
+  // The following rules are made available via `eslint-plugin-jest`.
+    "jest/no-disabled-tests": 1,
+    "jest/no-focused-tests": 1,
+    "jest/no-identical-title": 1,
+    "jest/valid-expect": 1,
  }
 }
@@ -5,9 +5,6 @@
 ; Ignore templates for 'react-native init'
 .*/local-cli/templates/.*

-; Ignore the website subdir
-<PROJECT_ROOT>/website/.*
-
 ; Ignore the Dangerfile
 <PROJECT_ROOT>/danger/dangerfile.js

@@ -25,11 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*

+; Ignore metro
+.*/node_modules/metro/.*
+
 [include]

 [libs]
 Libraries/react-native/react-native-interface.js
 flow/
+flow-github/

 [options]
 emoji=true
@@ -44,14 +45,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FixMe

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.53.0
+^0.63.0
@@ -1,5 +1,3 @@
-docs/* @hramos
-blog/* @hramos
 Libraries/Animated/* @janicduplessis
 Libraries/NativeAnimation/* @janicduplessis
 Libraries/Image/* @shergin
@@ -9,10 +7,8 @@ React/Views/* @shergin
 React/Modules/* @shergin
 React/CxxBridge/* @mhorowitz
 ReactAndroid/src/main/java/com/facebook/react/animated/* @janicduplessis
-website/* @hramos
-website/showcase.json @hramos
+**/*.md @hramos
 package.json @hramos
-website/package.json @hramos
 local-cli/core/* @grabbou @kureev
 local-cli/link/* @grabbou @kureev
 local-cli/unlink/* @grabbou @kureev
@@ -16,7 +16,7 @@
  If you answered "No":

    We use GitHub Issues exclusively for tracking bugs in React Native. If you're looking for help,
-    the Community page at http://facebook.github.io/react-native/support.html list various resources 
+    the Community page at http://facebook.github.io/react-native/help.html list various resources 
    that should help you get started.

  Now scroll below!
@@ -29,25 +29,29 @@
 ### Environment

 <!--
-  Please fill in all the relevant fields by running these commands in terminal.
+  In your terminal run `react-native info` and paste its contents here. Next, specify your target platform, like this:
+
+  Environment:
+    OS:  macOS Sierra 10.12.6
+    Node:  8.4.0
+    Yarn:  0.27.5
+    npm:  5.4.0
+    Watchman:  4.7.0
+    Xcode:  Xcode 8.3.3 Build version 8E3004b
+    Android Studio:  2.3 AI-162.4069837
+
+  Packages: (wanted => installed)
+    react-native: 0.48.1 => 0.48.1
+    react: 16.0.0-alpha.12 => 16.0.0-alpha.12
+
+  Target Platform: iOS (10.3)
+
+  ***Make sure you are on v0.48.0 or greater of react-native, otherwise you may get this error:
+
+  Unrecognized command 'info'
+  Run react-native --help to see list of all available commands
 -->

-1. `react-native -v`:
-2. `node -v`:
-3. `npm -v`:
-4. `yarn --version`<!-- (if you use Yarn) -->:
-
-Then, specify:
-
-<!-- (What platform are you building for? Choose any from iOS, Android, AppleTV.) -->
- Target Platform:
-
-<!-- Which operating system are you using? Specify macOS, Windows, or Linux, along with specific release versions -->
- Development Operating System:
-
-<!-- Include any additional relevant information. Are you using Xcode or Android Studio to build native code? Is the issue specific to a particular iOS or Android SDK? -->
- Build tools:
-
 ### Steps to Reproduce

 <!--
@@ -9,8 +9,42 @@ Happy contributing!

 -->

+## Motivation
+
 (Write your motivation here.)

 ## Test Plan

 (Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
+
+## Related PRs
+
+(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.)
+
+## Release Notes
+<!--
+Help reviewers and the release process by writing your own release notes
+
+**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
+
+  CATEGORY
+[----------]        TYPE
+[ CLI      ]   [-------------]      LOCATION
+[ DOCS     ]   [ BREAKING    ]   [-------------]
+[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
+[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
+[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
+[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
+[----------]   [-------------]   [-------------]   |-----------|
+
+[CATEGORY] [TYPE] [LOCATION] - MESSAGE
+
+ EXAMPLES:
+
+ [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
+ [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
+ [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
+ [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
+ [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
+ [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
+-->
@@ -0,0 +1,9 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+# Number of days of inactivity before an Issue is closed for lack of response
+daysUntilClose: 14
+# Label requiring a response
+responseRequiredLabel: Needs more information
+# Comment to post when closing an Issue for lack of response. Set to `false` to disable
+closeComment: >
+  Closing this issue as more information is needed to debug this and we have not heard back from the author.
@@ -0,0 +1,20 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - Good first issue
+  - For Discussion
+  - Core Team 
+# Label to use when marking an issue as stale
+staleLabel: Stale 
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs.
+  Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people.
+  If you think this issue should definitely remain open, please let us know why.
+  Thank you for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
@@ -1,49 +0,0 @@
-language: objective-c
-
-osx_image: xcode8.3
-
-install:
-  - nvm install 7
-  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
-  - brew install yarn --ignore-dependencies
-  - brew install watchman
-  - yarn install
-
-script:
-  - if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait 30 ./scripts/objc-test-ios.sh test; fi
-  - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait 30 ./scripts/objc-test-tvos.sh; fi
-  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
-  - if [[ ( "$TEST_TYPE" = podspecs ) && ( "$TRAVIS_PULL_REQUEST" = "false" ) ]]; then gem install cocoapods && travis_wait 30 ./scripts/process-podspecs.sh; fi
-
-cache:
-  - cocoapods
-  - yarn
-
-matrix:
-  - fast_finish: true # Fail the whole build as soon as one test type fails. Should help with Travis capacity issues (very long queues).
-
-# The order of these tests says which are more likely to run first and fail the whole build fast.
-env:
-  - TEST_TYPE=objc-ios
-  - TEST_TYPE=podspecs
-  - TEST_TYPE=e2e-objc
-  - TEST_TYPE=objc-tvos
-
-branches:
-  only:
-    - master
-    - /^.*-stable$/
-
-notifications:
-  email:
-    recipients:
-      - douglowder@mac.com # Doug Lowder built and maintains Apple TV specific code and wants to be notified about tvOS failures.
-      - eloy@artsy.net # Eloy Durán maintains the podspecs test and wants to be notified about failures.
-    on_failure: change
-    on_success: change
-  slack:
-    secure: oQL2C966v7/DtxNqfM7WowjY0R5mgLHR2qHkoucwK5iVrmaptnHr8fq01xlj7VT0kDwNLqT3n4+gtCviGw89lq71m3W76c8Pms/10jpjw+LwAfQPVizNw/Bx8MFNNmjDauK/auFxaybiLZupi7zd4xFGOZvScmFdfD4CAAp2OOA=
-    on_pull_requests: false
-    on_failure: change
-    on_success: change
-  webhooks: https://code.facebook.com/travis/webhook/
@@ -0,0 +1,43 @@
+# [Open Source Code of Conduct](https://code.facebook.com/codeofconduct)
+
+This code of conduct outlines our expectations for participants within the **Facebook Open Source** community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.
+
+Our open source community strives to:
+
+* **Be friendly and patient.**
+* **Be welcoming:** We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
+* **Be considerate:** Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that we’re a world-wide community, so you might not be communicating in someone else’s primary language.
+* **Be respectful:** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It’s important to remember that a community where people feel uncomfortable or threatened is not a productive one.
+* **Be careful in the words that you choose:** we are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior aren’t acceptable. This includes, but is not limited to:
+  * Violent threats or language directed against another person.
+  * Discriminatory jokes and language.
+  * Posting sexually explicit or violent material.
+  * Posting (or threatening to post) other people’s personally identifying information (“doxing”).
+  * Personal insults, especially those using racist or sexist terms.
+  * Unwelcome sexual attention.
+  * Advocating for, or encouraging, any of the above behavior.
+  * Repeated harassment of others. In general, if someone asks you to stop, then stop.
+* **When we disagree, try to understand why:** Disagreements, both social and technical, happen all the time. It is important that we resolve disagreements and differing views constructively.
+* **Remember that we’re different.** The strength of our community comes from its diversity, people from a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to err and blaming each other doesn’t get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
+
+This code is not exhaustive or complete. It serves to distill our common understanding of a collaborative, shared environment, and goals. We expect it to be followed in spirit as much as in the letter.
+
+## Diversity Statement
+
+We encourage everyone to participate and are committed to building a community for all. Although we may not be able to satisfy everyone, we all agree that everyone is equal. Whenever a participant has made a mistake, we expect them to take responsibility for it. If someone has been harmed or offended, it is our responsibility to listen carefully and respectfully, and do our best to right the wrong.
+
+Although this list cannot be exhaustive, we explicitly honor diversity in age, gender, gender identity or expression, culture, ethnicity, language, national origin, political beliefs, profession, race, religion, sexual orientation, socioeconomic status, and technical ability. We will not tolerate discrimination based on any of the protected characteristics above, including participants with disabilities.
+
+## Reporting Issues
+
+If you experience or witness unacceptable behavior—or have any other concerns—please report it by contacting us via opensource@fb.com. All reports will be handled with discretion. In your report please include:
+
+* Your contact information.
+* Names (real, nicknames, or pseudonyms) of any individuals involved. If there are additional witnesses, please include them as well. Your account of what occurred, and if you believe the incident is ongoing. If there is a publicly available record (e.g. a mailing list archive or a public IRC logger), please include a link.
+* Any additional information that may be helpful.
+
+After filing a report, a representative will contact you personally. If the person who is harassing you is part of the response team, they will recuse themselves from handling your incident. A representative will then review the incident, follow up with any additional questions, and make a decision as to how to respond. We will respect confidentiality requests for the purpose of protecting victims of abuse.
+
+Anyone asked to stop unacceptable behavior is expected to comply immediately. If an individual engages in unacceptable behavior, the representative may take any action they deem appropriate, up to and including a permanent ban from our community without warning.
+
+_This Code Of Conduct follows the [template](http://todogroup.org/opencodeofconduct/) established by the [TODO Group](http://todogroup.org/)._
@@ -11,10 +11,10 @@ Facebook has adopted a Code of Conduct that we expect project participants to ad

 There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:

-* Simply start using React Native. Go through the [Getting Started](http://facebook.github.io/react-native/docs/getting-started.html) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
-* Look through the [open issues](https://github.com/facebook/react-native/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](http://facebook.github.io/react-native/docs/contributing.html#triaging-issues-and-pull-requests).
-* If you find an issue you would like to fix, [open a pull request](http://facebook.github.io/react-native/docs/contributing.html#your-first-pull-request). Issues tagged as [_Good First Task_](https://github.com/facebook/react-native/labels/Good%20First%20Task) are a good place to get started.
-* Read through the [React Native docs](http://facebook.github.io/react-native/docs). If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs.
+* Simply start using React Native. Go through the [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](https://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
+* Look through the [open issues](https://github.com/facebook/react-native/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](https://facebook.github.io/react-native/docs/contributing.html#triaging-issues-and-pull-requests).
+* If you find an issue you would like to fix, [open a pull request](https://facebook.github.io/react-native/docs/contributing.html#your-first-pull-request). Issues tagged as [_Good first issue_](https://github.com/facebook/react-native/labels/Good%20first%20issue) are a good place to get started.
+* Read through the [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html). If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs.
 * Browse [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native) and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
 * Take a look at the [features requested](https://react-native.canny.io/feature-requests) by others in the community and consider opening a pull request if you see something you want to work on.

@@ -43,13 +43,13 @@ When a change made on GitHub is approved, it will first be imported into Faceboo

 We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to [communicate these changes](https://github.com/facebook/react-native/releases) and version appropriately so you can lock into a specific version if need be.

-To see what changes are coming and provide better feedback to React Native contributors, use the [latest release candidate](http://facebook.github.io/react-native/versions.html) when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
+To see what changes are coming and provide better feedback to React Native contributors, use the [latest release candidate](https://facebook.github.io/react-native/versions.html) when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.

 ## Bugs

-We use [GitHub Issues](https://github.com/facebook/react-native/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a [bug report](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).
+We use [GitHub Issues](https://github.com/facebook/react-native/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a [bug report](https://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues).

-If you have questions about using React Native, the [Community page](http://facebook.github.io/react-native/support.html) list various resources that should help you get started.
+If you have questions about using React Native, the [Community page](https://facebook.github.io/react-native/help.html) list various resources that should help you get started.

 We also have a [place where you can request features or enhancements](https://react-native.canny.io/feature-requests). If you see anything you'd like to be implemented, vote it up and explain your use case.

@@ -60,9 +60,9 @@ When [opening a new issue](https://github.com/facebook/react-native/issues/new),
 * **One issue, one bug:** Please report a single bug per issue.
 * **Provide a Snack:** The best way to get attention on your issue is to provide a reduced test case. You can use [Snack](https://snack.expo.io/) to demonstrate the issue.
 * **Provide reproduction steps:** List all the steps necessary to reproduce the issue. Provide a Snack or upload a sample project to GitHub. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
-* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [React Native from `master`](http://facebook.github.io/react-native/versions.html). The bug may have already been fixed!
+* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [React Native from `master`](https://facebook.github.io/react-native/versions.html). The bug may have already been fixed!

-We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on [Stack Overflow](http://stackoverflow.com/questions/tagged/react-native) or reaching out to the community through [other channels](https://facebook.github.io/react-native/support.html).
+We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native) or reaching out to the community through [other channels](https://facebook.github.io/react-native/support.html).

 ### Security bugs

@@ -92,35 +92,32 @@ If you're only fixing a bug, it's fine to submit a pull request right away but w

 Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

-**Before submitting a pull request**, please make sure the following is done:
+Please make sure the following is done when submitting a pull request:

 1. Fork [the repository](https://github.com/facebook/react-native) and create your branch from `master`.
 2. Add the copyright notice to the top of any new files you've added.
-3. Describe your [**test plan**](https://facebook.github.io/react-native/docs/contributing.html#test-plan) in your commit.
-4. Ensure [**tests pass**](https://facebook.github.io/react-native/docs/contributing.html#contrinuous-integration-tests) on both Travis and Circle CI.
-5. Make sure your code lints (`npm run lint`).
-6. If you haven't already, [sign the CLA](https://code.facebook.com/cla).
+3. Describe your [**test plan**](https://facebook.github.io/react-native/docs/contributing.html#test-plan) in your pull request description. Make sure to [test your changes](https://facebook.github.io/react-native/docs/testing.html)!
+4. Make sure your code lints (`npm run lint`).
+5. If you haven't already, [sign the CLA](https://code.facebook.com/cla).

-All pull requests should be opened against the `master` branch.
+All pull requests should be opened against the `master` branch. After opening your pull request, ensure [**all tests pass**](https://facebook.github.io/react-native/docs/contributing.html#contrinuous-integration-tests) on Circle CI. If a test fails and you believe it is unrelated to your change, leave a comment on the pull request explaining why.

 > **Note:** It is not necessary to keep clicking `Merge master to your branch` on the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.

 #### Test plan

-A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website.
+A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.

 * If you've added code that should be tested, add tests!
 * If you've changed APIs, update the documentation.
-* If you've updated the docs, verify the website locally and submit screenshots if applicable (see [website/README.md](https://github.com/facebook/react-native/blob/master/website/README.md))

 See [What is a Test Plan?](https://medium.com/@martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9) to learn more.

 #### Continuous integration tests

-Make sure all **tests pass** on both [Travis][travis] and [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](https://facebook.github.io/react-native/docs/testing.html).
+Make sure all **tests pass** on [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](https://facebook.github.io/react-native/docs/testing.html).

-[travis]: https://travis-ci.org/facebook/react-native
-[circle]: http://circleci.com/gh/facebook/react-native
+[circle]: https://circleci.com/gh/facebook/react-native

 #### Breaking changes

@@ -180,7 +177,7 @@ However, there are still some styles that the linter cannot pick up.
 #### JavaScript

 * Use semicolons;
-* `'use strict';`
+* ES6 standards
 * Prefer `'` over `"`
 * Do not use the optional parameters of `setTimeout` and `setInterval`
 * 80 character line length
@@ -1,7 +1,7 @@
-FROM containership/android-base:latest
+FROM hramos/android-base:latest

 # set default environment variables
-ENV GRADLE_OPTS="-Dorg.gradle.jvmargs=\"-Xmx512m -XX:+HeapDumpOnOutOfMemoryError\""
+ENV GRADLE_OPTS="-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs=\"-Xmx512m -XX:+HeapDumpOnOutOfMemoryError\""
 ENV JAVA_TOOL_OPTIONS="-Dfile.encoding=UTF8"

 # add ReactAndroid directory
@@ -46,9 +46,5 @@ RUN cd $(npm root -g)/npm && npm install fs-extra && sed -i -e s/graceful-fs/fs-

 # build node dependencies
 RUN npm install
-RUN npm install github@0.2.4
-
-WORKDIR /app/website
-RUN npm install

 WORKDIR /app
@@ -1,8 +1,8 @@
 FROM library/ubuntu:16.04

 # set default build arguments
-ARG ANDROID_VERSION=25.2.3
-ARG BUCK_VERSION=f3452a6a7ab15a60e94c962e686293acbe677473
+ARG ANDROID_TOOLS_VERSION=25.2.5
+ARG BUCK_VERSION=v2017.11.16.01
 ARG NDK_VERSION=10e
 ARG NODE_VERSION=6.2.0
 ARG WATCHMAN_VERSION=4.7.0
@@ -12,7 +12,7 @@ ENV ADB_INSTALL_TIMEOUT=10
 ENV PATH=${PATH}:/opt/buck/bin/
 ENV ANDROID_HOME=/opt/android
 ENV ANDROID_SDK_HOME=${ANDROID_HOME}
-ENV PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
+ENV PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/tools/bin:${ANDROID_HOME}/platform-tools
 ENV ANDROID_NDK=/opt/ndk/android-ndk-r$NDK_VERSION
 ENV PATH=${PATH}:${ANDROID_NDK}

@@ -28,9 +28,8 @@ RUN npm install n -g
 RUN n $NODE_VERSION

 # download buck
-RUN git clone https://github.com/facebook/buck.git /opt/buck
+RUN git clone https://github.com/facebook/buck.git /opt/buck --branch $BUCK_VERSION --depth=1
 WORKDIR /opt/buck
-RUN git checkout $BUCK_VERSION

 # build buck
 RUN ant
@@ -46,10 +45,11 @@ RUN ./configure
 RUN make
 RUN make install

+# Full reference at https://dl.google.com/android/repository/repository2-1.xml
 # download and unpack android
 RUN mkdir /opt/android
 WORKDIR /opt/android
-RUN curl --silent https://dl.google.com/android/repository/tools_r$ANDROID_VERSION-linux.zip > android.zip
+RUN curl --silent https://dl.google.com/android/repository/tools_r$ANDROID_TOOLS_VERSION-linux.zip > android.zip
 RUN unzip android.zip
 RUN rm android.zip

@@ -63,39 +63,15 @@ RUN unzip ndk.zip
 RUN rm ndk.zip

 # Add android SDK tools
-
-# Android SDK Platform-tools, revision 25.0.4
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android SDK Platform-tools, revision 25.0.4" | awk '{ print $1 }' | sed 's/.$//')
-
-# Android SDK Build-tools, revision 23.0.1
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Android SDK Build-tools, revision 23.0.1" | awk '{ print $1 }' | sed 's/.$//')
-
-# SDK Platform Android 6.0, API 23, revision 3
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "SDK Platform Android 6.0, API 23" | awk '{ print $1 }' | sed 's/.$//')
-
-# SDK Platform Android 4.4.2, API 19, revision 4
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "SDK Platform Android 4.4.2, API 19, revision 4" | awk '{ print $1 }' | sed 's/.$//')
-
-# ARM EABI v7a System Image, Android API 19, revision 5
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "ARM EABI v7a System Image, Android API 19, revision 5" | awk '{ print $1 }' | sed 's/.$//')
-
-# Intel x86 Atom System Image, Android API 19, revision 5
-RUN echo "y" | android update sdk -u -a -t $(android list sdk -a | grep "Intel x86 Atom System Image, Android API 19, revision 5" | awk '{ print $1 }' | sed 's/.$//')
-
-# Google APIs, Android API 23, revision 1
-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" | awk '{ print $1 }' | sed 's/.$//')
+RUN echo "y" | sdkmanager "system-images;android-19;google_apis;armeabi-v7a"
+RUN echo "y" | sdkmanager "platforms;android-23"
+RUN echo "y" | sdkmanager "platforms;android-19"
+RUN echo "y" | sdkmanager "build-tools;23.0.1"
+RUN echo "y" | sdkmanager "add-ons;addon-google_apis-google-23"
+RUN echo "y" | sdkmanager "extras;android;m2repository"

 # 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
@@ -20,7 +20,6 @@
 * --package - com.facebook.react.tests
 * --retries [num] - how many times to retry possible flaky commands: npm install and running tests, default 1
 */
-/*eslint-disable no-undef */

 const argv = require('yargs').argv;
 const async = require('async');
@@ -45,7 +44,7 @@ const test_opts = {

    OFFSET: argv.offset,
    COUNT: argv.count
-}
+};

 let max_test_class_length = Number.NEGATIVE_INFINITY;

@@ -85,14 +84,14 @@ if (test_opts.COUNT != null && test_opts.OFFSET != null) {
 }

 return async.mapSeries(testClasses, (clazz, callback) => {
-    if(clazz.length > max_test_class_length) {
+    if (clazz.length > max_test_class_length) {
        max_test_class_length = clazz.length;
    }

    return async.retry(test_opts.RETRIES, (retryCb) => {
        const test_process = child_process.spawn('./ContainerShip/scripts/run-instrumentation-tests-via-adb-shell.sh', [test_opts.PACKAGE, clazz], {
            stdio: 'inherit'
-        })
+        });

        const timeout = setTimeout(() => {
            test_process.kill();
@@ -106,7 +105,7 @@ return async.mapSeries(testClasses, (clazz, callback) => {
        test_process.on('exit', (code) => {
            clearTimeout(timeout);

-            if(code !== 0) {
+            if (code !== 0) {
                return retryCb(new Error(`Process exited with code: ${code}`));
            }

@@ -138,16 +137,16 @@ function print_test_suite_results(results) {
    function pad_output(num_chars) {
        let i = 0;

-        while(i < num_chars) {
+        while (i < num_chars) {
            process.stdout.write(' ');
            i++;
        }
    }
    results.forEach((test) => {
-        if(test.status === 'success') {
+        if (test.status === 'success') {
            color = colors.GREEN;
            passing_suites++;
-        } else if(test.status === 'failure') {
+        } else if (test.status === 'failure') {
            color = colors.RED;
            failing_suites++;
        }
@@ -29,7 +29,7 @@ def update():
  # prevent CircleCI from killing the process for inactivity
  while not done:
    time.sleep(5)
-    print "Running in background.  Waiting for 'adb' command reponse..."
+    print "Running in background.  Waiting for 'adb' command response..."

 t = threading.Thread(target=update)
 t.dameon = True
@@ -155,7 +155,7 @@ function testOptimizedMultiGet() {
  let keys = batch.map(([key, value]) => key);
  AsyncStorage.multiSet(batch, (err1) => {
    // yes, twice on purpose
-    ;[1, 2].forEach((i) => {
+    [1, 2].forEach((i) => {
      expectAsyncNoError(`${i} testOptimizedMultiGet/multiSet`, err1);
      AsyncStorage.multiGet(keys, (err2, result) => {
        expectAsyncNoError(`${i} testOptimizedMultiGet/multiGet`, err2);
@@ -189,7 +189,11 @@ class AsyncStorageTest extends React.Component<{}, $FlowFixMeState> {
    return (
      <View style={{backgroundColor: 'white', padding: 40}}>
        <Text>
-          {this.constructor.displayName + ': '}
+          {
+            /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
+             * comment suppresses an error found when Flow v0.54 was deployed.
+             * To see the error delete this comment and run Flow. */
+            this.constructor.displayName + ': '}
          {this.state.done ? 'Done' : 'Testing...'}
          {'\n\n' + this.state.messages}
        </Text>
@@ -48,7 +48,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
    const results: Array<?boolean> = TESTS.map(x => nextState[x]);

    if (!results.includes(undefined)) {
-      const result: boolean = results.reduce((x,y) => x === y === true, true)
+      const result: boolean = results.reduce((x,y) => x === y === true, true);
      TestModule.markTestPassed(result);
    }

@@ -65,7 +65,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
        <Text>Hello</Text>
      <Image
        source={{
-              uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
+              uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
              cache: 'only-if-cached'
            }}
        onLoad={() => this.testComplete('only-if-cached', false)}
@@ -74,7 +74,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
      />
        <Image
          source={{
-              uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
+              uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
              cache: 'default'
            }}
          onLoad={() => this.testComplete('default', true)}
@@ -83,7 +83,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
        />
        <Image
          source={{
-              uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
+              uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
              cache: 'reload'
            }}
          onLoad={() => this.testComplete('reload', true)}
@@ -92,7 +92,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
        />
        <Image
          source={{
-              uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(),
+              uri: 'https://facebook.github.io/react-native/img/favicon.png?cacheBust=notinCache' + Date.now(),
              cache: 'force-cache'
            }}
          onLoad={() => this.testComplete('force-cache', true)}
@@ -11,6 +11,9 @@
 */
 'use strict';

+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -60,7 +63,11 @@ class IntegrationTestHarnessTest extends React.Component<{
    return (
      <View style={{backgroundColor: 'white', padding: 40}}>
        <Text>
-          {this.constructor.displayName + ': '}
+          {
+            /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
+             * comment suppresses an error found when Flow v0.54 was deployed.
+             * To see the error delete this comment and run Flow. */
+            this.constructor.displayName + ': '}
          {this.state.done ? 'Done' : 'Testing...'}
        </Text>
      </View>
@@ -40,6 +40,9 @@ var TESTS = [
 ];

 TESTS.forEach(
+  /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
+   * suppresses an error found when Flow v0.54 was deployed. To see the error
+   * delete this comment and run Flow. */
  (test) => AppRegistry.registerComponent(test.displayName, () => test)
 );

@@ -29,17 +29,7 @@ function debug(...args) {
  // console.log.apply(null, arguments);
 }

-type Layout = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-type LayoutEvent = {
-  nativeEvent: {
-    layout: Layout;
-  };
-};
+import type {Layout, LayoutEvent} from 'CoreEventTypes';
 type Style = {
  margin?: number,
  padding?: number,
@@ -13,6 +13,9 @@

 var React = require('react');
 var ReactNative = require('react-native');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');

 var {
@@ -14,6 +14,9 @@
 var React = require('react');
 var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 var TimerMixin = require('react-timer-mixin');

 var {
@@ -15,6 +15,9 @@

 /* eslint-env node */

+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const WebSocket = require('ws');

 console.log(`\
@@ -15,6 +15,15 @@

@implementation ARTSurfaceView

+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    self.opaque = NO;
+  }
+
+  return self;
+}
+
 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
 {
  [super insertReactSubview:subview atIndex:atIndex];
@@ -46,9 +55,4 @@
  }
 }

- (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
-{
-  self.backgroundColor = inheritedBackgroundColor;
-}
-
@end
@@ -51,7 +51,7 @@
          CGPathAddArc(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE == 0);
          break;
        default:
-          RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr);
+          RCTLogError(@"Invalid CGPath type %llu at element %llu of %@", (unsigned long long)type, (unsigned long long)i, arr);
          CGPathRelease(path);
          return NULL;
      }
@@ -158,7 +158,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
    case 3: // pattern
      return [[ARTPattern alloc] initWithArray:arr];
    default:
-      RCTLogError(@"Unknown brush type: %zd", type);
+      RCTLogError(@"Unknown brush type: %llu", (unsigned long long)type);
      return nil;
  }
 }
@@ -167,7 +167,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
 {
  NSArray *arr = [self NSArray:json];
  if (arr.count < offset + 2) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 2 + offset, arr);
+    RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(2 + offset), arr);
    return CGPointZero;
  }
  return (CGPoint){
@@ -180,7 +180,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
 {
  NSArray *arr = [self NSArray:json];
  if (arr.count < offset + 4) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
+    RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
    return CGRectZero;
  }
  return (CGRect){
@@ -193,7 +193,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
 {
  NSArray *arr = [self NSArray:json];
  if (arr.count < offset + 4) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
+    RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
    return NULL;
  }
  return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
@@ -203,7 +203,7 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
 {
  NSArray *arr = [self NSArray:json];
  if (arr.count < offset) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr);
+    RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)offset, arr);
    return NULL;
  }
  arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
@@ -101,25 +101,29 @@ var TextAttributes = merge(RenderableAttributes, {

 // Native Components

-var NativeSurfaceView = createReactNativeComponentClass({
-  validAttributes: SurfaceViewAttributes,
-  uiViewClassName: 'ARTSurfaceView',
-});
+var NativeSurfaceView = createReactNativeComponentClass('ARTSurfaceView',
+  () => ({
+    validAttributes: SurfaceViewAttributes,
+    uiViewClassName: 'ARTSurfaceView',
+  }));

-var NativeGroup = createReactNativeComponentClass({
-  validAttributes: GroupAttributes,
-  uiViewClassName: 'ARTGroup',
-});
+var NativeGroup = createReactNativeComponentClass('ARTGroup',
+  () => ({
+    validAttributes: GroupAttributes,
+    uiViewClassName: 'ARTGroup',
+  }));

-var NativeShape = createReactNativeComponentClass({
-  validAttributes: ShapeAttributes,
-  uiViewClassName: 'ARTShape',
-});
+var NativeShape = createReactNativeComponentClass('ARTShape',
+  () => ({
+    validAttributes: ShapeAttributes,
+    uiViewClassName: 'ARTShape',
+  }));

-var NativeText = createReactNativeComponentClass({
-  validAttributes: TextAttributes,
-  uiViewClassName: 'ARTText',
-});
+var NativeText = createReactNativeComponentClass('ARTText',
+  () => ({
+    validAttributes: TextAttributes,
+    uiViewClassName: 'ARTText',
+  }));

 // Utilities

@@ -8,37 +8,58 @@
 *
 * @providesModule ActionSheetIOS
 * @flow
+ * @format
 */
 'use strict';

-var RCTActionSheetManager = require('NativeModules').ActionSheetManager;
+const RCTActionSheetManager = require('NativeModules').ActionSheetManager;

-var invariant = require('fbjs/lib/invariant');
-var processColor = require('processColor');
+const invariant = require('fbjs/lib/invariant');
+const processColor = require('processColor');

-var ActionSheetIOS = {
+/**
+ * Display action sheets and share sheets on iOS.
+ *
+ * See http://facebook.github.io/react-native/docs/actionsheetios.html
+ */
+const ActionSheetIOS = {
  /**
-   * Display an iOS action sheet. The `options` object must contain one or more
-   * of:
+   * Display an iOS action sheet.
+   *
+   * The `options` object must contain one or more of:
   *
   * - `options` (array of strings) - a list of button titles (required)
   * - `cancelButtonIndex` (int) - index of cancel button in `options`
   * - `destructiveButtonIndex` (int) - index of destructive button in `options`
   * - `title` (string) - a title to show above the action sheet
   * - `message` (string) - a message to show below the title
+   *
+   * The 'callback' function takes one parameter, the zero-based index
+   * of the selected item.
+   *
+   * See http://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions
   */
-  showActionSheetWithOptions(options: Object, callback: Function) {
+  showActionSheetWithOptions(
+    options: {|
+      +title?: ?string,
+      +message?: ?string,
+      +options: Array<string>,
+      +destructiveButtonIndex?: ?number,
+      +cancelButtonIndex?: ?number,
+      +anchor?: ?number,
+      +tintColor?: number | string,
+    |},
+    callback: (buttonIndex: number) => void,
+  ) {
    invariant(
      typeof options === 'object' && options !== null,
-      'Options must be a valid object'
-    );
-    invariant(
-      typeof callback === 'function',
-      'Must provide a valid callback'
+      'Options must be a valid object',
    );
+    invariant(typeof callback === 'function', 'Must provide a valid callback');
+
    RCTActionSheetManager.showActionSheetWithOptions(
      {...options, tintColor: processColor(options.tintColor)},
-      callback
+      callback,
    );
  },

@@ -50,35 +71,44 @@ var ActionSheetIOS = {
   * - `url` (string) - a URL to share
   * - `message` (string) - a message to share
   * - `subject` (string) - a subject for the message
-   * - `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+   * - `excludedActivityTypes` (array) - the activities to exclude from
+   *   the ActionSheet
+   * - `tintColor` (color) - tint color of the buttons
   *
-   * NOTE: if `url` points to a local file, or is a base64-encoded
-   * uri, the file it points to will be loaded and shared directly.
-   * In this way, you can share images, videos, PDF files, etc.
+   * The 'failureCallback' function takes one parameter, an error object.
+   * The only property defined on this object is an optional `stack` property
+   * of type `string`.
+   *
+   * The 'successCallback' function takes two parameters:
+   *
+   * - a boolean value signifying success or failure
+   * - a string that, in the case of success, indicates the method of sharing
+   *
+   * See http://facebook.github.io/react-native/docs/actionsheetios.html#showshareactionsheetwithoptions
   */
  showShareActionSheetWithOptions(
    options: Object,
    failureCallback: Function,
-    successCallback: Function
+    successCallback: Function,
  ) {
    invariant(
      typeof options === 'object' && options !== null,
-      'Options must be a valid object'
+      'Options must be a valid object',
    );
    invariant(
      typeof failureCallback === 'function',
-      'Must provide a valid failureCallback'
+      'Must provide a valid failureCallback',
    );
    invariant(
      typeof successCallback === 'function',
-      'Must provide a valid successCallback'
+      'Must provide a valid successCallback',
    );
    RCTActionSheetManager.showShareActionSheetWithOptions(
      {...options, tintColor: processColor(options.tintColor)},
      failureCallback,
-      successCallback
+      successCallback,
    );
-  }
+  },
 };

 module.exports = ActionSheetIOS;
@@ -17,7 +17,7 @@ const Platform = require('Platform');

 import type { AlertType, AlertButtonStyle } from 'AlertIOS';

-type Buttons = Array<{
+export type Buttons = Array<{
  text?: string,
  onPress?: ?Function,
  style?: AlertButtonStyle,
@@ -30,54 +30,16 @@ type Options = {

 /**
 * Launches an alert dialog with the specified title and message.
- *
- * Optionally provide a list of buttons. Tapping any button will fire the
- * respective onPress callback and dismiss the alert. By default, the only
- * button will be an 'OK' button.
- *
- * This is an API that works both on iOS and Android and can show static
- * alerts. To show an alert that prompts the user to enter some information,
- * see `AlertIOS`; entering text in an alert is common on iOS only.
- *
- * ## iOS
- *
- * On iOS you can specify any number of buttons. Each button can optionally
- * specify a style, which is one of 'default', 'cancel' or 'destructive'.
- *
- * ## Android
- *
- * On Android at most three buttons can be specified. Android has a concept
- * of a neutral, negative and a positive button:
- *
- *   - If you specify one button, it will be the 'positive' one (such as 'OK')
- *   - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
- *   - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
- *
- * By default alerts on Android can be dismissed by tapping outside of the alert
- * box. This event can be handled by providing an optional `options` parameter,
- * with an `onDismiss` callback property `{ onDismiss: () => {} }`.
- *
- * Alternatively, the dismissing behavior can be disabled altogether by providing
- * an optional `options` parameter with the `cancelable` property set to `false`
- * i.e. `{ cancelable: false }`
- *
- * Example usage:
- * ```
- * // Works on both iOS and Android
- * Alert.alert(
- *   'Alert Title',
- *   'My Alert Msg',
- *   [
- *     {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
- *     {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
- *     {text: 'OK', onPress: () => console.log('OK Pressed')},
- *   ],
- *   { cancelable: false }
- * )
- * ```
+ * 
+ * See http://facebook.github.io/react-native/docs/alert.html
 */
 class Alert {

+  /**
+   * Launches an alert dialog with the specified title and message.
+   * 
+   * See http://facebook.github.io/react-native/docs/alert.html#alert
+   */
  static alert(
    title: ?string,
    message?: ?string,
@@ -77,62 +77,15 @@ export type ButtonsArray = Array<{
 }>;

 /**
- * @description
- * `AlertIOS` provides functionality to create an iOS alert dialog with a
- * message or create a prompt for user input.
- *
- * Creating an iOS alert:
- *
- * ```
- * AlertIOS.alert(
- *  'Sync Complete',
- *  'All your data are belong to us.'
- * );
- * ```
- *
- * Creating an iOS prompt:
- *
- * ```
- * AlertIOS.prompt(
- *   'Enter a value',
- *   null,
- *   text => console.log("You entered "+text)
- * );
- * ```
- *
- * We recommend using the [`Alert.alert`](docs/alert.html) method for
- * cross-platform support if you don't need to create iOS-only prompts.
+ * Use `AlertIOS` to display an alert dialog with a message or to create a prompt for user input on iOS. If you don't need to prompt for user input, we recommend using `Alert.alert() for cross-platform support.
 *
+ * See http://facebook.github.io/react-native/docs/alertios.html
 */
 class AlertIOS {
  /**
   * Create and display a popup alert.
-   * @static
-   * @method alert
-   * @param title The dialog's title.
   *
-   *    An empty string hides the title.
-   * @param message An optional message that appears below
-   *     the dialog's title.
-   * @param callbackOrButtons This optional argument should
-   *    be either a single-argument function or an array of buttons. If passed
-   *    a function, it will be called when the user taps 'OK'.
-   *
-   *    If passed an array of button configurations, each button should include
-   *    a `text` key, as well as optional `onPress` and `style` keys. `style`
-   *    should be one of 'default', 'cancel' or 'destructive'.
-   * @param type Deprecated, do not use.
-   *
-   * @example <caption>Example with custom buttons</caption>
-   *
-   * AlertIOS.alert(
-   *  'Update available',
-   *  'Keep your app up to date to enjoy the latest features',
-   *  [
-   *    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
-   *    {text: 'Install', onPress: () => console.log('Install Pressed')},
-   *  ],
-   * );
+   * See http://facebook.github.io/react-native/docs/alertios.html#alert
   */
  static alert(
    title: ?string,
@@ -150,48 +103,8 @@ class AlertIOS {

  /**
   * Create and display a prompt to enter some text.
-   * @static
-   * @method prompt
-   * @param title The dialog's title.
-   * @param message An optional message that appears above the text
-   *    input.
-   * @param callbackOrButtons This optional argument should
-   *    be either a single-argument function or an array of buttons. If passed
-   *    a function, it will be called with the prompt's value when the user
-   *    taps 'OK'.
-   *
-   *    If passed an array of button configurations, each button should include
-   *    a `text` key, as well as optional `onPress` and `style` keys (see
-   *    example). `style` should be one of 'default', 'cancel' or 'destructive'.
-   * @param type This configures the text input. One of 'plain-text',
-   *    'secure-text' or 'login-password'.
-   * @param defaultValue The default text in text input.
-   * @param keyboardType The keyboard type of first text field(if exists).
-   *    One of 'default', 'email-address', 'numeric', 'phone-pad',
-   *    'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad',
-   *    'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.
-   *
-   * @example <caption>Example with custom buttons</caption>
-   *
-   * AlertIOS.prompt(
-   *   'Enter password',
-   *   'Enter your password to claim your $1.5B in lottery winnings',
-   *   [
-   *     {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
-   *     {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)},
-   *   ],
-   *   'secure-text'
-   * );
-   *
-   * @example <caption>Example with the default button and a custom callback</caption>
-   *
-   * AlertIOS.prompt(
-   *   'Update username',
-   *   null,
-   *   text => console.log("Your username is "+text),
-   *   null,
-   *   'default'
-   * );
+   * 
+   * See http://facebook.github.io/react-native/docs/alertios.html#prompt
   */
  static prompt(
    title: ?string,
@@ -211,7 +124,7 @@ class AlertIOS {
      var callback = type;
      var defaultValue = message;
      RCTAlertManager.alertWithArgs({
-        title: title,
+        title: title || '',
        type: 'plain-text',
        defaultValue,
      }, (id, value) => {
@@ -244,7 +157,7 @@ class AlertIOS {
    }

    RCTAlertManager.alertWithArgs({
-      title: title,
+      title: title || '',
      message: message || undefined,
      buttons,
      type: type || undefined,
@@ -510,183 +510,33 @@ const event = function(argMapping: Array<?Mapping>, config?: EventConfig): any {
 * between inputs and outputs, with configurable transforms in between, and
 * simple `start`/`stop` methods to control time-based animation execution.
 *
- * The simplest workflow for creating an animation is to create an
- * `Animated.Value`, hook it up to one or more style attributes of an animated
- * component, and then drive updates via animations using `Animated.timing()`:
- *
- * ```javascript
- * Animated.timing(                            // Animate value over time
- *   this.state.fadeAnim,                      // The value to drive
- *   {
- *     toValue: 1,                             // Animate to final value of 1
- *   }
- * ).start();                                  // Start the animation
- * ```
- *
- * Refer to the [Animations](docs/animations.html#animated-api) guide to see
- * additional examples of `Animated` in action.
- *
- * ## Overview
- *
- * There are two value types you can use with `Animated`:
- *
- * - [`Animated.Value()`](docs/animated.html#value) for single values
- * - [`Animated.ValueXY()`](docs/animated.html#valuexy) for vectors
- *
- * `Animated.Value` can bind to style properties or other props, and can be
- * interpolated as well. A single `Animated.Value` can drive any number of
- * properties.
- *
- * ### Configuring animations
- *
- * `Animated` provides three types of animation types. Each animation type
- * provides a particular animation curve that controls how your values animate
- * from their initial value to the final value:
- *
- * - [`Animated.decay()`](docs/animated.html#decay) starts with an initial
- *   velocity and gradually slows to a stop.
- * - [`Animated.spring()`](docs/animated.html#spring) provides a simple
- *   spring physics model.
- * - [`Animated.timing()`](docs/animated.html#timing) animates a value over time
- *   using [easing functions](docs/easing.html).
- *
- * In most cases, you will be using `timing()`. By default, it uses a symmetric
- * easeInOut curve that conveys the gradual acceleration of an object to full
- * speed and concludes by gradually decelerating to a stop.
- *
- * ### Working with animations
- *
- * Animations are started by calling `start()` on your animation. `start()`
- * takes a completion callback that will be called when the animation is done.
- * If the animation finished running normally, the completion callback will be
- * invoked with `{finished: true}`. If the animation is done because `stop()`
- * was called on it before it could finish (e.g. because it was interrupted by a
- * gesture or another animation), then it will receive `{finished: false}`.
- *
- * ### Using the native driver
- *
- * By using the native driver, we send everything about the animation to native
- * before starting the animation, allowing native code to perform the animation
- * on the UI thread without having to go through the bridge on every frame.
- * Once the animation has started, the JS thread can be blocked without
- * affecting the animation.
- *
- * You can use the native driver by specifying `useNativeDriver: true` in your
- * animation configuration. See the
- * [Animations](docs/animations.html#using-the-native-driver) guide to learn
- * more.
- *
- * ### Animatable components
- *
- * Only animatable components can be animated. These special components do the
- * magic of binding the animated values to the properties, and do targeted
- * native updates to avoid the cost of the react render and reconciliation
- * process on every frame. They also handle cleanup on unmount so they are safe
- * by default.
- *
- * - [`createAnimatedComponent()`](docs/animated.html#createanimatedcomponent)
- *   can be used to make a component animatable.
- *
- * `Animated` exports the following animatable components using the above
- * wrapper:
- *
- * - `Animated.Image`
- * - `Animated.ScrollView`
- * - `Animated.Text`
- * - `Animated.View`
- *
- * ### Composing animations
- *
- * Animations can also be combined in complex ways using composition functions:
- *
- * - [`Animated.delay()`](docs/animated.html#delay) starts an animation after
- *   a given delay.
- * - [`Animated.parallel()`](docs/animated.html#parallel) starts a number of
- *   animations at the same time.
- * - [`Animated.sequence()`](docs/animated.html#sequence) starts the animations
- *   in order, waiting for each to complete before starting the next.
- * - [`Animated.stagger()`](docs/animated.html#stagger) starts animations in
- *   order and in parallel, but with successive delays.
- *
- * Animations can also be chained together simply by setting the `toValue` of
- * one animation to be another `Animated.Value`. See
- * [Tracking dynamic values](docs/animations.html#tracking-dynamic-values) in
- * the Animations guide.
- *
- * By default, if one animation is stopped or interrupted, then all other
- * animations in the group are also stopped.
- *
- * ### Combining animated values
- *
- * You can combine two animated values via addition, multiplication, division,
- * or modulo to make a new animated value:
- *
- * - [`Animated.add()`](docs/animated.html#add)
- * - [`Animated.divide()`](docs/animated.html#divide)
- * - [`Animated.modulo()`](docs/animated.html#modulo)
- * - [`Animated.multiply()`](docs/animated.html#multiply)
- *
- * ### Interpolation
- *
- * The `interpolate()` function allows input ranges to map to different output
- * ranges. By default, it will extrapolate the curve beyond the ranges given,
- * but you can also have it clamp the output value. It uses lineal interpolation
- * by default but also supports easing functions.
- *
- * - [`interpolate()`](docs/animated.html#interpolate)
- *
- * Read more about interpolation in the
- * [Animation](docs/animations.html#interpolation) guide.
- *
- * ### Handling gestures and other events
- *
- * Gestures, like panning or scrolling, and other events can map directly to
- * animated values using `Animated.event()`. This is done with a structured map
- * syntax so that values can be extracted from complex event objects. The first
- * level is an array to allow mapping across multiple args, and that array
- * contains nested objects.
- *
- * - [`Animated.event()`](docs/animated.html#event)
- *
- * For example, when working with horizontal scrolling gestures, you would do
- * the following in order to map `event.nativeEvent.contentOffset.x` to
- * `scrollX` (an `Animated.Value`):
- *
- * ```javascript
- *  onScroll={Animated.event(
- *    // scrollX = e.nativeEvent.contentOffset.x
- *    [{ nativeEvent: {
- *         contentOffset: {
- *           x: scrollX
- *         }
- *       }
- *     }]
- *  )}
- * ```
- *
+ * See http://facebook.github.io/react-native/docs/animated.html
 */
 module.exports = {
  /**
   * Standard value class for driving animations.  Typically initialized with
   * `new Animated.Value(0);`
   *
-   * See also [`AnimatedValue`](docs/animated.html#animatedvalue).
+   * See http://facebook.github.io/react-native/docs/animated.html#value
   */
  Value: AnimatedValue,
  /**
   * 2D value class for driving 2D animations, such as pan gestures.
   *
-   * See also [`AnimatedValueXY`](docs/animated.html#animatedvaluexy).
+   * See https://facebook.github.io/react-native/releases/next/docs/animatedvaluexy.html
   */
  ValueXY: AnimatedValueXY,
  /**
-   * exported to use the Interpolation type in flow
+   * Exported to use the Interpolation type in flow.
   *
-   * See also [`AnimatedInterpolation`](docs/animated.html#animatedinterpolation).
+   * See http://facebook.github.io/react-native/docs/animated.html#interpolation
   */
  Interpolation: AnimatedInterpolation,
  /**
-   * Exported for ease of type checking. All animated values derive from this class.
+   * Exported for ease of type checking. All animated values derive from this
+   * class.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#node
   */
  Node: AnimatedNode,

@@ -694,144 +544,130 @@ module.exports = {
   * Animates a value from an initial velocity to zero based on a decay
   * coefficient.
   *
-   * Config is an object that may have the following options:
-   *
-   *   - `velocity`: Initial velocity.  Required.
-   *   - `deceleration`: Rate of decay.  Default 0.997.
-   *   - `useNativeDriver`: Uses the native driver when true. Default false.
+   * See http://facebook.github.io/react-native/docs/animated.html#decay
   */
  decay,
  /**
-   * Animates a value along a timed easing curve. The
-   * [`Easing`](docs/easing.html) module has tons of predefined curves, or you
-   * can use your own function.
+   * Animates a value along a timed easing curve. The Easing module has tons of
+   * predefined curves, or you can use your own function.
   *
-   * Config is an object that may have the following options:
-   *
-   *   - `duration`: Length of animation (milliseconds).  Default 500.
-   *   - `easing`: Easing function to define curve.
-   *     Default is `Easing.inOut(Easing.ease)`.
-   *   - `delay`: Start the animation after delay (milliseconds).  Default 0.
-   *   - `useNativeDriver`: Uses the native driver when true. Default false.
+   * See http://facebook.github.io/react-native/docs/animated.html#timing
   */
  timing,
  /**
-   * Spring animation based on Rebound and
-   * [Origami](https://facebook.github.io/origami/).  Tracks velocity state to
-   * create fluid motions as the `toValue` updates, and can be chained together.
+   * Animates a value according to an analytical spring model based on
+   * damped harmonic oscillation.
   *
-   * Config is an object that may have the following options. Note that you can
-   * only define bounciness/speed or tension/friction but not both:
-   *
-   *   - `friction`: Controls "bounciness"/overshoot.  Default 7.
-   *   - `tension`: Controls speed.  Default 40.
-   *   - `speed`: Controls speed of the animation. Default 12.
-   *   - `bounciness`: Controls bounciness. Default 8.
-   *   - `useNativeDriver`: Uses the native driver when true. Default false.
+   * See http://facebook.github.io/react-native/docs/animated.html#spring
   */
  spring,

  /**
   * Creates a new Animated value composed from two Animated values added
   * together.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#add
   */
  add,

  /**
   * Creates a new Animated value composed by dividing the first Animated value
   * by the second Animated value.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#divide
   */
  divide,

  /**
   * Creates a new Animated value composed from two Animated values multiplied
   * together.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#multiply
   */
  multiply,

  /**
   * Creates a new Animated value that is the (non-negative) modulo of the
-   * provided Animated value
+   * provided Animated value.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#modulo
   */
  modulo,

  /**
   * Create a new Animated value that is limited between 2 values. It uses the
-   * difference between the last value so even if the value is far from the bounds
-   * it will start changing when the value starts getting closer again.
-   * (`value = clamp(value + diff, min, max)`).
+   * difference between the last value so even if the value is far from the
+   * bounds it will start changing when the value starts getting closer again.
   *
-   * This is useful with scroll events, for example, to show the navbar when
-   * scrolling up and to hide it when scrolling down.
+   * See http://facebook.github.io/react-native/docs/animated.html#diffclamp
   */
  diffClamp,

  /**
   * Starts an animation after the given delay.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#delay
   */
  delay,
  /**
   * Starts an array of animations in order, waiting for each to complete
-   * before starting the next.  If the current running animation is stopped, no
+   * before starting the next. If the current running animation is stopped, no
   * following animations will be started.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#sequence
   */
  sequence,
  /**
-   * Starts an array of animations all at the same time.  By default, if one
-   * of the animations is stopped, they will all be stopped.  You can override
+   * Starts an array of animations all at the same time. By default, if one
+   * of the animations is stopped, they will all be stopped. You can override
   * this with the `stopTogether` flag.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#parallel
   */
  parallel,
  /**
   * Array of animations may run in parallel (overlap), but are started in
   * sequence with successive delays.  Nice for doing trailing effects.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#stagger
   */
  stagger,
  /**
-  * Loops a given animation continuously, so that each time it reaches the
-  * end, it resets and begins again from the start. Can specify number of
-  * times to loop using the key 'iterations' in the config. Will loop without
-  * blocking the UI thread if the child animation is set to 'useNativeDriver'.
-  */
+   * Loops a given animation continuously, so that each time it reaches the
+   * end, it resets and begins again from the start.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#loop
+   */
  loop,

  /**
   * Takes an array of mappings and extracts values from each arg accordingly,
-   * then calls `setValue` on the mapped outputs.  e.g.
+   * then calls `setValue` on the mapped outputs.
   *
-   *```javascript
-   *  onScroll={Animated.event(
-   *    [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
-   *    {listener},          // Optional async listener
-   *  )}
-   *  ...
-   *  onPanResponderMove: Animated.event([
-   *    null,                // raw event arg ignored
-   *    {dx: this._panX},    // gestureState arg
-   *  ]),
-   *```
-   *
-   * Config is an object that may have the following options:
-   *
-   *   - `listener`: Optional async listener.
-   *   - `useNativeDriver`: Uses the native driver when true. Default false.
+   * See http://facebook.github.io/react-native/docs/animated.html#event
   */
  event,

  /**
   * Make any React component Animatable.  Used to create `Animated.View`, etc.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#createanimatedcomponent
   */
  createAnimatedComponent,

  /**
-   * Imperative API to attach an animated value to an event on a view. Prefer using
-   * `Animated.event` with `useNativeDrive: true` if possible.
+   * Imperative API to attach an animated value to an event on a view. Prefer
+   * using `Animated.event` with `useNativeDrive: true` if possible.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#attachnativeevent
   */
  attachNativeEvent,

  /**
-   * Advanced imperative API for snooping on animated events that are passed in through props. Use
-   * values directly where possible.
+   * Advanced imperative API for snooping on animated events that are passed in
+   * through props. Use values directly where possible.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#forkevent
   */
  forkEvent,
  unforkEvent,
@@ -62,14 +62,14 @@ class Easing {
  /**
   * A stepping function, returns 1 for any positive value of `n`.
   */
-  static step0(n) {
+  static step0(n: number) {
    return n > 0 ? 1 : 0;
  }

  /**
   * A stepping function, returns 1 if `n` is greater than or equal to 1.
   */
-  static step1(n) {
+  static step1(n: number) {
    return n >= 1 ? 1 : 0;
  }

@@ -79,7 +79,7 @@ class Easing {
   *
   * http://cubic-bezier.com/#0,0,1,1
   */
-  static linear(t) {
+  static linear(t: number) {
    return t;
  }

@@ -102,7 +102,7 @@ class Easing {
   *
   * http://easings.net/#easeInQuad
   */
-  static quad(t) {
+  static quad(t: number) {
    return t * t;
  }

@@ -112,7 +112,7 @@ class Easing {
   *
   * http://easings.net/#easeInCubic
   */
-  static cubic(t) {
+  static cubic(t: number) {
    return t * t * t;
  }

@@ -122,8 +122,8 @@ class Easing {
   * n = 4: http://easings.net/#easeInQuart
   * n = 5: http://easings.net/#easeInQuint
   */
-  static poly(n) {
-    return (t) => Math.pow(t, n);
+  static poly(n: number) {
+    return (t: number) => Math.pow(t, n);
  }

  /**
@@ -131,7 +131,7 @@ class Easing {
   *
   * http://easings.net/#easeInSine
   */
-  static sin(t) {
+  static sin(t: number) {
    return 1 - Math.cos(t * Math.PI / 2);
  }

@@ -140,7 +140,7 @@ class Easing {
   *
   * http://easings.net/#easeInCirc
   */
-  static circle(t) {
+  static circle(t: number) {
    return 1 - Math.sqrt(1 - t * t);
  }

@@ -149,7 +149,7 @@ class Easing {
   *
   * http://easings.net/#easeInExpo
   */
-  static exp(t) {
+  static exp(t: number) {
    return Math.pow(2, 10 * (t - 1));
  }

@@ -162,11 +162,6 @@ class Easing {
   * times.
   *
   * http://easings.net/#easeInElastic
-   *
-   * Wolfram Plots:
-   *
-   * - http://tiny.cc/elastic_b_1 (bounciness = 1, default)
-   * - http://tiny.cc/elastic_b_3 (bounciness = 3)
   */
  static elastic(bounciness: number = 1): (t: number) => number {
    const p = bounciness * Math.PI;
@@ -147,6 +147,9 @@ const API = {
 const STYLES_WHITELIST = {
  opacity: true,
  transform: true,
+  /* ios styles */
+  shadowOpacity: true,
+  shadowRadius: true,
  /* legacy android transform properties */
  scaleX: true,
  scaleY: true,
@@ -166,11 +169,33 @@ const TRANSFORM_WHITELIST = {
  perspective: true,
 };

+const SUPPORTED_INTERPOLATION_PARAMS = {
+  inputRange: true,
+  outputRange: true,
+  extrapolate: true,
+  extrapolateRight: true,
+  extrapolateLeft: true,
+};
+
+function addWhitelistedStyleProp(prop: string): void {
+  STYLES_WHITELIST[prop] = true;
+}
+
+function addWhitelistedTransformProp(prop: string): void {
+  TRANSFORM_WHITELIST[prop] = true;
+}
+
+function addWhitelistedInterpolationParam(param: string): void {
+  SUPPORTED_INTERPOLATION_PARAMS[param] = true;
+}
+
 function validateTransform(configs: Array<Object>): void {
  configs.forEach(config => {
    if (!TRANSFORM_WHITELIST.hasOwnProperty(config.property)) {
      throw new Error(
-        `Property '${config.property}' is not supported by native animated module`,
+        `Property '${
+          config.property
+        }' is not supported by native animated module`,
      );
    }
  });
@@ -187,13 +212,6 @@ function validateStyles(styles: Object): void {
 }

 function validateInterpolation(config: Object): void {
-  var SUPPORTED_INTERPOLATION_PARAMS = {
-    inputRange: true,
-    outputRange: true,
-    extrapolate: true,
-    extrapolateRight: true,
-    extrapolateLeft: true,
-  };
  for (var key in config) {
    if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
      throw new Error(
@@ -237,6 +255,9 @@ function shouldUseNativeDriver(config: AnimationConfig | EventConfig): boolean {

 module.exports = {
  API,
+  addWhitelistedStyleProp,
+  addWhitelistedTransformProp,
+  addWhitelistedInterpolationParam,
  validateStyles,
  validateTransform,
  validateInterpolation,
@@ -13,15 +13,15 @@
 'use strict';

 type SpringConfigType = {
-  tension: number,
-  friction: number,
+  stiffness: number,
+  damping: number,
 };

-function tensionFromOrigamiValue(oValue) {
+function stiffnessFromOrigamiValue(oValue) {
  return (oValue - 30) * 3.62 + 194;
 }

-function frictionFromOrigamiValue(oValue) {
+function dampingFromOrigamiValue(oValue) {
  return (oValue - 8) * 3 + 25;
 }

@@ -30,8 +30,8 @@ function fromOrigamiTensionAndFriction(
  friction: number,
 ): SpringConfigType {
  return {
-    tension: tensionFromOrigamiValue(tension),
-    friction: frictionFromOrigamiValue(friction)
+    stiffness: stiffnessFromOrigamiValue(tension),
+    damping: dampingFromOrigamiValue(friction),
  };
 }

@@ -91,8 +91,8 @@ function fromBouncinessAndSpeed(
  );

  return {
-    tension: tensionFromOrigamiValue(bouncyTension),
-    friction: frictionFromOrigamiValue(bouncyFriction)
+    stiffness: stiffnessFromOrigamiValue(bouncyTension),
+    damping: dampingFromOrigamiValue(bouncyFriction),
  };
 }

@@ -5,6 +5,8 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -135,7 +137,7 @@ describe('Animated tests', () => {
      expect(callback).toBeCalled();
    });

-    it('send toValue when a spring stops', () => {
+    it('send toValue when an underdamped spring stops', () => {
      var anim = new Animated.Value(0);
      var listener = jest.fn();
      anim.addListener(listener);
@@ -147,6 +149,18 @@ describe('Animated tests', () => {
      expect(anim.__getValue()).toBe(15);
    });

+    it('send toValue when a critically damped spring stops', () => {
+      var anim = new Animated.Value(0);
+      var listener = jest.fn();
+      anim.addListener(listener);
+      Animated.spring(anim, {stiffness: 8000, damping: 2000, toValue: 15}).start();
+      jest.runAllTimers();
+      var lastValue = listener.mock.calls[listener.mock.calls.length - 2][0].value;
+      expect(lastValue).not.toBe(15);
+      expect(lastValue).toBeCloseTo(15);
+      expect(anim.__getValue()).toBe(15);
+    });
+
    it('convert to JSON', () => {
      expect(JSON.stringify(new Animated.Value(10))).toBe('10');
    });
@@ -357,7 +371,7 @@ describe('Animated tests', () => {
      loop.start(cb);

      expect(animation.start).not.toBeCalled();
-      expect(cb).toBeCalledWith({ finished: true });
+      expect(cb).toBeCalledWith({finished: true});
    });

    it('supports interrupting an indefinite loop', () => {
@@ -5,10 +5,13 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

 jest
+  .clearAllMocks()
  .setMock('Text', {})
  .setMock('View', {})
  .setMock('Image', {})
@@ -77,7 +80,7 @@ describe('Native Animated', () => {

      anim.setValue(0.5);

-      expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(jasmine.any(Number), 0.5);
+      expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(expect.any(Number), 0.5);
      expect(c.refs.node.setNativeProps).not.toHaveBeenCalled();
    });

@@ -92,12 +95,12 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        {type: 'value', value: 0, offset: 10},
      );
      anim.setOffset(20);
      expect(nativeAnimatedModule.setAnimatedNodeOffset)
-        .toBeCalledWith(jasmine.any(Number), 20);
+        .toBeCalledWith(expect.any(Number), 20);
    });

    it('should flatten offset', () => {
@@ -110,12 +113,12 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        {type: 'value', value: 0, offset: 0},
      );
      anim.flattenOffset();
      expect(nativeAnimatedModule.flattenAnimatedNodeOffset)
-        .toBeCalledWith(jasmine.any(Number));
+        .toBeCalledWith(expect.any(Number));
    });

    it('should extract offset', () => {
@@ -128,12 +131,12 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        {type: 'value', value: 0, offset: 0},
      );
      anim.extractOffset();
      expect(nativeAnimatedModule.extractAnimatedNodeOffset)
-        .toBeCalledWith(jasmine.any(Number));
+        .toBeCalledWith(expect.any(Number));
    });
  });

@@ -211,14 +214,14 @@ describe('Native Animated', () => {
      );
      const c = createAndMountComponent(Animated.View, {onTouchMove: event});
      expect(nativeAnimatedModule.addAnimatedEventToView).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        'onTouchMove',
        {nativeEventPath: ['state', 'foo'], animatedValueTag: value.__getNativeTag()},
      );

      c.componentWillUnmount();
      expect(nativeAnimatedModule.removeAnimatedEventFromView).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        'onTouchMove',
        value.__getNativeTag(),
      );
@@ -268,10 +271,10 @@ describe('Native Animated', () => {
      expect(nativeAnimatedModule.connectAnimatedNodes).toHaveBeenCalledTimes(2);

      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
-        {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
-        jasmine.any(Function)
+        expect.any(Number),
+        expect.any(Number),
+        {type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
+        expect.any(Function)
      );

      expect(nativeAnimatedModule.disconnectAnimatedNodes).toHaveBeenCalledTimes(2);
@@ -289,11 +292,11 @@ describe('Native Animated', () => {
      Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();

      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), {type: 'value', value: 0, offset: 0});
+        .toBeCalledWith(expect.any(Number), {type: 'value', value: 0, offset: 0});
      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), {type: 'style', style: {opacity: jasmine.any(Number)}});
+        .toBeCalledWith(expect.any(Number), {type: 'style', style: {opacity: expect.any(Number)}});
      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), {type: 'props', props: {style: jasmine.any(Number)}});
+        .toBeCalledWith(expect.any(Number), {type: 'props', props: {style: expect.any(Number)}});
    });

    it('sends a valid graph description for Animated.add nodes', () => {
@@ -309,8 +312,8 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
-        {type: 'addition', input: jasmine.any(Array)},
+        expect.any(Number),
+        {type: 'addition', input: expect.any(Array)},
      );
      const additionCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
        (call) => call[1].type === 'addition'
@@ -341,8 +344,8 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
-        {type: 'multiplication', input: jasmine.any(Array)},
+        expect.any(Number),
+        {type: 'multiplication', input: expect.any(Array)},
      );
      const multiplicationCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
        (call) => call[1].type === 'multiplication'
@@ -373,7 +376,7 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), {type: 'division', input: jasmine.any(Array)});
+        .toBeCalledWith(expect.any(Number), {type: 'division', input: expect.any(Array)});
      const divisionCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
        (call) => call[1].type === 'division'
      );
@@ -401,8 +404,8 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
-        {type: 'modulus', modulus: 4, input: jasmine.any(Number)},
+        expect.any(Number),
+        {type: 'modulus', modulus: 4, input: expect.any(Number)},
      );
      const moduloCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
        (call) => call[1].type === 'modulus'
@@ -432,11 +435,11 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        {type: 'value', value: 10, offset: 0}
      );
      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), {
+        .toBeCalledWith(expect.any(Number), {
          type: 'interpolation',
          inputRange: [10, 20],
          outputRange: [0, 1],
@@ -463,11 +466,11 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
+        expect.any(Number),
        {
          type: 'transform',
          transforms: [{
-            nodeTag: jasmine.any(Number),
+            nodeTag: expect.any(Number),
            property: 'translateX',
            type: 'animated',
          }, {
@@ -490,8 +493,8 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(
-        jasmine.any(Number),
-        {type: 'diffclamp', input: jasmine.any(Number), max: 20, min: 0},
+        expect.any(Number),
+        {type: 'diffclamp', input: expect.any(Number), max: 20, min: 0},
      );
      const diffClampCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
        (call) => call[1].type === 'diffclamp'
@@ -567,9 +570,9 @@ describe('Native Animated', () => {
      });

      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), { type: 'style', style: { opacity: jasmine.any(Number) }});
+        .toBeCalledWith(expect.any(Number), { type: 'style', style: { opacity: expect.any(Number) }});
      expect(nativeAnimatedModule.createAnimatedNode)
-        .toBeCalledWith(jasmine.any(Number), { type: 'props', props: { style: jasmine.any(Number) }});
+        .toBeCalledWith(expect.any(Number), { type: 'props', props: { style: expect.any(Number) }});
    });
  });

@@ -579,10 +582,10 @@ describe('Native Animated', () => {
      Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();

      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
-        {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
-        jasmine.any(Function)
+        expect.any(Number),
+        expect.any(Number),
+        {type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
+        expect.any(Function)
      );
    });

@@ -590,38 +593,65 @@ describe('Native Animated', () => {
      const anim = new Animated.Value(0);
      Animated.spring(anim, {toValue: 10, friction: 5, tension: 164, useNativeDriver: true}).start();
      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
+        expect.any(Number),
+        expect.any(Number),
        {
          type: 'spring',
-          friction: 16,
+          stiffness: 679.08,
+          damping: 16,
+          mass: 1,
          initialVelocity: 0,
          overshootClamping: false,
          restDisplacementThreshold: 0.001,
          restSpeedThreshold: 0.001,
-          tension: 679.08,
          toValue: 10,
          iterations: 1,
        },
-        jasmine.any(Function)
+        expect.any(Function)
+      );
+
+      Animated.spring(anim, {
+        toValue: 10,
+        stiffness: 1000,
+        damping: 500,
+        mass: 3,
+        useNativeDriver: true
+      }).start();
+      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
+        expect.any(Number),
+        expect.any(Number),
+        {
+          type: 'spring',
+          stiffness: 1000,
+          damping: 500,
+          mass: 3,
+          initialVelocity: 0,
+          overshootClamping: false,
+          restDisplacementThreshold: 0.001,
+          restSpeedThreshold: 0.001,
+          toValue: 10,
+          iterations: 1,
+        },
+        expect.any(Function)
      );

      Animated.spring(anim, {toValue: 10, bounciness: 8, speed: 10, useNativeDriver: true}).start();
      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
+        expect.any(Number),
+        expect.any(Number),
        {
          type: 'spring',
-          friction: 23.05223140901191,
+          damping: 23.05223140901191,
          initialVelocity: 0,
          overshootClamping: false,
          restDisplacementThreshold: 0.001,
          restSpeedThreshold: 0.001,
-          tension: 299.61882352941177,
+          stiffness: 299.61882352941177,
+          mass: 1,
          toValue: 10,
          iterations: 1,
        },
-        jasmine.any(Function)
+        expect.any(Function)
      );
    });

@@ -630,10 +660,10 @@ describe('Native Animated', () => {
      Animated.decay(anim, {velocity: 10, deceleration: 0.1, useNativeDriver: true}).start();

      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
+        expect.any(Number),
+        expect.any(Number),
        {type: 'decay', deceleration: 0.1, velocity: 10, iterations: 1},
-        jasmine.any(Function)
+        expect.any(Function)
      );
    });

@@ -645,10 +675,10 @@ describe('Native Animated', () => {
      ).start();

      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
+        expect.any(Number),
+        expect.any(Number),
        {type: 'decay', deceleration: 0.1, velocity: 10, iterations: 10},
-        jasmine.any(Function)
+        expect.any(Function)
      );
    });

@@ -658,10 +688,10 @@ describe('Native Animated', () => {

      animation.start();
      expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
-        jasmine.any(Number),
-        jasmine.any(Number),
-        {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
-        jasmine.any(Function)
+        expect.any(Number),
+        expect.any(Number),
+        {type: 'frames', frames: expect.any(Array), toValue: expect.any(Number), iterations: 1},
+        expect.any(Function)
      );
      const animationId = nativeAnimatedModule.startAnimatingNode.mock.calls[0][0];

@@ -5,6 +5,8 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -5,6 +5,8 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -2,102 +2,135 @@
 * BezierEasing - use bezier curve for transition easing function
 * https://github.com/gre/bezier-easing
 *
- * @copyright 2014-2015 Gaëtan Renaudeau. MIT License.
+ * @copyright 2014-2015 Gaetan Renaudeau. MIT License.
 * @noflow
+ * @emails oncall+react_native
+ * @format
 */

-/* eslint-disable */
-
 'use strict';

 var bezier = require('bezier');

-var identity = function (x) { return x; };
+var identity = function(x) {
+  return x;
+};

-function assertClose (a, b, precision = 3) {
+function assertClose(a, b, precision = 3) {
  expect(a).toBeCloseTo(b, precision);
 }

-function makeAssertCloseWithPrecision (precision) {
-  return function (a, b) {
+function makeAssertCloseWithPrecision(precision) {
+  return function(a, b) {
    assertClose(a, b, precision);
  };
 }

-function allEquals (be1, be2, samples, assertion) {
-  if (!assertion) assertion = assertClose;
-  for (var i=0; i<=samples; ++i) {
+function allEquals(be1, be2, samples, assertion) {
+  if (!assertion) {
+    assertion = assertClose;
+  }
+  for (var i = 0; i <= samples; ++i) {
    var x = i / samples;
    assertion(be1(x), be2(x));
  }
 }

-function repeat (n) {
-  return function (f) {
-    for (var i=0; i<n; ++i) f(i);
+function repeat(n) {
+  return function(f) {
+    for (var i = 0; i < n; ++i) {
+      f(i);
+    }
  };
 }

-describe('bezier', function(){
-  it('should be a function', function(){
+describe('bezier', function() {
+  it('should be a function', function() {
    expect(typeof bezier === 'function').toBe(true);
  });
-  it('should creates an object', function(){
+  it('should creates an object', function() {
    expect(typeof bezier(0, 0, 1, 1) === 'function').toBe(true);
  });
-  it('should fail with wrong arguments', function () {
-    expect(function () { bezier(0.5, 0.5, -5, 0.5); }).toThrow();
-    expect(function () { bezier(0.5, 0.5, 5, 0.5); }).toThrow();
-    expect(function () { bezier(-2, 0.5, 0.5, 0.5); }).toThrow();
-    expect(function () { bezier(2, 0.5, 0.5, 0.5); }).toThrow();
+  it('should fail with wrong arguments', function() {
+    expect(function() {
+      bezier(0.5, 0.5, -5, 0.5);
+    }).toThrow();
+    expect(function() {
+      bezier(0.5, 0.5, 5, 0.5);
+    }).toThrow();
+    expect(function() {
+      bezier(-2, 0.5, 0.5, 0.5);
+    }).toThrow();
+    expect(function() {
+      bezier(2, 0.5, 0.5, 0.5);
+    }).toThrow();
  });
-  describe('linear curves', function () {
-    it('should be linear', function () {
+  describe('linear curves', function() {
+    it('should be linear', function() {
      allEquals(bezier(0, 0, 1, 1), bezier(1, 1, 0, 0), 100);
      allEquals(bezier(0, 0, 1, 1), identity, 100);
    });
  });
-  describe('common properties', function () {
-    it('should be the right value at extremes', function () {
-      repeat(10)(function () {
-        var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
+  describe('common properties', function() {
+    it('should be the right value at extremes', function() {
+      repeat(10)(function() {
+        var a = Math.random(),
+          b = 2 * Math.random() - 0.5,
+          c = Math.random(),
+          d = 2 * Math.random() - 0.5;
        var easing = bezier(a, b, c, d);
        expect(easing(0)).toBe(0);
        expect(easing(1)).toBe(1);
      });
    });

-    it('should approach the projected value of its x=y projected curve', function () {
-      repeat(10)(function () {
-        var a = Math.random(), b = Math.random(), c = Math.random(), d = Math.random();
+    it('should approach the projected value of its x=y projected curve', function() {
+      repeat(10)(function() {
+        var a = Math.random(),
+          b = Math.random(),
+          c = Math.random(),
+          d = Math.random();
        var easing = bezier(a, b, c, d);
        var projected = bezier(b, a, d, c);
-        var composed = function (x) { return projected(easing(x)); };
+        var composed = function(x) {
+          return projected(easing(x));
+        };
        allEquals(identity, composed, 100, makeAssertCloseWithPrecision(2));
      });
    });
  });
-  describe('two same instances', function () {
-    it('should be strictly equals', function () {
-      repeat(10)(function () {
-        var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
+  describe('two same instances', function() {
+    it('should be strictly equals', function() {
+      repeat(10)(function() {
+        var a = Math.random(),
+          b = 2 * Math.random() - 0.5,
+          c = Math.random(),
+          d = 2 * Math.random() - 0.5;
        allEquals(bezier(a, b, c, d), bezier(a, b, c, d), 100, 0);
      });
    });
  });
-  describe('symetric curves', function () {
-    it('should have a central value y~=0.5 at x=0.5', function () {
-      repeat(10)(function () {
-        var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
+  describe('symetric curves', function() {
+    it('should have a central value y~=0.5 at x=0.5', function() {
+      repeat(10)(function() {
+        var a = Math.random(),
+          b = 2 * Math.random() - 0.5,
+          c = 1 - a,
+          d = 1 - b;
        var easing = bezier(a, b, c, d);
        assertClose(easing(0.5), 0.5, 2);
      });
    });
-    it('should be symetrical', function () {
-      repeat(10)(function () {
-        var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
+    it('should be symetrical', function() {
+      repeat(10)(function() {
+        var a = Math.random(),
+          b = 2 * Math.random() - 0.5,
+          c = 1 - a,
+          d = 1 - b;
        var easing = bezier(a, b, c, d);
-        var sym = function (x) { return 1 - easing(1-x); };
+        var sym = function(x) {
+          return 1 - easing(1 - x);
+        };
        allEquals(easing, sym, 100, makeAssertCloseWithPrecision(2));
      });
    });
@@ -32,6 +32,9 @@ export type SpringAnimationConfig = AnimationConfig & {
  speed?: number,
  tension?: number,
  friction?: number,
+  stiffness?: number,
+  damping?: number,
+  mass?: number,
  delay?: number,
 };

@@ -45,6 +48,9 @@ export type SpringAnimationConfigSingle = AnimationConfig & {
  speed?: number,
  tension?: number,
  friction?: number,
+  stiffness?: number,
+  damping?: number,
+  mass?: number,
  delay?: number,
 };

@@ -59,17 +65,20 @@ class SpringAnimation extends Animation {
  _overshootClamping: boolean;
  _restDisplacementThreshold: number;
  _restSpeedThreshold: number;
-  _initialVelocity: ?number;
  _lastVelocity: number;
  _startPosition: number;
  _lastPosition: number;
  _fromValue: number;
  _toValue: any;
-  _tension: number;
-  _friction: number;
+  _stiffness: number;
+  _damping: number;
+  _mass: number;
+  _initialVelocity: number;
  _delay: number;
  _timeout: any;
+  _startTime: number;
  _lastTime: number;
+  _frameTime: number;
  _onUpdate: (value: number) => void;
  _animationFrame: any;
  _useNativeDriver: boolean;
@@ -83,7 +92,7 @@ class SpringAnimation extends Animation {
      0.001,
    );
    this._restSpeedThreshold = withDefault(config.restSpeedThreshold, 0.001);
-    this._initialVelocity = config.velocity;
+    this._initialVelocity = withDefault(config.velocity, 0);
    this._lastVelocity = withDefault(config.velocity, 0);
    this._toValue = config.toValue;
    this._delay = withDefault(config.delay, 0);
@@ -92,24 +101,54 @@ class SpringAnimation extends Animation {
      config.isInteraction !== undefined ? config.isInteraction : true;
    this.__iterations = config.iterations !== undefined ? config.iterations : 1;

-    let springConfig;
-    if (config.bounciness !== undefined || config.speed !== undefined) {
+    if (
+      config.stiffness !== undefined ||
+      config.damping !== undefined ||
+      config.mass !== undefined
+    ) {
      invariant(
-        config.tension === undefined && config.friction === undefined,
-        'You can only define bounciness/speed or tension/friction but not both',
+        config.bounciness === undefined &&
+          config.speed === undefined &&
+          config.tension === undefined &&
+          config.friction === undefined,
+        'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
      );
-      springConfig = SpringConfig.fromBouncinessAndSpeed(
+      this._stiffness = withDefault(config.stiffness, 100);
+      this._damping = withDefault(config.damping, 10);
+      this._mass = withDefault(config.mass, 1);
+    } else if (config.bounciness !== undefined || config.speed !== undefined) {
+      // Convert the origami bounciness/speed values to stiffness/damping
+      // We assume mass is 1.
+      invariant(
+        config.tension === undefined &&
+          config.friction === undefined &&
+          config.stiffness === undefined &&
+          config.damping === undefined &&
+          config.mass === undefined,
+        'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
+      );
+      const springConfig = SpringConfig.fromBouncinessAndSpeed(
        withDefault(config.bounciness, 8),
        withDefault(config.speed, 12),
      );
+      this._stiffness = springConfig.stiffness;
+      this._damping = springConfig.damping;
+      this._mass = 1;
    } else {
-      springConfig = SpringConfig.fromOrigamiTensionAndFriction(
+      // Convert the origami tension/friction values to stiffness/damping
+      // We assume mass is 1.
+      const springConfig = SpringConfig.fromOrigamiTensionAndFriction(
        withDefault(config.tension, 40),
        withDefault(config.friction, 7),
      );
+      this._stiffness = springConfig.stiffness;
+      this._damping = springConfig.damping;
+      this._mass = 1;
    }
-    this._tension = springConfig.tension;
-    this._friction = springConfig.friction;
+
+    invariant(this._stiffness > 0, 'Stiffness value must be greater than 0');
+    invariant(this._damping > 0, 'Damping value must be greater than 0');
+    invariant(this._mass > 0, 'Mass value must be greater than 0');
  }

  __getNativeAnimationConfig() {
@@ -118,8 +157,9 @@ class SpringAnimation extends Animation {
      overshootClamping: this._overshootClamping,
      restDisplacementThreshold: this._restDisplacementThreshold,
      restSpeedThreshold: this._restSpeedThreshold,
-      tension: this._tension,
-      friction: this._friction,
+      stiffness: this._stiffness,
+      damping: this._damping,
+      mass: this._mass,
      initialVelocity: withDefault(this._initialVelocity, this._lastVelocity),
      toValue: this._toValue,
      iterations: this.__iterations,
@@ -140,16 +180,16 @@ class SpringAnimation extends Animation {
    this._onUpdate = onUpdate;
    this.__onEnd = onEnd;
    this._lastTime = Date.now();
+    this._frameTime = 0.0;

    if (previousAnimation instanceof SpringAnimation) {
      const internalState = previousAnimation.getInternalState();
      this._lastPosition = internalState.lastPosition;
      this._lastVelocity = internalState.lastVelocity;
+      // Set the initial velocity to the last velocity
+      this._initialVelocity = this._lastVelocity;
      this._lastTime = internalState.lastTime;
    }
-    if (this._initialVelocity !== undefined && this._initialVelocity !== null) {
-      this._lastVelocity = this._initialVelocity;
-    }

    const start = () => {
      if (this._useNativeDriver) {
@@ -175,13 +215,28 @@ class SpringAnimation extends Animation {
    };
  }

+  /**
+   * This spring model is based off of a damped harmonic oscillator
+   * (https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator).
+   *
+   * We use the closed form of the second order differential equation:
+   *
+   * x'' + (2ζ⍵_0)x' + ⍵^2x = 0
+   *
+   * where
+   *    ⍵_0 = √(k / m) (undamped angular frequency of the oscillator),
+   *    ζ = c / 2√mk (damping ratio),
+   *    c = damping constant
+   *    k = stiffness
+   *    m = mass
+   *
+   * The derivation of the closed form is described in detail here:
+   * http://planetmath.org/sites/default/files/texpdf/39745.pdf
+   *
+   * This algorithm happens to match the algorithm used by CASpringAnimation,
+   * a QuartzCore (iOS) API that creates spring animations.
+   */
  onUpdate(): void {
-    let position = this._lastPosition;
-    let velocity = this._lastVelocity;
-
-    let tempPosition = this._lastPosition;
-    let tempVelocity = this._lastVelocity;
-
    // If for some reason we lost a lot of frames (e.g. process large payload or
    // stopped in the debugger), we only advance by 4 frames worth of
    // computation and will continue on the next frame. It's better to have it
@@ -192,53 +247,47 @@ class SpringAnimation extends Animation {
      now = this._lastTime + MAX_STEPS;
    }

-    // We are using a fixed time step and a maximum number of iterations.
-    // The following post provides a lot of thoughts into how to build this
-    // loop: http://gafferongames.com/game-physics/fix-your-timestep/
-    const TIMESTEP_MSEC = 1;
-    const numSteps = Math.floor((now - this._lastTime) / TIMESTEP_MSEC);
+    const deltaTime = (now - this._lastTime) / 1000;
+    this._frameTime += deltaTime;

-    for (let i = 0; i < numSteps; ++i) {
-      // Velocity is based on seconds instead of milliseconds
-      const step = TIMESTEP_MSEC / 1000;
+    const c: number = this._damping;
+    const m: number = this._mass;
+    const k: number = this._stiffness;
+    const v0: number = -this._initialVelocity;

-      // This is using RK4. A good blog post to understand how it works:
-      // http://gafferongames.com/game-physics/integration-basics/
-      const aVelocity = velocity;
-      const aAcceleration =
-        this._tension * (this._toValue - tempPosition) -
-        this._friction * tempVelocity;
-      tempPosition = position + aVelocity * step / 2;
-      tempVelocity = velocity + aAcceleration * step / 2;
+    const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+    const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+    const omega1 = omega0 * Math.sqrt(1.0 - zeta * zeta); // exponential decay
+    const x0 = this._toValue - this._startPosition; // calculate the oscillation from x0 = 1 to x = 0

-      const bVelocity = tempVelocity;
-      const bAcceleration =
-        this._tension * (this._toValue - tempPosition) -
-        this._friction * tempVelocity;
-      tempPosition = position + bVelocity * step / 2;
-      tempVelocity = velocity + bAcceleration * step / 2;
-
-      const cVelocity = tempVelocity;
-      const cAcceleration =
-        this._tension * (this._toValue - tempPosition) -
-        this._friction * tempVelocity;
-      tempPosition = position + cVelocity * step / 2;
-      tempVelocity = velocity + cAcceleration * step / 2;
-
-      const dVelocity = tempVelocity;
-      const dAcceleration =
-        this._tension * (this._toValue - tempPosition) -
-        this._friction * tempVelocity;
-      tempPosition = position + cVelocity * step / 2;
-      tempVelocity = velocity + cAcceleration * step / 2;
-
-      const dxdt = (aVelocity + 2 * (bVelocity + cVelocity) + dVelocity) / 6;
-      const dvdt =
-        (aAcceleration + 2 * (bAcceleration + cAcceleration) + dAcceleration) /
-        6;
-
-      position += dxdt * step;
-      velocity += dvdt * step;
+    let position = 0.0;
+    let velocity = 0.0;
+    const t = this._frameTime;
+    if (zeta < 1) {
+      // Under damped
+      const envelope = Math.exp(-zeta * omega0 * t);
+      position =
+        this._toValue -
+        envelope *
+          ((v0 + zeta * omega0 * x0) / omega1 * Math.sin(omega1 * t) +
+            x0 * Math.cos(omega1 * t));
+      // This looks crazy -- it's actually just the derivative of the
+      // oscillation function
+      velocity =
+        zeta *
+          omega0 *
+          envelope *
+          (Math.sin(omega1 * t) * (v0 + zeta * omega0 * x0) / omega1 +
+            x0 * Math.cos(omega1 * t)) -
+        envelope *
+          (Math.cos(omega1 * t) * (v0 + zeta * omega0 * x0) -
+            omega1 * x0 * Math.sin(omega1 * t));
+    } else {
+      // Critically damped
+      const envelope = Math.exp(-omega0 * t);
+      position = this._toValue - envelope * (x0 + (v0 + omega0 * x0) * t);
+      velocity =
+        envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
    }

    this._lastTime = now;
@@ -253,7 +302,7 @@ class SpringAnimation extends Animation {

    // Conditions for stopping the spring animation
    let isOvershooting = false;
-    if (this._overshootClamping && this._tension !== 0) {
+    if (this._overshootClamping && this._stiffness !== 0) {
      if (this._startPosition < this._toValue) {
        isOvershooting = position > this._toValue;
      } else {
@@ -262,14 +311,16 @@ class SpringAnimation extends Animation {
    }
    const isVelocity = Math.abs(velocity) <= this._restSpeedThreshold;
    let isDisplacement = true;
-    if (this._tension !== 0) {
+    if (this._stiffness !== 0) {
      isDisplacement =
        Math.abs(this._toValue - position) <= this._restDisplacementThreshold;
    }

    if (isOvershooting || (isVelocity && isDisplacement)) {
-      if (this._tension !== 0) {
+      if (this._stiffness !== 0) {
        // Ensure that we end up with a round value
+        this._lastPosition = this._toValue;
+        this._lastVelocity = 0;
        this._onUpdate(this._toValue);
      }

@@ -20,6 +20,7 @@ const ViewStylePropTypes = require('ViewStylePropTypes');
 function createAnimatedComponent(Component: any): any {
  class AnimatedComponent extends React.Component<Object> {
    _component: any;
+    _invokeAnimatedPropsCallbackOnMount: boolean = false;
    _prevComponent: any;
    _propsAnimated: AnimatedProps;
    _eventDetachers: Array<Function> = [];
@@ -46,6 +47,11 @@ function createAnimatedComponent(Component: any): any {
    }

    componentDidMount() {
+      if (this._invokeAnimatedPropsCallbackOnMount) {
+        this._invokeAnimatedPropsCallbackOnMount = false;
+        this._animatedPropsCallback();
+      }
+
      this._propsAnimated.setNativeView(this._component);
      this._attachNativeEvents();
    }
@@ -71,37 +77,44 @@ function createAnimatedComponent(Component: any): any {
      this._eventDetachers = [];
    }

+    // The system is best designed when setNativeProps is implemented. It is
+    // able to avoid re-rendering and directly set the attributes that changed.
+    // However, setNativeProps can only be implemented on leaf native
+    // components. If you want to animate a composite component, you need to
+    // re-render it. In this case, we have a fallback that uses forceUpdate.
+    _animatedPropsCallback = () => {
+      if (this._component == null) {
+        // AnimatedProps is created in will-mount because it's used in render.
+        // But this callback may be invoked before mount in async mode,
+        // In which case we should defer the setNativeProps() call.
+        // React may throw away uncommitted work in async mode,
+        // So a deferred call won't always be invoked.
+        this._invokeAnimatedPropsCallbackOnMount = true;
+      } else if (
+        AnimatedComponent.__skipSetNativeProps_FOR_TESTS_ONLY ||
+        typeof this._component.setNativeProps !== 'function'
+      ) {
+        this.forceUpdate();
+      } else if (!this._propsAnimated.__isNative) {
+        this._component.setNativeProps(
+          this._propsAnimated.__getAnimatedValue(),
+        );
+      } else {
+        throw new Error(
+          'Attempting to run JS driven animation on animated ' +
+            'node that has been moved to "native" earlier by starting an ' +
+            'animation with `useNativeDriver: true`',
+        );
+      }
+    };
+
    _attachProps(nextProps) {
      const oldPropsAnimated = this._propsAnimated;

-      // The system is best designed when setNativeProps is implemented. It is
-      // able to avoid re-rendering and directly set the attributes that
-      // changed. However, setNativeProps can only be implemented on leaf
-      // native components. If you want to animate a composite component, you
-      // need to re-render it. In this case, we have a fallback that uses
-      // forceUpdate.
-      const callback = () => {
-        if (
-          !AnimatedComponent.__skipSetNativeProps_FOR_TESTS_ONLY &&
-          this._component.setNativeProps
-        ) {
-          if (!this._propsAnimated.__isNative) {
-            this._component.setNativeProps(
-              this._propsAnimated.__getAnimatedValue(),
-            );
-          } else {
-            throw new Error(
-              'Attempting to run JS driven animation on animated ' +
-                'node that has been moved to "native" earlier by starting an ' +
-                'animation with `useNativeDriver: true`',
-            );
-          }
-        } else {
-          this.forceUpdate();
-        }
-      };
-
-      this._propsAnimated = new AnimatedProps(nextProps, callback);
+      this._propsAnimated = new AnimatedProps(
+        nextProps,
+        this._animatedPropsCallback,
+      );

      // When you call detach, it removes the element from the parent list
      // of children. If it goes to 0, then the parent also detaches itself
@@ -157,13 +170,7 @@ function createAnimatedComponent(Component: any): any {
    }
  }

-  // ReactNative `View.propTypes` have been deprecated in favor of
-  // `ViewPropTypes`. In their place a temporary getter has been added with a
-  // deprecated warning message. Avoid triggering that warning here by using
-  // temporary workaround, __propTypesSecretDontUseThesePlease.
-  // TODO (bvaughn) Revert this particular change any time after April 1
-  const propTypes =
-    Component.__propTypesSecretDontUseThesePlease || Component.propTypes;
+  const propTypes = Component.propTypes;

  AnimatedComponent.propTypes = {
    style: function(props, propName, componentName) {
@@ -68,6 +68,8 @@ function _flush(rootNode: AnimatedValue): void {
 * multiple properties in a synchronized fashion, but can only be driven by one
 * mechanism at a time.  Using a new mechanism (e.g. starting a new animation,
 * or calling `setValue`) will stop any previous ones.
+ *
+ * See http://facebook.github.io/react-native/docs/animatedvalue.html
 */
 class AnimatedValue extends AnimatedWithChildren {
  _value: number;
@@ -106,6 +108,8 @@ class AnimatedValue extends AnimatedWithChildren {
  /**
   * Directly set the value.  This will stop any animations running on the value
   * and update all the bound properties.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#setvalue
   */
  setValue(value: number): void {
    if (this._animation) {
@@ -125,6 +129,8 @@ class AnimatedValue extends AnimatedWithChildren {
   * Sets an offset that is applied on top of whatever value is set, whether via
   * `setValue`, an animation, or `Animated.event`.  Useful for compensating
   * things like the start of a pan gesture.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#setoffset
   */
  setOffset(offset: number): void {
    this._offset = offset;
@@ -136,6 +142,8 @@ class AnimatedValue extends AnimatedWithChildren {
  /**
   * Merges the offset value into the base value and resets the offset to zero.
   * The final output of the value is unchanged.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#flattenoffset
   */
  flattenOffset(): void {
    this._value += this._offset;
@@ -148,6 +156,8 @@ class AnimatedValue extends AnimatedWithChildren {
  /**
   * Sets the offset value to the base value, and resets the base value to zero.
   * The final output of the value is unchanged.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#extractoffset
   */
  extractOffset(): void {
    this._offset += this._value;
@@ -161,6 +171,8 @@ class AnimatedValue extends AnimatedWithChildren {
   * Adds an asynchronous listener to the value so you can observe updates from
   * animations.  This is useful because there is no way to
   * synchronously read the value because it might be driven natively.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#addlistener
   */
  addListener(callback: ValueListenerCallback): string {
    const id = String(_uniqueId++);
@@ -171,6 +183,12 @@ class AnimatedValue extends AnimatedWithChildren {
    return id;
  }

+  /**
+   * Unregister a listener. The `id` param shall match the identifier
+   * previously returned by `addListener()`.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#removelistener
+   */
  removeListener(id: string): void {
    delete this._listeners[id];
    if (this.__isNative && Object.keys(this._listeners).length === 0) {
@@ -178,6 +196,11 @@ class AnimatedValue extends AnimatedWithChildren {
    }
  }

+  /**
+   * Remove all registered listeners.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#removealllisteners
+   */
  removeAllListeners(): void {
    this._listeners = {};
    if (this.__isNative) {
@@ -213,9 +236,11 @@ class AnimatedValue extends AnimatedWithChildren {
  }

  /**
-   * Stops any running animation or tracking.  `callback` is invoked with the
+   * Stops any running animation or tracking. `callback` is invoked with the
   * final value after stopping the animation, which is useful for updating
   * state to match the animation position with layout.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#stopanimation
   */
  stopAnimation(callback?: ?(value: number) => void): void {
    this.stopTracking();
@@ -225,8 +250,10 @@ class AnimatedValue extends AnimatedWithChildren {
  }

  /**
-  * Stops any animation and resets the value to its original
-  */
+   * Stops any animation and resets the value to its original.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#resetanimation
+   */
  resetAnimation(callback?: ?(value: number) => void): void {
    this.stopAnimation(callback);
    this._value = this._startingValue;
@@ -243,6 +270,8 @@ class AnimatedValue extends AnimatedWithChildren {
  /**
   * Typically only used internally, but could be used by a custom Animation
   * class.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#animate
   */
  animate(animation: Animation, callback: ?EndCallback): void {
    let handle = null;
@@ -22,44 +22,10 @@ type ValueXYListenerCallback = (value: {x: number, y: number}) => void;
 let _uniqueId = 1;

 /**
- * 2D Value for driving 2D animations, such as pan gestures.  Almost identical
- * API to normal `Animated.Value`, but multiplexed.  Contains two regular
- * `Animated.Value`s under the hood.
+ * 2D Value for driving 2D animations, such as pan gestures. Almost identical
+ * API to normal `Animated.Value`, but multiplexed.
 *
- * #### Example
- *
- *```javascript
- *  class DraggableView extends React.Component {
- *    constructor(props) {
- *      super(props);
- *      this.state = {
- *        pan: new Animated.ValueXY(), // inits to zero
- *      };
- *      this.state.panResponder = PanResponder.create({
- *        onStartShouldSetPanResponder: () => true,
- *        onPanResponderMove: Animated.event([null, {
- *          dx: this.state.pan.x, // x,y are Animated.Value
- *          dy: this.state.pan.y,
- *        }]),
- *        onPanResponderRelease: () => {
- *          Animated.spring(
- *            this.state.pan,         // Auto-multiplexed
- *            {toValue: {x: 0, y: 0}} // Back to zero
- *          ).start();
- *        },
- *      });
- *    }
- *    render() {
- *      return (
- *        <Animated.View
- *          {...this.state.panResponder.panHandlers}
- *          style={this.state.pan.getLayout()}>
- *          {this.props.children}
- *        </Animated.View>
- *      );
- *    }
- *  }
- *```
+ * See http://facebook.github.io/react-native/docs/animatedvaluexy.html
 */
 class AnimatedValueXY extends AnimatedWithChildren {
  x: AnimatedValue;
@@ -86,21 +52,46 @@ class AnimatedValueXY extends AnimatedWithChildren {
    this._listeners = {};
  }

+  /**
+   * Directly set the value. This will stop any animations running on the value
+   * and update all the bound properties.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#setvalue
+   */
  setValue(value: {x: number, y: number}) {
    this.x.setValue(value.x);
    this.y.setValue(value.y);
  }

+  /**
+   * Sets an offset that is applied on top of whatever value is set, whether
+   * via `setValue`, an animation, or `Animated.event`. Useful for compensating
+   * things like the start of a pan gesture.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#setoffset
+   */
  setOffset(offset: {x: number, y: number}) {
    this.x.setOffset(offset.x);
    this.y.setOffset(offset.y);
  }

+  /**
+   * Merges the offset value into the base value and resets the offset to zero.
+   * The final output of the value is unchanged.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#flattenoffset
+   */
  flattenOffset(): void {
    this.x.flattenOffset();
    this.y.flattenOffset();
  }

+  /**
+   * Sets the offset value to the base value, and resets the base value to
+   * zero. The final output of the value is unchanged.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#extractoffset
+   */
  extractOffset(): void {
    this.x.extractOffset();
    this.y.extractOffset();
@@ -113,18 +104,39 @@ class AnimatedValueXY extends AnimatedWithChildren {
    };
  }

+  /**
+   * Stops any animation and resets the value to its original.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#resetanimation
+   */
  resetAnimation(callback?: (value: {x: number, y: number}) => void): void {
    this.x.resetAnimation();
    this.y.resetAnimation();
    callback && callback(this.__getValue());
  }

+  /**
+   * Stops any running animation or tracking. `callback` is invoked with the
+   * final value after stopping the animation, which is useful for updating
+   * state to match the animation position with layout.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#stopanimation
+   */
  stopAnimation(callback?: (value: {x: number, y: number}) => void): void {
    this.x.stopAnimation();
    this.y.stopAnimation();
    callback && callback(this.__getValue());
  }

+  /**
+   * Adds an asynchronous listener to the value so you can observe updates from
+   * animations.  This is useful because there is no way to synchronously read
+   * the value because it might be driven natively.
+   *
+   * Returns a string that serves as an identifier for the listener.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#addlistener
+   */
  addListener(callback: ValueXYListenerCallback): string {
    const id = String(_uniqueId++);
    const jointCallback = ({value: number}) => {
@@ -137,12 +149,23 @@ class AnimatedValueXY extends AnimatedWithChildren {
    return id;
  }

+  /**
+   * Unregister a listener. The `id` param shall match the identifier
+   * previously returned by `addListener()`.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#removelistener
+   */
  removeListener(id: string): void {
    this.x.removeListener(this._listeners[id].x);
    this.y.removeListener(this._listeners[id].y);
    delete this._listeners[id];
  }

+  /**
+   * Remove all registered listeners.
+   *
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#removealllisteners
+   */
  removeAllListeners(): void {
    this.x.removeAllListeners();
    this.y.removeAllListeners();
@@ -150,11 +173,9 @@ class AnimatedValueXY extends AnimatedWithChildren {
  }

  /**
-   * Converts `{x, y}` into `{left, top}` for use in style, e.g.
+   * Converts `{x, y}` into `{left, top}` for use in style.
   *
-   *```javascript
-   *  style={this.state.anim.getLayout()}
-   *```
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#getlayout
   */
  getLayout(): {[key: string]: AnimatedValue} {
    return {
@@ -164,13 +185,9 @@ class AnimatedValueXY extends AnimatedWithChildren {
  }

  /**
-   * Converts `{x, y}` into a useable translation transform, e.g.
+   * Converts `{x, y}` into a useable translation transform.
   *
-   *```javascript
-   *  style={{
-   *    transform: this.state.anim.getTranslateTransform()
-   *  }}
-   *```
+   * See http://facebook.github.io/react-native/docs/animatedvaluexy.html#gettranslatetransform
   */
  getTranslateTransform(): Array<{[key: string]: AnimatedValue}> {
    return [{translateX: this.x}, {translateY: this.y}];
@@ -23,66 +23,8 @@ const invariant = require('fbjs/lib/invariant');
 * `AppState` can tell you if the app is in the foreground or background,
 * and notify you when the state changes.
 *
- * AppState is frequently used to determine the intent and proper behavior when
- * handling push notifications.
- *
- * ### App States
- *
- *  - `active` - The app is running in the foreground
- *  - `background` - The app is running in the background. The user is either
- *     in another app or on the home screen
- *  - `inactive` - This is a state that occurs when transitioning between
- *     foreground & background, and during periods of inactivity such as
- *     entering the Multitasking view or in the event of an incoming call
- *
- * For more information, see
- * [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)
- *
- * ### Basic Usage
- *
- * To see the current state, you can check `AppState.currentState`, which
- * will be kept up-to-date. However, `currentState` will be null at launch
- * while `AppState` retrieves it over the bridge.
- *
- * ```
- * import React, {Component} from 'react'
- * import {AppState, Text} from 'react-native'
- *
- * class AppStateExample extends Component {
- *
- *   state = {
- *     appState: AppState.currentState
- *   }
- *
- *   componentDidMount() {
- *     AppState.addEventListener('change', this._handleAppStateChange);
- *   }
- *
- *   componentWillUnmount() {
- *     AppState.removeEventListener('change', this._handleAppStateChange);
- *   }
- *
- *   _handleAppStateChange = (nextAppState) => {
- *     if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
- *       console.log('App has come to the foreground!')
- *     }
- *     this.setState({appState: nextAppState});
- *   }
- *
- *   render() {
- *     return (
- *       <Text>Current state is: {this.state.appState}</Text>
- *     );
- *   }
- *
- * }
- * ```
- *
- * This example will only ever appear to say "Current state is: active" because
- * the app is only visible to the user when in the `active` state, and the null
- * state will happen only momentarily.
+ * See http://facebook.github.io/react-native/docs/appstate.html
 */
-
 class AppState extends NativeEventEmitter {

  _eventHandlers: Object;
@@ -104,10 +46,10 @@ class AppState extends NativeEventEmitter {

    let eventUpdated = false;

-    // TODO: this is a terrible solution - in order to ensure `currentState` prop
-    // is up to date, we have to register an observer that updates it whenever
-    // the state changes, even if nobody cares. We should just deprecate the
-    // `currentState` property and get rid of this.
+    // TODO: this is a terrible solution - in order to ensure `currentState`
+    // prop is up to date, we have to register an observer that updates it 
+    // whenever the state changes, even if nobody cares. We should just 
+    // deprecate the `currentState` property and get rid of this.
    this.addListener(
      'appStateDidChange',
      (appStateData) => {
@@ -117,8 +59,8 @@ class AppState extends NativeEventEmitter {
    );

    // TODO: see above - this request just populates the value of `currentState`
-    // when the module is first initialized. Would be better to get rid of the prop
-    // and expose `getCurrentAppState` method directly.
+    // when the module is first initialized. Would be better to get rid of the
+    // prop and expose `getCurrentAppState` method directly.
    RCTAppState.getCurrentAppState(
      (appStateData) => {
        if (!eventUpdated) {
@@ -129,15 +71,16 @@ class AppState extends NativeEventEmitter {
    );
  }

-  /**
+  // TODO: now that AppState is a subclass of NativeEventEmitter, we could
+  // deprecate `addEventListener` and `removeEventListener` and just use 
+  // addListener` and `listener.remove()` directly. That will be a breaking 
+  // change though, as both the method and event names are different
+  // (addListener events are currently required to be globally unique).
+   /**
   * Add a handler to AppState changes by listening to the `change` event type
-   * and providing the handler
-   *
-   * TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
-   * `addEventListener` and `removeEventListener` and just use `addListener` and
-   * `listener.remove()` directly. That will be a breaking change though, as both
-   * the method and event names are different (addListener events are currently
-   * required to be globally unique).
+   * and providing the handler.
+   * 
+   * See http://facebook.github.io/react-native/docs/appstate.html#addeventlistener
   */
  addEventListener(
    type: string,
@@ -163,7 +106,9 @@ class AppState extends NativeEventEmitter {
  }

  /**
-   * Remove a handler by passing the `change` event type and the handler
+   * Remove a handler by passing the `change` event type and the handler.
+   * 
+   * See http://facebook.github.io/react-native/docs/appstate.html#removeeventlistener
   */
  removeEventListener(
    type: string,
@@ -200,9 +145,10 @@ if (__DEV__ && !RCTAppState) {
    }
  }

-  // This module depends on the native `RCTAppState` module. If you don't include it,
-  // `AppState.isAvailable` will return `false`, and any method calls will throw.
-  // We reassign the class variable to keep the autodoc generator happy.
+  // This module depends on the native `RCTAppState` module. If you don't
+  // include it, `AppState.isAvailable` will return `false`, and any method
+  // calls will throw. We reassign the class variable to keep the autodoc
+  // generator happy.
  AppState = new MissingNativeAppStateShim();
 } else {
  AppState = new AppState();
@@ -8,13 +8,25 @@
 *
 * @providesModule BatchedBridge
 * @flow
- * @format
 */
 'use strict';

 const MessageQueue = require('MessageQueue');

-const BatchedBridge = new MessageQueue();
+// MessageQueue can install a global handler to catch all exceptions where JS users can register their own behavior
+// This handler makes all exceptions to be handled inside MessageQueue rather than by the VM at its origin
+// This makes stacktraces to be placed at MessageQueue rather than at where they were launched
+// The parameter __fbUninstallRNGlobalErrorHandler is passed to MessageQueue to prevent the handler from being installed
+//
+// __fbUninstallRNGlobalErrorHandler is conditionally set by the Inspector while the VM is paused for intialization
+// If the Inspector isn't present it defaults to undefined and the global error handler is installed
+// The Inspector can still call MessageQueue#uninstallGlobalErrorHandler to uninstalled on attach
+
+const BatchedBridge = new MessageQueue(
+  // $FlowFixMe
+  typeof __fbUninstallRNGlobalErrorHandler !== 'undefined' &&
+    __fbUninstallRNGlobalErrorHandler === true, // eslint-disable-line no-undef
+);

 // Wire up the batched bridge on the global object so that we can call into it.
 // Ideally, this would be the inverse relationship. I.e. the native environment
@@ -11,8 +11,6 @@
 * @format
 */

-/*eslint no-bitwise: 0*/
-
 'use strict';

 const ErrorUtils = require('ErrorUtils');
@@ -26,11 +24,7 @@ export type SpyData = {
  type: number,
  module: ?string,
  method: string | number,
-  isSync: boolean,
-  successCbId: number,
-  failCbId: number,
-  args: Array<any>,
-  returnValue?: any,
+  args: any[],
 };

 const TO_JS = 0;
@@ -41,30 +35,33 @@ const METHOD_IDS = 1;
 const PARAMS = 2;
 const MIN_TIME_BETWEEN_FLUSHES_MS = 5;

+// eslint-disable-next-line no-bitwise
 const TRACE_TAG_REACT_APPS = 1 << 17;

-const DEBUG_INFO_LIMIT = 64;
+const DEBUG_INFO_LIMIT = 32;

 // Work around an initialization order issue
 let JSTimers = null;

 class MessageQueue {
  _lazyCallableModules: {[key: string]: (void) => Object};
-  _queue: [Array<number>, Array<number>, Array<any>, number];
-  _successCallbacks: Array<?Function>;
-  _failureCallbacks: Array<?Function>;
+  _queue: [number[], number[], any[], number];
+  _successCallbacks: (?Function)[];
+  _failureCallbacks: (?Function)[];
  _callID: number;
  _inCall: number;
  _lastFlush: number;
  _eventLoopStartTime: number;

-  _debugInfo: Object;
-  _remoteModuleTable: Object;
-  _remoteMethodTable: Object;
+  _debugInfo: {[number]: [number, number]};
+  _remoteModuleTable: {[number]: string};
+  _remoteMethodTable: {[number]: string[]};

  __spy: ?(data: SpyData) => void;

-  constructor() {
+  __guard: (() => void) => void;
+
+  constructor(shouldUninstallGlobalErrorHandler: boolean = false) {
    this._lazyCallableModules = {};
    this._queue = [[], [], [], 0];
    this._successCallbacks = [];
@@ -72,17 +69,34 @@ class MessageQueue {
    this._callID = 0;
    this._lastFlush = 0;
    this._eventLoopStartTime = new Date().getTime();
+    if (shouldUninstallGlobalErrorHandler) {
+      this.uninstallGlobalErrorHandler();
+    } else {
+      this.installGlobalErrorHandler();
+    }

    if (__DEV__) {
      this._debugInfo = {};
      this._remoteModuleTable = {};
      this._remoteMethodTable = {};
    }
+
+    (this: any).callFunctionReturnFlushedQueue = this.callFunctionReturnFlushedQueue.bind(
+      this,
+    );
+    (this: any).callFunctionReturnResultAndFlushedQueue = this.callFunctionReturnResultAndFlushedQueue.bind(
+      this,
+    );
+    (this: any).flushedQueue = this.flushedQueue.bind(this);
+    (this: any).invokeCallbackAndReturnFlushedQueue = this.invokeCallbackAndReturnFlushedQueue.bind(
+      this,
+    );
  }

  /**
   * Public APIs
   */
+
  static spy(spyOrToggle: boolean | ((data: SpyData) => void)) {
    if (spyOrToggle === true) {
      MessageQueue.prototype.__spy = info => {
@@ -99,40 +113,36 @@ class MessageQueue {
    }
  }

-  callFunctionReturnFlushedQueue = (
-    module: string,
-    method: string,
-    args: Array<any>,
-  ) => {
+  callFunctionReturnFlushedQueue(module: string, method: string, args: any[]) {
    this.__guard(() => {
      this.__callFunction(module, method, args);
    });

    return this.flushedQueue();
-  };
+  }

-  callFunctionReturnResultAndFlushedQueue = (
+  callFunctionReturnResultAndFlushedQueue(
    module: string,
    method: string,
-    args: Array<any>,
-  ) => {
+    args: any[],
+  ) {
    let result;
    this.__guard(() => {
      result = this.__callFunction(module, method, args);
    });

    return [result, this.flushedQueue()];
-  };
+  }

-  invokeCallbackAndReturnFlushedQueue = (cbID: number, args: Array<any>) => {
+  invokeCallbackAndReturnFlushedQueue(cbID: number, args: any[]) {
    this.__guard(() => {
      this.__invokeCallback(cbID, args);
    });

    return this.flushedQueue();
-  };
+  }

-  flushedQueue = () => {
+  flushedQueue() {
    this.__guard(() => {
      this.__callImmediates();
    });
@@ -140,7 +150,7 @@ class MessageQueue {
    const queue = this._queue;
    this._queue = [[], [], [], this._callID];
    return queue[0].length ? queue : null;
-  };
+  }

  getEventLoopRunningTime() {
    return new Date().getTime() - this._eventLoopStartTime;
@@ -170,7 +180,7 @@ class MessageQueue {
  enqueueNativeCall(
    moduleID: number,
    methodID: number,
-    params: Array<any>,
+    params: any[],
    onFail: ?Function,
    onSucc: ?Function,
  ) {
@@ -183,7 +193,9 @@ class MessageQueue {
      }
      // Encode callIDs into pairs of callback identifiers by shifting left and using the rightmost bit
      // to indicate fail (0) or success (1)
+      // eslint-disable-next-line no-bitwise
      onFail && params.push(this._callID << 1);
+      // eslint-disable-next-line no-bitwise
      onSucc && params.push((this._callID << 1) | 1);
      this._successCallbacks[this._callID] = onSucc;
      this._failureCallbacks[this._callID] = onFail;
@@ -203,8 +215,40 @@ class MessageQueue {
    this._queue[METHOD_IDS].push(methodID);

    if (__DEV__) {
-      // Any params sent over the bridge should be encodable as JSON
-      JSON.stringify(params);
+      // Validate that parameters passed over the bridge are
+      // folly-convertible.  As a special case, if a prop value is a
+      // function it is permitted here, and special-cased in the
+      // conversion.
+      const isValidArgument = val => {
+        const t = typeof val;
+        if (
+          t === 'undefined' ||
+          t === 'null' ||
+          t === 'boolean' ||
+          t === 'number' ||
+          t === 'string'
+        ) {
+          return true;
+        }
+        if (t === 'function' || t !== 'object') {
+          return false;
+        }
+        if (Array.isArray(val)) {
+          return val.every(isValidArgument);
+        }
+        for (const k in val) {
+          if (typeof val[k] !== 'function' && !isValidArgument(val[k])) {
+            return false;
+          }
+        }
+        return true;
+      };
+
+      invariant(
+        isValidArgument(params),
+        '%s is not usable as a native method argument',
+        params,
+      );

      // The params object should not be mutated after being queued
      deepFreezeAndThrowOnMutationInDev((params: any));
@@ -223,47 +267,50 @@ class MessageQueue {
      global.nativeFlushQueueImmediate(queue);
    }
    Systrace.counterEvent('pending_js_to_native_queue', this._queue[0].length);
-
-    if (this.__spy) {
-      this.__spyNativeCall(moduleID, methodID, params, {
-        failCbId: onFail ? params[params.length - 2] : -1,
-        successCbId: onSucc ? params[params.length - 1] : -1,
+    if (__DEV__ && this.__spy && isFinite(moduleID)) {
+      this.__spy({
+        type: TO_NATIVE,
+        module: this._remoteModuleTable[moduleID],
+        method: this._remoteMethodTable[moduleID][methodID],
+        args: params,
+      });
+    } else if (this.__spy) {
+      this.__spy({
+        type: TO_NATIVE,
+        module: moduleID + '',
+        method: methodID,
+        args: params,
      });
    }
  }

-  callSyncHook(moduleID: number, methodID: number, args: Array<any>) {
-    if (__DEV__) {
-      invariant(
-        global.nativeCallSyncHook,
-        'Calling synchronous methods on native ' +
-          'modules is not supported in Chrome.\n\n Consider providing alternative ' +
-          'methods to expose this method in debug mode, e.g. by exposing constants ' +
-          'ahead-of-time.',
-      );
-    }
-    const returnValue = global.nativeCallSyncHook(moduleID, methodID, args);
-    if (this.__spy) {
-      this.__spyNativeCall(moduleID, methodID, args, {
-        isSync: true,
-        returnValue,
-      });
-    }
-    return returnValue;
-  }
-
-  createDebugLookup(moduleID: number, name: string, methods: Array<string>) {
+  createDebugLookup(moduleID: number, name: string, methods: string[]) {
    if (__DEV__) {
      this._remoteModuleTable[moduleID] = name;
      this._remoteMethodTable[moduleID] = methods;
    }
  }

+  uninstallGlobalErrorHandler() {
+    this.__guard = this.__guardUnsafe;
+  }
+
+  installGlobalErrorHandler() {
+    this.__guard = this.__guardSafe;
+  }
+
  /**
   * Private methods
   */

-  __guard(fn: () => void) {
+  // Lets exceptions propagate to be handled by the VM at the origin
+  __guardUnsafe(fn: () => void) {
+    this._inCall++;
+    fn();
+    this._inCall--;
+  }
+
+  __guardSafe(fn: () => void) {
    this._inCall++;
    try {
      fn();
@@ -283,12 +330,12 @@ class MessageQueue {
    Systrace.endEvent();
  }

-  __callFunction(module: string, method: string, args: Array<any>) {
+  __callFunction(module: string, method: string, args: any[]): any {
    this._lastFlush = new Date().getTime();
    this._eventLoopStartTime = this._lastFlush;
    Systrace.beginEvent(`${module}.${method}()`);
    if (this.__spy) {
-      this.__spyJSCall(module, method, args);
+      this.__spy({type: TO_JS, module, method, args});
    }
    const moduleMethods = this.getCallableModule(module);
    invariant(
@@ -308,12 +355,14 @@ class MessageQueue {
    return result;
  }

-  __invokeCallback(cbID: number, args: Array<any>) {
+  __invokeCallback(cbID: number, args: any[]) {
    this._lastFlush = new Date().getTime();
    this._eventLoopStartTime = this._lastFlush;

    // The rightmost bit of cbID indicates fail (0) or success (1), the other bits are the callID shifted left.
+    // eslint-disable-next-line no-bitwise
    const callID = cbID >>> 1;
+    // eslint-disable-next-line no-bitwise
    const isSuccess = cbID & 1;
    const callback = isSuccess
      ? this._successCallbacks[callID]
@@ -334,12 +383,9 @@ class MessageQueue {
      }
      const profileName = debug
        ? '<callback for ' + module + '.' + method + '>'
-        : cbID + '';
-      if (this.__spy) {
-        this.__spyJSCall(null, profileName, args, {
-          failCbId: isSuccess ? -1 : cbID,
-          successCbId: isSuccess ? cbID : -1,
-        });
+        : cbID;
+      if (callback && this.__spy) {
+        this.__spy({type: TO_JS, module: null, method: profileName, args});
      }
      Systrace.beginEvent(
        `MessageQueue.invokeCallback(${profileName}, ${stringifySafe(args)})`,
@@ -351,63 +397,12 @@ class MessageQueue {
    }

    this._successCallbacks[callID] = this._failureCallbacks[callID] = null;
-    callback.apply(null, args);
+    callback(...args);

    if (__DEV__) {
      Systrace.endEvent();
    }
  }
-
-  __spyJSCall(
-    module: ?string,
-    method: string,
-    methodArgs: Array<any>,
-    params: any,
-  ) {
-    if (!this.__spy) {
-      return;
-    }
-    this.__spy({
-      type: TO_JS,
-      isSync: false,
-      module,
-      method,
-      failCbId: -1,
-      successCbId: -1,
-      args: methodArgs,
-      ...params,
-    });
-  }
-
-  __spyNativeCall(
-    moduleID: number,
-    methodID: number,
-    methodArgs: Array<any>,
-    params: any,
-  ) {
-    const spy = this.__spy;
-    if (!spy) {
-      return;
-    }
-
-    let moduleName = moduleID + '';
-    let methodName = methodID;
-    if (__DEV__ && isFinite(moduleID)) {
-      moduleName = this._remoteModuleTable[moduleID];
-      methodName = this._remoteMethodTable[moduleID][methodID];
-    }
-
-    spy({
-      type: TO_NATIVE,
-      isSync: false,
-      module: moduleName,
-      method: methodName,
-      failCbId: -1,
-      successCbId: -1,
-      args: methodArgs,
-      ...params,
-    });
-  }
 }

 module.exports = MessageQueue;
@@ -82,7 +82,13 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
    };
  } else if (type === 'sync') {
    fn = function(...args: Array<any>) {
-      return BatchedBridge.callSyncHook(moduleID, methodID, args);
+      if (__DEV__) {
+        invariant(global.nativeCallSyncHook, 'Calling synchronous methods on native ' +
+          'modules is not supported in Chrome.\n\n Consider providing alternative ' +
+          'methods to expose this method in debug mode, e.g. by exposing constants ' +
+          'ahead-of-time.');
+      }
+      return global.nativeCallSyncHook(moduleID, methodID, args);
    };
  } else {
    fn = function(...args: Array<any>) {
@@ -6,6 +6,8 @@
 * 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.
 *
+ * @emails oncall+react_native
+ * @format
 */
 'use strict';

@@ -37,10 +39,12 @@ describe('MessageQueue', function() {
    queue = new MessageQueue();
    queue.registerCallableModule(
      'MessageQueueTestModule',
-      MessageQueueTestModule
+      MessageQueueTestModule,
    );
-    queue.createDebugLookup(0, 'MessageQueueTestModule',
-      ['testHook1', 'testHook2']);
+    queue.createDebugLookup(0, 'MessageQueueTestModule', [
+      'testHook1',
+      'testHook2',
+    ]);
  });

  it('should enqueue native calls', () => {
@@ -50,10 +54,10 @@ describe('MessageQueue', function() {
  });

  it('should call a local function with the function name', () => {
-    MessageQueueTestModule.testHook2 = jasmine.createSpy();
-    expect(MessageQueueTestModule.testHook2.calls.count()).toEqual(0);
+    MessageQueueTestModule.testHook2 = jest.fn();
+    expect(MessageQueueTestModule.testHook2.mock.calls.length).toEqual(0);
    queue.__callFunction('MessageQueueTestModule', 'testHook2', [2]);
-    expect(MessageQueueTestModule.testHook2.calls.count()).toEqual(1);
+    expect(MessageQueueTestModule.testHook2.mock.calls.length).toEqual(1);
  });

  it('should store callbacks', () => {
@@ -64,50 +68,118 @@ describe('MessageQueue', function() {

  it('should call the stored callback', () => {
    let done = false;
-    queue.enqueueNativeCall(0, 1, [], () => {}, () => { done = true; });
-    queue.__invokeCallback(1);
+    queue.enqueueNativeCall(
+      0,
+      1,
+      [],
+      () => {},
+      () => {
+        done = true;
+      },
+    );
+    queue.__invokeCallback(1, []);
    expect(done).toEqual(true);
  });

  it('should throw when calling the same callback twice', () => {
    queue.enqueueNativeCall(0, 1, [], () => {}, () => {});
-    queue.__invokeCallback(1);
-    expect(() => queue.__invokeCallback(1)).toThrow();
+    queue.__invokeCallback(1, []);
+    expect(() => queue.__invokeCallback(1, [])).toThrow();
  });

  it('should throw when calling both success and failure callback', () => {
    queue.enqueueNativeCall(0, 1, [], () => {}, () => {});
-    queue.__invokeCallback(1);
-    expect(() => queue.__invokeCallback(0)).toThrow();
+    queue.__invokeCallback(1, []);
+    expect(() => queue.__invokeCallback(0, [])).toThrow();
  });

  it('should throw when calling with unknown module', () => {
-    const unknownModule = 'UnknownModule', unknownMethod = 'UnknownMethod';
+    const unknownModule = 'UnknownModule',
+      unknownMethod = 'UnknownMethod';
    expect(() => queue.__callFunction(unknownModule, unknownMethod)).toThrow(
      `Module ${unknownModule} is not a registered callable module (calling ${unknownMethod})`,
    );
  });

  it('should return lazily registered module', () => {
-    const dummyModule = {}, name = 'modulesName';
+    const dummyModule = {},
+      name = 'modulesName';
    queue.registerLazyCallableModule(name, () => dummyModule);

    expect(queue.getCallableModule(name)).toEqual(dummyModule);
  });

  it('should not initialize lazily registered module before it was used for the first time', () => {
-    const dummyModule = {}, name = 'modulesName';
+    const dummyModule = {},
+      name = 'modulesName';
    const factory = jest.fn(() => dummyModule);
    queue.registerLazyCallableModule(name, factory);
    expect(factory).not.toHaveBeenCalled();
  });

  it('should initialize lazily registered module only once', () => {
-    const dummyModule = {}, name = 'modulesName';
+    const dummyModule = {},
+      name = 'modulesName';
    const factory = jest.fn(() => dummyModule);
    queue.registerLazyCallableModule(name, factory);
    queue.getCallableModule(name);
    queue.getCallableModule(name);
    expect(factory).toHaveBeenCalledTimes(1);
  });
+
+  it('should catch all exceptions if the global error handler is installed', () => {
+    const errorMessage = 'intentional error';
+    const errorModule = {
+      explode: function() {
+        throw new Error(errorMessage);
+      },
+    };
+    const name = 'errorModuleName';
+    const factory = jest.fn(() => errorModule);
+    queue.__guardSafe = jest.fn(() => {});
+    queue.__guardUnsafe = jest.fn(() => {});
+    queue.installGlobalErrorHandler();
+    queue.registerLazyCallableModule(name, factory);
+    queue.callFunctionReturnFlushedQueue(name, 'explode', []);
+    expect(queue.__guardUnsafe).toHaveBeenCalledTimes(0);
+    expect(queue.__guardSafe).toHaveBeenCalledTimes(2);
+  });
+
+  it('should propagate exceptions if the global error handler is uninstalled', () => {
+    queue.uninstallGlobalErrorHandler();
+    const errorMessage = 'intentional error';
+    const errorModule = {
+      explode: function() {
+        throw new Error(errorMessage);
+      },
+    };
+    const name = 'errorModuleName';
+    const factory = jest.fn(() => errorModule);
+    queue.__guardUnsafe = jest.fn(() => {});
+    queue.__guardSafe = jest.fn(() => {});
+    queue.registerLazyCallableModule(name, factory);
+    queue.uninstallGlobalErrorHandler();
+    queue.callFunctionReturnFlushedQueue(name, 'explode');
+    expect(queue.__guardUnsafe).toHaveBeenCalledTimes(2);
+    expect(queue.__guardSafe).toHaveBeenCalledTimes(0);
+  });
+
+  it('should catch all exceptions if the global error handler is re-installed', () => {
+    const errorMessage = 'intentional error';
+    const errorModule = {
+      explode: function() {
+        throw new Error(errorMessage);
+      },
+    };
+    const name = 'errorModuleName';
+    const factory = jest.fn(() => errorModule);
+    queue.__guardUnsafe = jest.fn(() => {});
+    queue.__guardSafe = jest.fn(() => {});
+    queue.registerLazyCallableModule(name, factory);
+    queue.uninstallGlobalErrorHandler();
+    queue.installGlobalErrorHandler();
+    queue.callFunctionReturnFlushedQueue(name, 'explode');
+    expect(queue.__guardUnsafe).toHaveBeenCalledTimes(0);
+    expect(queue.__guardSafe).toHaveBeenCalledTimes(2);
+  });
 });
@@ -6,6 +6,7 @@
 * 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.
 *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -56,8 +57,8 @@ describe('MessageQueue', function() {
  });

  it('should make round trip and clear memory', function() {
-    const onFail = jasmine.createSpy();
-    const onSucc = jasmine.createSpy();
+    const onFail = jest.fn();
+    const onSucc = jest.fn();

    // Perform communication
    NativeModules.RemoteModule1.promiseMethod('paloAlto', 'menloPark', onFail, onSucc);
@@ -97,8 +98,8 @@ describe('MessageQueue', function() {
    expect(function() {
      BatchedBridge.__invokeCallback(firstSuccCBID, ['firstSucc']);
    }).toThrow();
-    expect(onFail.calls.count()).toBe(1);
-    expect(onSucc.calls.count()).toBe(0);
+    expect(onFail.mock.calls.length).toBe(1);
+    expect(onSucc.mock.calls.length).toBe(0);

    // Handle the second remote invocation by signaling success.
    BatchedBridge.__invokeCallback(secondSuccCBID, ['secondSucc']);
@@ -106,7 +107,7 @@ describe('MessageQueue', function() {
    expect(function() {
      BatchedBridge.__invokeCallback(secondFailCBID, ['secondFail']);
    }).toThrow();
-    expect(onFail.calls.count()).toBe(1);
-    expect(onSucc.calls.count()).toBe(1);
+    expect(onFail.mock.calls.length).toBe(1);
+    expect(onSucc.mock.calls.length).toBe(1);
  });
 });
@@ -13,6 +13,9 @@
 'use strict';

 const invariant = require('fbjs/lib/invariant');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const uuid = require('uuid');

 const { BlobModule } = require('NativeModules');
@@ -59,7 +59,9 @@ class URL {
    if (BLOB_URL_PREFIX === null) {
      throw new Error('Cannot create URL for blob!');
    }
-    return `${BLOB_URL_PREFIX}${blob.blobId}?offset=${blob.offset}&size=${blob.size}`;
+    return `${BLOB_URL_PREFIX}${blob.blobId}?offset=${blob.offset}&size=${
+      blob.size
+    }`;
  }

  static revokeObjectURL(url: string) {
@@ -35,6 +35,7 @@ class BugReporting {
  static _extraSources: Map<string, SourceCallback> = new Map();
  static _fileSources: Map<string, SourceCallback> = new Map();
  static _subscription: ?EmitterSubscription = null;
+  static _redboxSubscription: ?EmitterSubscription = null;

  static _maybeInit() {
    if (!BugReporting._subscription) {
@@ -42,6 +43,11 @@ class BugReporting {
          .addListener('collectBugExtraData', BugReporting.collectExtraData, null);
      defaultExtras();
    }
+
+    if (!BugReporting._redboxSubscription) {
+      BugReporting._redboxSubscription = RCTDeviceEventEmitter
+          .addListener('collectRedBoxExtraData', BugReporting.collectExtraData, null);
+    }
  }

  /**
@@ -98,6 +104,11 @@ class BugReporting {
      BugReportingNativeModule.setExtraData &&
      BugReportingNativeModule.setExtraData(extraData, fileData);

+    const RedBoxNativeModule = require('NativeModules').RedBox;
+    RedBoxNativeModule &&
+      RedBoxNativeModule.setExtraData &&
+      RedBoxNativeModule.setExtraData(extraData, 'From BugReporting.js');
+
    return { extras: extraData, files: fileData };
  }
 }
@@ -35,6 +35,15 @@ const ASSET_TYPE_OPTIONS = {
  Photos: 'Photos',
 };

+type GetPhotosParams = {
+  first: number,
+  after?: string,
+  groupTypes?: $Keys<typeof GROUP_TYPES_OPTIONS>,
+  groupName?: string,
+  assetType?: $Keys<typeof ASSET_TYPE_OPTIONS>,
+  mimeTypes?: Array<string>,
+};
+
 /**
 * Shape of the param arg for the `getPhotos` function.
 */
@@ -63,8 +72,8 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({
  groupName: PropTypes.string,

  /**
-  * Specifies filter on asset type
-  */
+   * Specifies filter on asset type
+   */
  assetType: PropTypes.oneOf(Object.keys(ASSET_TYPE_OPTIONS)),

  /**
@@ -73,6 +82,35 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({
  mimeTypes: PropTypes.arrayOf(PropTypes.string),
 });

+type GetPhotosReturn = Promise<{
+  edges: Array<{
+    node: {
+      type: string,
+      group_name: string,
+      image: {
+        uri: string,
+        height: number,
+        width: number,
+        isStored?: boolean,
+        playableDuration: number,
+      },
+      timestamp: number,
+      location?: {
+        latitude?: number,
+        longitude?: number,
+        altitude?: number,
+        heading?: number,
+        speed?: number,
+      },
+    },
+  }>,
+  page_info: {
+    has_next_page: boolean,
+    start_cursor?: string,
+    end_cursor?: string,
+  },
+}>;
+
 /**
 * Shape of the return value of the `getPhotos` function.
 */
@@ -126,13 +164,17 @@ class CameraRoll {
  /**
   * `CameraRoll.saveImageWithTag()` is deprecated. Use `CameraRoll.saveToCameraRoll()` instead.
   */
-  static saveImageWithTag(tag: string): Promise<Object> {
+  static saveImageWithTag(tag: string): Promise<string> {
    console.warn(
      '`CameraRoll.saveImageWithTag()` is deprecated. Use `CameraRoll.saveToCameraRoll()` instead.',
    );
    return this.saveToCameraRoll(tag, 'photo');
  }

+  static deletePhotos(photos: Array<string>) {
+    return RCTCameraRollManager.deletePhotos(photos);
+  }
+
  /**
   * Saves the photo or video to the camera roll / gallery.
   *
@@ -150,7 +192,7 @@ class CameraRoll {
  static saveToCameraRoll(
    tag: string,
    type?: 'photo' | 'video',
-  ): Promise<Object> {
+  ): Promise<string> {
    invariant(
      typeof tag === 'string',
      'CameraRoll.saveToCameraRoll must be a valid string.',
@@ -158,8 +200,8 @@ class CameraRoll {

    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 ||
+        'unknown'}`,
    );

    let mediaType = 'photo';
@@ -215,10 +257,47 @@ class CameraRoll {
   *              - `speed`: {number}
   * - `page_info` : {object} : An object with the following shape:
   *      - `has_next_page`: {boolean}
-   *      - `start_cursor`: {boolean}
-   *      - `end_cursor`: {boolean}
+   *      - `start_cursor`: {string}
+   *      - `end_cursor`: {string}
+   *
+   * Loading images:
+   * ```
+   * _handleButtonPress = () => {
+   *    CameraRoll.getPhotos({
+   *        first: 20,
+   *        assetType: 'All',
+   *      })
+   *      .then(r => {
+   *        this.setState({ photos: r.edges });
+   *      })
+   *      .catch((err) => {
+   *         //Error Loading Images
+   *      });
+   *    };
+   * render() {
+   *  return (
+   *    <View>
+   *      <Button title="Load Images" onPress={this._handleButtonPress} />
+   *      <ScrollView>
+   *        {this.state.photos.map((p, i) => {
+   *        return (
+   *          <Image
+   *            key={i}
+   *            style={{
+   *              width: 300,
+   *              height: 100,
+   *            }}
+   *            source={{ uri: p.node.image.uri }}
+   *          />
+   *        );
+   *      })}
+   *      </ScrollView>
+   *    </View>
+   *  );
+   * }
+   * ```
   */
-  static getPhotos(params) {
+  static getPhotos(params: GetPhotosParams): GetPhotosReturn {
    if (__DEV__) {
      checkPropTypes(
        {params: getPhotosParamChecker},
@@ -12,6 +12,7 @@
 #import <CoreLocation/CoreLocation.h>
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
+#import <Photos/Photos.h>

 #import <React/RCTBridge.h>
 #import <React/RCTConvert.h>
@@ -234,6 +235,27 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
  }];
 }

+RCT_EXPORT_METHOD(deletePhotos:(NSArray<NSString *>*)assets
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+{
+  NSArray<NSURL *> *assets_ = [RCTConvert NSURLArray:assets];
+  [[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
+      PHFetchResult<PHAsset *> *fetched =
+        [PHAsset fetchAssetsWithALAssetURLs:assets_ options:nil];
+      [PHAssetChangeRequest deleteAssets:fetched];
+    }
+  completionHandler:^(BOOL success, NSError *error) {
+      if (success == YES) {
+     	    resolve(@(success));
+      }
+      else {
+	        reject(@"Couldn't delete", @"Couldn't delete assets", error);
+      }
+    }
+    ];
+}
+
 static void checkPhotoLibraryConfig()
 {
 #if RCT_DEV
@@ -44,7 +44,10 @@ RCT_EXPORT_MODULE()
  // form of an, NSURL which is what assets-library uses.
  NSString *assetID = @"";
  PHFetchResult *results;
-  if ([imageURL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame) {
+  if (!imageURL) {
+    completionHandler(RCTErrorWithMessage(@"Cannot load a photo library asset with no URL"), nil);
+    return ^{};
+  } else if ([imageURL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame) {
    assetID = [imageURL absoluteString];
    results = [PHAsset fetchAssetsWithALAssetURLs:@[imageURL] options:nil];
  } else {
@@ -24,6 +24,16 @@ type ChangeEventName = $Enum<{

 var _subscriptions = new Map();

+/**
+ * Sometimes it's useful to know whether or not the device has a screen reader
+ * that is currently active. The `AccessibilityInfo` API is designed for this
+ * purpose. You can use it to query the current state of the screen reader as 
+ * well as to register to be notified when the state of the screen reader 
+ * changes.
+ *
+ * See http://facebook.github.io/react-native/docs/accessibilityinfo.html
+ */
+
 var AccessibilityInfo = {

  fetch: function(): Promise {
@@ -28,61 +28,23 @@ type ChangeEventName = $Enum<{
 var _subscriptions = new Map();

 /**
- * Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The
- * `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the
- * screen reader as well as to register to be notified when the state of the screen reader changes.
+ * Sometimes it's useful to know whether or not the device has a screen reader
+ * that is currently active. The `AccessibilityInfo` API is designed for this
+ * purpose. You can use it to query the current state of the screen reader as 
+ * well as to register to be notified when the state of the screen reader 
+ * changes.
 *
- * Here's a small example illustrating how to use `AccessibilityInfo`:
- *
- * ```javascript
- * class ScreenReaderStatusExample extends React.Component {
- *   state = {
- *     screenReaderEnabled: false,
- *   }
- *
- *   componentDidMount() {
- *     AccessibilityInfo.addEventListener(
- *       'change',
- *       this._handleScreenReaderToggled
- *     );
- *     AccessibilityInfo.fetch().done((isEnabled) => {
- *       this.setState({
- *         screenReaderEnabled: isEnabled
- *       });
- *     });
- *   }
- *
- *   componentWillUnmount() {
- *     AccessibilityInfo.removeEventListener(
- *       'change',
- *       this._handleScreenReaderToggled
- *     );
- *   }
- *
- *   _handleScreenReaderToggled = (isEnabled) => {
- *     this.setState({
- *       screenReaderEnabled: isEnabled,
- *     });
- *   }
- *
- *   render() {
- *     return (
- *       <View>
- *         <Text>
- *           The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
- *         </Text>
- *       </View>
- *     );
- *   }
- * }
- * ```
+ * See http://facebook.github.io/react-native/docs/accessibilityinfo.html
 */
 var AccessibilityInfo = {

  /**
-   * Query whether a screen reader is currently enabled. Returns a promise which
-   * resolves to a boolean. The result is `true` when a screen reader is enabled
-   * and `false` otherwise.
+   * Query whether a screen reader is currently enabled. 
+   * 
+   * Returns a promise which resolves to a boolean. 
+   * The result is `true` when a screen reader is enabledand `false` otherwise.
+   * 
+   * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#fetch
   */
  fetch: function(): Promise {
    return new Promise((resolve, reject) => {
@@ -100,10 +62,13 @@ var AccessibilityInfo = {
   *   to the event handler is a boolean. The boolean is `true` when a screen
   *   reader is enabled and `false` otherwise.
   * - `announcementFinished`: iOS-only event. Fires when the screen reader has
-   *   finished making an announcement. The argument to the event handler is a dictionary
-   *   with these keys:
+   *   finished making an announcement. The argument to the event handler is a
+   *   dictionary with these keys:
   *     - `announcement`: The string announced by the screen reader.
-   *     - `success`: A boolean indicating whether the announcement was successfully made.
+   *     - `success`: A boolean indicating whether the announcement was
+   *       successfully made.
+   * 
+   * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#addeventlistener
   */
  addEventListener: function (
    eventName: ChangeEventName,
@@ -130,7 +95,11 @@ var AccessibilityInfo = {
  },

  /**
-   * iOS-Only. Set accessibility focus to a react component.
+   * Set accessibility focus to a react component.
+   * 
+   * @platform ios
+   * 
+   * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#setaccessibilityfocus
   */
  setAccessibilityFocus: function(
    reactTag: number
@@ -139,7 +108,11 @@ var AccessibilityInfo = {
  },

  /**
-   * iOS-Only. Post a string to be announced by the screen reader.
+   * Post a string to be announced by the screen reader.
+   *
+   * @platform ios
+   * 
+   * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#announceforaccessibility
   */
  announceForAccessibility: function(
    announcement: string
@@ -149,6 +122,8 @@ var AccessibilityInfo = {

  /**
   * Remove an event handler.
+   * 
+   * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#removeeventlistener
   */
  removeEventListener: function(
    eventName: ChangeEventName,
@@ -14,8 +14,9 @@
 const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
-const React = require('React');
+const ProgressBarAndroid = require('ProgressBarAndroid');
 const PropTypes = require('prop-types');
+const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
@@ -36,10 +37,9 @@ type DefaultProps = {

 /**
 * Displays a circular loading indicator.
+ *
+ * See http://facebook.github.io/react-native/docs/activityindicator.html
 */
-/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
- * suppresses an error when upgrading Flow's support for React. To see the
- * error delete this comment and run Flow. */
 const ActivityIndicator = createReactClass({
  displayName: 'ActivityIndicator',
  mixins: [NativeMethodsMixin],
@@ -48,15 +48,21 @@ const ActivityIndicator = createReactClass({
    ...ViewPropTypes,
    /**
     * Whether to show the indicator (true, the default) or hide it (false).
+     * 
+     * See http://facebook.github.io/react-native/docs/activityindicator.html#animating
     */
    animating: PropTypes.bool,
    /**
     * The foreground color of the spinner (default is gray).
+     * 
+     * See http://facebook.github.io/react-native/docs/activityindicator.html#color
     */
    color: ColorPropType,
    /**
     * Size of the indicator (default is 'small').
     * Passing a number to the size prop is only supported on Android.
+     * 
+     * See http://facebook.github.io/react-native/docs/activityindicator.html#size
     */
    size: PropTypes.oneOfType([
      PropTypes.oneOf([ 'small', 'large' ]),
@@ -66,6 +72,8 @@ const ActivityIndicator = createReactClass({
     * Whether the indicator should hide when not animating (true by default).
     *
     * @platform ios
+     * 
+     * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
     */
    hidesWhenStopped: PropTypes.bool,
  },
@@ -95,16 +103,20 @@ const ActivityIndicator = createReactClass({
        break;
    }

+    const nativeProps = {
+      ...props,
+      style: sizeStyle,
+      styleAttr: 'Normal',
+      indeterminate: true,
+    };
+
    return (
-      <View
-        onLayout={onLayout}
-        style={[styles.container, style]}>
-        <RCTActivityIndicator
-          {...props}
-          style={sizeStyle}
-          styleAttr="Normal"
-          indeterminate
-        />
+      <View onLayout={onLayout} style={[styles.container, style]}>
+        {Platform.OS === 'ios' ? (
+          <RCTActivityIndicator {...nativeProps} />
+        ) : (
+          <ProgressBarAndroid {...nativeProps} />
+        )}
      </View>
    );
  }
@@ -129,18 +141,7 @@ if (Platform.OS === 'ios') {
  var RCTActivityIndicator = requireNativeComponent(
    'RCTActivityIndicatorView',
    ActivityIndicator,
-    {nativeOnly: {activityIndicatorViewStyle: true}},
-  );
-} else if (Platform.OS === 'android') {
-  var RCTActivityIndicator = requireNativeComponent(
-    'AndroidProgressBar',
-    ActivityIndicator,
-    // Ignore props that are specific to non inderterminate ProgressBar.
-    {nativeOnly: {
-      indeterminate: true,
-      progress: true,
-      styleAttr: true,
-    }},
+    { nativeOnly: { activityIndicatorViewStyle: true } }
  );
 }

@@ -38,6 +38,9 @@ const invariant = require('fbjs/lib/invariant');
 * Example usage:
 *
 * ```
+ * import { Button } from 'react-native';
+ * ...
+ *
 * <Button
 *   onPress={onPressLearnMore}
 *   title="Learn More"
@@ -55,6 +58,7 @@ class Button extends React.Component<{
  accessibilityLabel?: ?string,
  disabled?: ?boolean,
  testID?: ?string,
+  hasTVPreferredFocus?: ?boolean,
 }> {
  static propTypes = {
    /**
@@ -81,6 +85,12 @@ class Button extends React.Component<{
     * Used to locate this view in end-to-end tests.
     */
    testID: PropTypes.string,
+    /**
+     * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+     *
+     * @platform ios
+     */
+    hasTVPreferredFocus: PropTypes.bool,
  };

  render() {
@@ -89,6 +99,7 @@ class Button extends React.Component<{
      color,
      onPress,
      title,
+      hasTVPreferredFocus,
      disabled,
      testID,
    } = this.props;
@@ -118,6 +129,7 @@ class Button extends React.Component<{
        accessibilityComponentType="button"
        accessibilityLabel={accessibilityLabel}
        accessibilityTraits={accessibilityTraits}
+        hasTVPreferredFocus={hasTVPreferredFocus}
        testID={testID}
        disabled={disabled}
        onPress={onPress}>
@@ -27,17 +27,60 @@ type DefaultProps = {
 };

 /**
- * Renders a boolean input.
+ * Renders a boolean input (Android only).
 *
 * This is a controlled component that requires an `onValueChange` callback that
 * updates the `value` prop in order for the component to reflect user actions.
 * If the `value` prop is not updated, the component will continue to render
 * the supplied `value` prop instead of the expected result of any user actions.
 *
+ * ```
+ * import React from 'react';
+ * import { AppRegistry, StyleSheet, Text, View, CheckBox } from 'react-native';
+ *
+ * export default class App extends React.Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       checked: false
+ *     }
+ *   }
+ *
+ *   toggle() {
+ *     this.setState(({checked}) => {
+ *       return {
+ *         checked: !checked
+ *       };
+ *     });
+ *   }
+ *
+ *   render() {
+ *     const {checked} = this.state;
+ *     return (
+ *       <View style={styles.container}>
+ *         <Text>Checked</Text>
+ *         <CheckBox value={checked} onChange={this.toggle.bind(this)} />
+ *       </View>
+ *     );
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     flexDirection: 'row',
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *   },
+ * });
+ *
+ * // skip this line if using Create React Native App
+ * AppRegistry.registerComponent('App', () => App);
+ * ```
+ *
 * @keyword checkbox
 * @keyword toggle
 */
-// $FlowFixMe(>=0.41.0)
 let CheckBox = createReactClass({
  displayName: 'CheckBox',
  propTypes: {
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2017-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 CheckBox
+ * @flow
+ * @format
+ */
+'use strict';
+
+module.exports = require('UnimplementedView');
@@ -36,7 +36,6 @@ type Event = Object;
 * the user's change will be reverted immediately to reflect `props.date` as the
 * source of truth.
 */
-// $FlowFixMe(>=0.41.0)
 const DatePickerIOS = createReactClass({
  displayName: 'DatePickerIOS',
  // TOOD: Put a better type for _picker
@@ -79,6 +78,11 @@ const DatePickerIOS = createReactClass({
     */
    mode: PropTypes.oneOf(['date', 'time', 'datetime']),

+    /**
+     * The date picker locale.
+     */
+    locale: PropTypes.string,
+
    /**
     * The interval at which minutes can be selected.
     */
@@ -128,6 +132,7 @@ const DatePickerIOS = createReactClass({
          ref={ picker => { this._picker = picker; } }
          style={styles.datePickerIOS}
          date={props.date.getTime()}
+          locale={props.locale ? props.locale : undefined}
          maximumDate={
            props.maximumDate ? props.maximumDate.getTime() : undefined
          }
@@ -156,6 +161,7 @@ const RCTDatePickerIOS = requireNativeComponent('RCTDatePicker', {
  propTypes: {
    ...DatePickerIOS.propTypes,
    date: PropTypes.number,
+    locale: PropTypes.string,
    minimumDate: PropTypes.number,
    maximumDate: PropTypes.number,
    onDateChange: () => null,
@@ -11,6 +11,7 @@
 */
 'use strict';

+const LayoutAnimation = require('LayoutAnimation');
 const invariant = require('fbjs/lib/invariant');
 const NativeEventEmitter = require('NativeEventEmitter');
 const KeyboardObserver = require('NativeModules').KeyboardObserver;
@@ -25,20 +26,22 @@ type KeyboardEventName =
  | 'keyboardWillChangeFrame'
  | 'keyboardDidChangeFrame';

-type KeyboardEventData = {
-  endCoordinates: {
-    width: number,
-    height: number,
-    screenX: number,
-    screenY: number,
-  },
-};
+export type KeyboardEvent = {|
+  +duration?: number,
+  +easing?: string,
+  +endCoordinates: {|
+    +width: number,
+    +height: number,
+    +screenX: number,
+    +screenY: number,
+  |},
+|};

-type KeyboardEventListener = (e: KeyboardEventData) => void;
+type KeyboardEventListener = (e: KeyboardEvent) => void;

 // The following object exists for documentation purposes
 // Actual work happens in
-// https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/NativeEventEmitter.js
+// https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js

 /**
 * `Keyboard` module to control keyboard events.
@@ -134,11 +137,31 @@ let Keyboard = {
   */
  dismiss() {
    invariant(false, 'Dummy method used for documentation');
-  }
+  },
+
+  /**
+   * Useful for syncing TextInput (or other keyboard accessory view) size of
+   * position changes with keyboard movements.
+   */
+  scheduleLayoutAnimation(event: KeyboardEvent) {
+    invariant(false, 'Dummy method used for documentation');
+  },
 };

 // Throw away the dummy object and reassign it to original module
 Keyboard = KeyboardEventEmitter;
 Keyboard.dismiss = dismissKeyboard;
+Keyboard.scheduleLayoutAnimation = function(event: KeyboardEvent) {
+  const {duration, easing} = event;
+  if (duration) {
+    LayoutAnimation.configureNext({
+      duration: duration,
+      update: {
+        duration: duration,
+        type: (easing && LayoutAnimation.Types[easing]) || 'keyboard',
+      },
+    });
+  }
+};

 module.exports = Keyboard;
@@ -17,6 +17,9 @@ const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
 const PropTypes = require('prop-types');
 const React = require('React');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
@@ -40,16 +43,19 @@ type KeyboardChangeEvent = {
 const viewRef = 'VIEW';

 /**
- * It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
- * It can automatically adjust either its position or bottom padding based on the position of the keyboard.
+ * This is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
+ * It can automatically adjust either its height, position or bottom padding based on the position of the keyboard.
 */
-// $FlowFixMe(>=0.41.0)
 const KeyboardAvoidingView = createReactClass({
  displayName: 'KeyboardAvoidingView',
  mixins: [TimerMixin],

  propTypes: {
    ...ViewPropTypes,
+    /**
+     * Specify how the `KeyboardAvoidingView` will react to the presence of
+     * the keyboard. It can adjust the height, position or bottom padding of the view
+     */
    behavior: PropTypes.oneOf(['height', 'position', 'padding']),

    /**
@@ -59,7 +65,7 @@ const KeyboardAvoidingView = createReactClass({

    /**
     * This is the distance between the top of the user screen and the react native view,
-     * may be non-zero in some use cases.
+     * may be non-zero in some use cases. The default value is 0.
     */
    keyboardVerticalOffset: PropTypes.number.isRequired,
  },
@@ -79,7 +85,7 @@ const KeyboardAvoidingView = createReactClass({
  subscriptions: ([]: Array<EmitterSubscription>),
  frame: (null: ?ViewLayout),

-  relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
+  _relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
    const frame = this.frame;
    if (!frame || !keyboardFrame) {
      return 0;
@@ -92,14 +98,18 @@ const KeyboardAvoidingView = createReactClass({
    return Math.max(frame.y + frame.height - keyboardY, 0);
  },

-  onKeyboardChange(event: ?KeyboardChangeEvent) {
+  _onKeyboardChange(event: ?KeyboardChangeEvent) {
    if (!event) {
      this.setState({bottom: 0});
      return;
    }

    const {duration, easing, endCoordinates} = event;
-    const height = this.relativeKeyboardHeight(endCoordinates);
+    const height = this._relativeKeyboardHeight(endCoordinates);
+
+    if (this.state.bottom === height) {
+      return;
+    }

    if (duration && easing) {
      LayoutAnimation.configureNext({
@@ -113,7 +123,7 @@ const KeyboardAvoidingView = createReactClass({
    this.setState({bottom: height});
  },

-  onLayout(event: ViewLayoutEvent) {
+  _onLayout(event: ViewLayoutEvent) {
    this.frame = event.nativeEvent.layout;
  },

@@ -130,12 +140,12 @@ const KeyboardAvoidingView = createReactClass({
  componentWillMount() {
    if (Platform.OS === 'ios') {
      this.subscriptions = [
-        Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange),
+        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
      ];
    } else {
      this.subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this.onKeyboardChange),
-        Keyboard.addListener('keyboardDidShow', this.onKeyboardChange),
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
      ];
    }
  },
@@ -159,7 +169,7 @@ const KeyboardAvoidingView = createReactClass({
          heightStyle = {height: this.frame.height - this.state.bottom, flex: 0};
        }
        return (
-          <View ref={viewRef} style={[style, heightStyle]} onLayout={this.onLayout} {...props}>
+          <View ref={viewRef} style={[style, heightStyle]} onLayout={this._onLayout} {...props}>
            {children}
          </View>
        );
@@ -169,7 +179,7 @@ const KeyboardAvoidingView = createReactClass({
        const { contentContainerStyle } = this.props;

        return (
-          <View ref={viewRef} style={style} onLayout={this.onLayout} {...props}>
+          <View ref={viewRef} style={style} onLayout={this._onLayout} {...props}>
            <View style={[contentContainerStyle, positionStyle]}>
              {children}
            </View>
@@ -179,14 +189,14 @@ const KeyboardAvoidingView = createReactClass({
      case 'padding':
        const paddingStyle = {paddingBottom: this.state.bottom};
        return (
-          <View ref={viewRef} style={[style, paddingStyle]} onLayout={this.onLayout} {...props}>
+          <View ref={viewRef} style={[style, paddingStyle]} onLayout={this._onLayout} {...props}>
            {children}
          </View>
        );

      default:
        return (
-          <View ref={viewRef} onLayout={this.onLayout} style={style} {...props}>
+          <View ref={viewRef} onLayout={this._onLayout} style={style} {...props}>
            {children}
          </View>
        );
@@ -33,12 +33,12 @@ type Props = ViewProps & {
 *
 * ```
 * import React from 'react';
- * import { MaskedView, Text, View } from 'react-native';
+ * import { MaskedViewIOS, Text, View } from 'react-native';
 *
 * class MyMaskedView extends React.Component {
 *   render() {
 *     return (
- *       <MaskedView
+ *       <MaskedViewIOS
 *         style={{ flex: 1 }}
 *         maskElement={
 *           <View style={styles.maskContainerStyle}>
@@ -49,7 +49,7 @@ type Props = ViewProps & {
 *         }
 *       >
 *         <View style={{ flex: 1, backgroundColor: 'blue' }} />
- *       </MaskedView>
+ *       </MaskedViewIOS>
 *     );
 *   }
 * }
@@ -27,6 +27,9 @@ var createReactClass = require('create-react-class');
 var invariant = require('fbjs/lib/invariant');
 var requireNativeComponent = require('requireNativeComponent');

+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const keyMirror = require('fbjs/lib/keyMirror');

 var TRANSITIONER_REF = 'transitionerRef';
@@ -10,16 +10,15 @@
 */
 'use strict';

-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var ViewPropTypes = require('ViewPropTypes');
-var ColorPropType = require('ColorPropType');
+const ColorPropType = require('ColorPropType');
+const PropTypes = require('prop-types');
+const React = require('React');
+const ReactNative = require('ReactNative');
+const ViewPropTypes = require('ViewPropTypes');

-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
+const requireNativeComponent = require('requireNativeComponent');

-var STYLE_ATTRIBUTES = [
+const STYLE_ATTRIBUTES = [
  'Horizontal',
  'Normal',
  'Small',
@@ -29,10 +28,10 @@ var STYLE_ATTRIBUTES = [
  'LargeInverse',
 ];

-var indeterminateType = function(props, propName, componentName, ...rest) {
-  var checker = function() {
-    var indeterminate = props[propName];
-    var styleAttr = props.styleAttr;
+const indeterminateType = function(props, propName, componentName, ...rest) {
+  const checker = function() {
+    const indeterminate = props[propName];
+    const styleAttr = props.styleAttr;
    if (!indeterminate && styleAttr !== 'Horizontal') {
      return new Error('indeterminate=false is only valid for styleAttr=Horizontal');
    }
@@ -64,10 +63,10 @@ var indeterminateType = function(props, propName, componentName, ...rest) {
 * },
 * ```
 */
-var ProgressBarAndroid = createReactClass({
-  displayName: 'ProgressBarAndroid',
-  propTypes: {
+class ProgressBarAndroid extends ReactNative.NativeComponent {
+  static propTypes = {
    ...ViewPropTypes,
+
    /**
     * Style of the ProgressBar. One of:
     *
@@ -80,6 +79,10 @@ var ProgressBarAndroid = createReactClass({
     * - LargeInverse
     */
    styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
+    /**
+     * Whether to show the ProgressBar (true, the default) or hide it (false).
+     */
+    animating: PropTypes.bool,
    /**
     * If the progress bar will show indeterminate progress. Note that this
     * can only be false if styleAttr is Horizontal.
@@ -97,35 +100,27 @@ var ProgressBarAndroid = createReactClass({
     * Used to locate this view in end-to-end tests.
     */
    testID: PropTypes.string,
-  },
+  };

-  getDefaultProps: function() {
-    return {
-      styleAttr: 'Normal',
-      indeterminate: true
-    };
-  },
+  static defaultProps = {
+    styleAttr: 'Normal',
+    indeterminate: true,
+    animating: true,
+  };

-  mixins: [NativeMethodsMixin],
-
-  componentDidMount: function() {
-    if (this.props.indeterminate && this.props.styleAttr !== 'Horizontal') {
-      console.warn(
-        'Circular indeterminate `ProgressBarAndroid`' +
-        'is deprecated. Use `ActivityIndicator` instead.'
-      );
-    }
-  },
-
-  render: function() {
+  render() {
    return <AndroidProgressBar {...this.props} />;
-  },
-});
+  }
+}

-var AndroidProgressBar = requireNativeComponent(
+const AndroidProgressBar = requireNativeComponent(
  'AndroidProgressBar',
  ProgressBarAndroid,
-  {nativeOnly: {animating: true}},
+  {
+    nativeOnly: {
+      animating: true,
+    },
+  }
 );

 module.exports = ProgressBarAndroid;
@@ -24,7 +24,6 @@ var requireNativeComponent = require('requireNativeComponent');
 /**
 * Use `ProgressViewIOS` to render a UIProgressView on iOS.
 */
-// $FlowFixMe(>=0.41.0)
 var ProgressViewIOS = createReactClass({
  displayName: 'ProgressViewIOS',
  mixins: [NativeMethodsMixin],
@@ -72,7 +72,6 @@ if (Platform.OS === 'android') {
 * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
 * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
 */
-// $FlowFixMe(>=0.41.0)
 const RefreshControl = createReactClass({
  displayName: 'RefreshControl',
  statics: {
@@ -0,0 +1,14 @@
+/**
+ * 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 SafeAreaView
+ * @flow
+ */
+'use strict';
+
+module.exports = require('View');
@@ -0,0 +1,48 @@
+/**
+ * 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 SafeAreaView
+ * @flow
+ * @format
+ */
+
+const React = require('React');
+const ViewPropTypes = require('ViewPropTypes');
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = ViewProps & {
+  children: any,
+};
+
+/**
+ * Renders nested content and automatically applies paddings reflect the portion of the view
+ * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+ * Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen,
+ * such as rounded corners or camera notches (aka sensor housing area on iPhone X).
+ */
+class SafeAreaView extends React.Component<Props> {
+  static propTypes = {
+    ...ViewPropTypes,
+  };
+
+  render() {
+    return <RCTSafeAreaView {...this.props} />;
+  }
+}
+
+const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView', {
+  name: 'RCTSafeAreaView',
+  displayName: 'RCTSafeAreaView',
+  propTypes: {
+    ...ViewPropTypes,
+  },
+});
+
+module.exports = SafeAreaView;
@@ -11,21 +11,21 @@
 */
 'use strict';

-var Dimensions = require('Dimensions');
-var FrameRateLogger = require('FrameRateLogger');
-var Keyboard = require('Keyboard');
-var ReactNative = require('ReactNative');
-var Subscribable = require('Subscribable');
-var TextInputState = require('TextInputState');
-var UIManager = require('UIManager');
+const Dimensions = require('Dimensions');
+const FrameRateLogger = require('FrameRateLogger');
+const Keyboard = require('Keyboard');
+const ReactNative = require('ReactNative');
+const Subscribable = require('Subscribable');
+const TextInputState = require('TextInputState');
+const UIManager = require('UIManager');

-var invariant = require('fbjs/lib/invariant');
-var nullthrows = require('fbjs/lib/nullthrows');
-var performanceNow = require('fbjs/lib/performanceNow');
-var warning = require('fbjs/lib/warning');
+const invariant = require('fbjs/lib/invariant');
+const nullthrows = require('fbjs/lib/nullthrows');
+const performanceNow = require('fbjs/lib/performanceNow');
+const warning = require('fbjs/lib/warning');

-var { ScrollViewManager } = require('NativeModules');
-var { getInstanceFromNode } = require('ReactNativeComponentTree');
+const { ScrollViewManager } = require('NativeModules');
+const { getInstanceFromNode } = require('ReactNativeComponentTree');

 /**
 * Mixin that can be integrated in order to handle scrolling that plays well
@@ -105,7 +105,7 @@ var { getInstanceFromNode } = require('ReactNativeComponentTree');
 *   this.props.onKeyboardDidHide
 */

-var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
+const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;

 type State = {
    isTouching: boolean,
@@ -117,15 +117,15 @@ type State = {
 type Event = Object;

 function isTagInstanceOfTextInput(tag) {
-  var instance = getInstanceFromNode(tag);
+  const instance = getInstanceFromNode(tag);
  return instance && instance.viewConfig && (
    instance.viewConfig.uiViewClassName === 'AndroidTextInput' ||
-    instance.viewConfig.uiViewClassName === 'RCTTextView' ||
-    instance.viewConfig.uiViewClassName === 'RCTTextField'
+    instance.viewConfig.uiViewClassName === 'RCTMultilineTextInputView' ||
+    instance.viewConfig.uiViewClassName === 'RCTSinglelineTextInputView'
  );
 }

-var ScrollResponderMixin = {
+const ScrollResponderMixin = {
  mixins: [Subscribable.Mixin],
  scrollResponderMixinGetInitialState: function(): State {
    return {
@@ -176,7 +176,7 @@ var ScrollResponderMixin = {
   *
   */
  scrollResponderHandleStartShouldSetResponder: function(e: Event): boolean {
-    var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();

    if (this.props.keyboardShouldPersistTaps === 'handled' &&
      currentlyFocusedTextInput != null &&
@@ -199,9 +199,9 @@ var ScrollResponderMixin = {
   */
  scrollResponderHandleStartShouldSetResponderCapture: function(e: Event): boolean {
    // First see if we want to eat taps while the keyboard is up
-    var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
-    var {keyboardShouldPersistTaps} = this.props;
-    var keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+    const {keyboardShouldPersistTaps} = this.props;
+    const keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
                                    keyboardShouldPersistTaps === 'never';
    if (keyboardNeverPersistTaps &&
      currentlyFocusedTextInput != null &&
@@ -249,11 +249,21 @@ var ScrollResponderMixin = {
   * @param {SyntheticEvent} e Event.
   */
  scrollResponderHandleTouchEnd: function(e: Event) {
-    var nativeEvent = e.nativeEvent;
+    const nativeEvent = e.nativeEvent;
    this.state.isTouching = nativeEvent.touches.length !== 0;
    this.props.onTouchEnd && this.props.onTouchEnd(e);
  },

+  /**
+   * Invoke this from an `onTouchCancel` event.
+   *
+   * @param {SyntheticEvent} e Event.
+   */
+  scrollResponderHandleTouchCancel: function(e: Event) {
+    this.state.isTouching = false;
+    this.props.onTouchCancel && this.props.onTouchCancel(e);
+  },
+
  /**
   * Invoke this from an `onResponderRelease` event.
   */
@@ -262,7 +272,7 @@ var ScrollResponderMixin = {

    // By default scroll views will unfocus a textField
    // if another touch occurs outside of it
-    var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
    if (this.props.keyboardShouldPersistTaps !== true &&
      this.props.keyboardShouldPersistTaps !== 'always' &&
      currentlyFocusedTextInput != null &&
@@ -372,9 +382,9 @@ var ScrollResponderMixin = {
   * a touch has just started or ended.
   */
  scrollResponderIsAnimating: function(): boolean {
-    var now = performanceNow();
-    var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
-    var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
+    const now = performanceNow();
+    const timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
+    const isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
      this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
    return isAnimating;
  },
@@ -453,12 +463,13 @@ var ScrollResponderMixin = {
   * @platform ios
   */
  scrollResponderZoomTo: function(
-    rect: { x: number, y: number, width: number, height: number, animated?: boolean },
+    rect: {| x: number, y: number, width: number, height: number, animated?: boolean |},
    animated?: boolean // deprecated, put this inside the rect argument instead
  ) {
    invariant(ScrollViewManager && ScrollViewManager.zoomToRect, 'zoomToRect is not implemented');
    if ('animated' in rect) {
-      var { animated, ...rect } = rect;
+      animated = rect.animated;
+      delete rect.animated;
    } else if (typeof animated !== 'undefined') {
      console.warn('`scrollResponderZoomTo` `animated` argument is deprecated. Use `options.animated` instead');
    }
@@ -508,11 +519,11 @@ var ScrollResponderMixin = {
   * @param {number} height Height of the text input.
   */
  scrollResponderInputMeasureAndScrollToKeyboard: function(left: number, top: number, width: number, height: number) {
-    var keyboardScreenY = Dimensions.get('window').height;
+    let keyboardScreenY = Dimensions.get('window').height;
    if (this.keyboardWillOpenTo) {
      keyboardScreenY = this.keyboardWillOpenTo.endCoordinates.screenY;
    }
-    var scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
+    let scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;

    // By default, this can scroll with negative offset, pulling the content
    // down so that the target component's bottom meets the keyboard's top.
@@ -538,11 +549,11 @@ var ScrollResponderMixin = {
   * The `keyboardWillShow` is called before input focus.
   */
  componentWillMount: function() {
-    var {keyboardShouldPersistTaps} = this.props;
+    const {keyboardShouldPersistTaps} = this.props;
    warning(
      typeof keyboardShouldPersistTaps !== 'boolean',
      `'keyboardShouldPersistTaps={${keyboardShouldPersistTaps}}' is deprecated. `
-      + `Use 'keyboardShouldPersistTaps="${keyboardShouldPersistTaps ? "always" : "never"}"' instead`
+      + `Use 'keyboardShouldPersistTaps="${keyboardShouldPersistTaps ? 'always' : 'never'}"' instead`
    );

    this.keyboardWillOpenTo = null;
@@ -607,7 +618,7 @@ var ScrollResponderMixin = {

 };

-var ScrollResponder = {
+const ScrollResponder = {
  Mixin: ScrollResponderMixin,
 };

@@ -33,6 +33,9 @@ const flattenStyle = require('flattenStyle');
 const invariant = require('fbjs/lib/invariant');
 const processDecelerationRate = require('processDecelerationRate');
 const requireNativeComponent = require('requireNativeComponent');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const warning = require('fbjs/lib/warning');

 import type {NativeMethodsMixinType} from 'ReactNativeTypes';
@@ -253,6 +256,15 @@ const ScrollView = createReactClass({
     * events can be controlled using the `scrollEventThrottle` prop.
     */
    onScroll: PropTypes.func,
+    /**
+     * Called when the user begins to drag the scroll view.
+     */
+    onScrollBeginDrag: PropTypes.func,
+    /**
+     * Called when the user stops dragging the scroll view and it either stops
+     * or begins to glide.
+     */
+    onScrollEndDrag: PropTypes.func,
    /**
     * Called when scrollable content view of the ScrollView changes.
     *
@@ -281,7 +293,7 @@ const ScrollView = createReactClass({
     * When false, the view cannot be scrolled via touch interaction.
     * The default value is true.
     *
-     * Note that the view can be always be scrolled by calling `scrollTo`.
+     * Note that the view can always be scrolled by calling `scrollTo`.
     */
    scrollEnabled: PropTypes.bool,
    /**
@@ -328,15 +340,14 @@ const ScrollView = createReactClass({
     * with `horizontal={true}`.
     */
    stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number),
-    style: StyleSheetPropType(ViewStylePropTypes),
    /**
     * When set, causes the scroll view to stop at multiples of the value of
     * `snapToInterval`. This can be used for paginating through children
     * that have lengths smaller than the scroll view. Typically used in
-     * combination with `snapToAlignment` and `decelerationRate="fast"`.
+     * combination with `snapToAlignment` and `decelerationRate="fast"` on ios.
     * Overrides less configurable `pagingEnabled` prop.
     *
-     * @platform ios
+     * Supported for horizontal scrollview on android.
     */
    snapToInterval: PropTypes.number,
    /**
@@ -444,7 +455,8 @@ const ScrollView = createReactClass({
  },

  componentWillMount: function() {
-    this._scrollAnimatedValue = new Animated.Value(0);
+    this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
+    this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
    this._stickyHeaderRefs = new Map();
    this._headerLayoutYs = new Map();
  },
@@ -548,9 +560,6 @@ const ScrollView = createReactClass({
  },

  _getKeyForIndex: function(index, childArray) {
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    const child = childArray[index];
    return child && child.key;
  },
@@ -580,9 +589,6 @@ const ScrollView = createReactClass({
    if (!this.props.stickyHeaderIndices) {
      return;
    }
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    const childArray = React.Children.toArray(this.props.children);
    if (key !== this._getKeyForIndex(index, childArray)) {
      // ignore stale layout update
@@ -592,13 +598,7 @@ const ScrollView = createReactClass({
    const layoutY = event.nativeEvent.layout.y;
    this._headerLayoutYs.set(key, layoutY);

-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    const indexOfIndex = this.props.stickyHeaderIndices.indexOf(index);
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    const previousHeaderIndex = this.props.stickyHeaderIndices[indexOfIndex - 1];
    if (previousHeaderIndex != null) {
      const previousHeader = this._stickyHeaderRefs.get(
@@ -611,7 +611,7 @@ const ScrollView = createReactClass({
  _handleScroll: function(e: Object) {
    if (__DEV__) {
      if (this.props.onScroll && this.props.scrollEventThrottle == null && Platform.OS === 'ios') {
-        console.log( // eslint-disable-line no-console-disallow
+        console.log(
          'You specified `onScroll` on a <ScrollView> but not ' +
          '`scrollEventThrottle`. You will only receive one event. ' +
          'Using `16` you get all the events but be aware that it may ' +
@@ -656,10 +656,11 @@ const ScrollView = createReactClass({
    } else if (Platform.OS === 'android') {
      if (this.props.horizontal) {
        ScrollViewClass = AndroidHorizontalScrollView;
+        ScrollContentContainerViewClass = AndroidHorizontalScrollContentView;
      } else {
        ScrollViewClass = AndroidScrollView;
+        ScrollContentContainerViewClass = View;
      }
-      ScrollContentContainerViewClass = View;
    }

    invariant(
@@ -697,34 +698,18 @@ const ScrollView = createReactClass({

    const {stickyHeaderIndices} = this.props;
    const hasStickyHeaders = stickyHeaderIndices && stickyHeaderIndices.length > 0;
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    const childArray = hasStickyHeaders && React.Children.toArray(this.props.children);
    const children = hasStickyHeaders ?
-      /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-       * comment suppresses an error when upgrading Flow's support for React.
-       * To see the error delete this comment and run Flow. */
      childArray.map((child, index) => {
-        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-         * comment suppresses an error when upgrading Flow's support for React.
-         * To see the error delete this comment and run Flow. */
        const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
        if (indexOfIndex > -1) {
          const key = child.key;
-          /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error when upgrading Flow's support for
-           * React. To see the error delete this comment and run Flow. */
          const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
          return (
            <ScrollViewStickyHeader
              key={key}
              ref={(ref) => this._setStickyHeaderRef(key, ref)}
              nextHeaderLayoutY={
-                /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss)
-                 * This comment suppresses an error when upgrading Flow's
-                 * support for React. To see the error delete this comment and
-                 * run Flow. */
                this._headerLayoutYs.get(this._getKeyForIndex(nextIndex, childArray))
              }
              onLayout={(event) => this._onStickyHeaderLayout(index, event, key)}
@@ -736,16 +721,10 @@ const ScrollView = createReactClass({
          return child;
        }
      }) :
-      /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-       * comment suppresses an error when upgrading Flow's support for React.
-       * To see the error delete this comment and run Flow. */
      this.props.children;
    const contentContainer =
      <ScrollContentContainerViewClass
        {...contentSizeChangeProps}
-        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-         * comment suppresses an error when upgrading Flow's support for React.
-         * To see the error delete this comment and run Flow. */
        ref={this._setInnerViewRef}
        style={contentContainerStyle}
        removeClippedSubviews={
@@ -786,9 +765,6 @@ const ScrollView = createReactClass({
      onResponderGrant: this.scrollResponderHandleResponderGrant,
      onResponderReject: this.scrollResponderHandleResponderReject,
      onResponderRelease: this.scrollResponderHandleResponderRelease,
-      /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-       * comment suppresses an error when upgrading Flow's support for React.
-       * To see the error delete this comment and run Flow. */
      onResponderTerminate: this.scrollResponderHandleTerminate,
      onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
      onScroll: this._handleScroll,
@@ -800,6 +776,7 @@ const ScrollView = createReactClass({
      onTouchEnd: this.scrollResponderHandleTouchEnd,
      onTouchMove: this.scrollResponderHandleTouchMove,
      onTouchStart: this.scrollResponderHandleTouchStart,
+      onTouchCancel: this.scrollResponderHandleTouchCancel,
      scrollEventThrottle: hasStickyHeaders ? 1 : this.props.scrollEventThrottle,
      sendMomentumEvents: (this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd) ?
        true : false,
@@ -818,9 +795,6 @@ const ScrollView = createReactClass({
        // On iOS the RefreshControl is a child of the ScrollView.
        // tvOS lacks native support for RefreshControl, so don't include it in that case
        return (
-          /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error when upgrading Flow's support for
-           * React. To see the error delete this comment and run Flow. */
          <ScrollViewClass {...props} ref={this._setScrollViewRef}>
            {Platform.isTVOS ? null : refreshControl}
            {contentContainer}
@@ -836,9 +810,6 @@ const ScrollView = createReactClass({
        return React.cloneElement(
          refreshControl,
          {style: props.style},
-          /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error when upgrading Flow's support for
-           * React. To see the error delete this comment and run Flow. */
          <ScrollViewClass {...props} style={baseStyle} ref={this._setScrollViewRef}>
            {contentContainer}
          </ScrollViewClass>
@@ -846,9 +817,6 @@ const ScrollView = createReactClass({
      }
    }
    return (
-      /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-       * comment suppresses an error when upgrading Flow's support for React.
-       * To see the error delete this comment and run Flow. */
      <ScrollViewClass {...props} ref={this._setScrollViewRef}>
        {contentContainer}
      </ScrollViewClass>
@@ -876,6 +844,7 @@ const styles = StyleSheet.create({

 let nativeOnlyProps,
  AndroidScrollView,
+  AndroidHorizontalScrollContentView,
  AndroidHorizontalScrollView,
  RCTScrollView,
  RCTScrollContentView;
@@ -895,6 +864,9 @@ if (Platform.OS === 'android') {
    (ScrollView: React.ComponentType<any>),
    nativeOnlyProps
  );
+  AndroidHorizontalScrollContentView = requireNativeComponent(
+    'AndroidHorizontalScrollContentView'
+  );
 } else if (Platform.OS === 'ios') {
  nativeOnlyProps = {
    nativeOnly: {
@@ -909,7 +881,6 @@ if (Platform.OS === 'android') {
    (ScrollView: React.ComponentType<any>),
    nativeOnlyProps,
  );
-  // $FlowFixMe (bvaughn) Update ComponentInterface in ViewPropTypes to include a string type (for Fiber host components) in a follow-up.
  RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
 }

@@ -8,8 +8,13 @@
 *
 * @flow
 */
+
+/* eslint-env jest */
+
 'use strict';

+declare var jest: any;
+
 const React = require('React');
 const View = require('View');

@@ -17,7 +22,9 @@ const requireNativeComponent = require('requireNativeComponent');

 const RCTScrollView = requireNativeComponent('RCTScrollView');

-class ScrollViewMock extends React.Component<$FlowFixMeProps> {
+const ScrollViewComponent = jest.genMockFromModule('ScrollView');
+
+class ScrollViewMock extends ScrollViewComponent {
  render() {
    return (
      <RCTScrollView {...this.props}>
@@ -35,7 +35,7 @@ type Event = Object;
 * #### Programmatically changing selected index
 *
 * The selected index can be changed on the fly by assigning the
- * selectIndex prop to a state variable, then changing that variable.
+ * selectedIndex prop to a state variable, then changing that variable.
 * Note that the state variable would need to be updated as the user
 * selects a value and changes the index, as shown in the example below.
 *
@@ -49,7 +49,6 @@ type Event = Object;
 * />
 * ````
 */
-// $FlowFixMe(>=0.41.0)
 var SegmentedControlIOS = createReactClass({
  displayName: 'SegmentedControlIOS',
  mixins: [NativeMethodsMixin],
@@ -28,8 +28,64 @@ type Event = Object;

 /**
 * A component used to select a single value from a range of values.
+ *
+ * ### Usage
+ *
+ * The example below shows how to use `Slider` to change
+ * a value used by `Text`. The value is stored using
+ * the state of the root component (`App`). The same component
+ * subscribes to the `onValueChange`  of `Slider` and changes
+ * the value using `setState`.
+ *
+ *```
+ * import React from 'react';
+ * import { StyleSheet, Text, View, Slider } from 'react-native';
+ *
+ * export default class App extends React.Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       value: 50
+ *     }
+ *   }
+ *
+ *   change(value) {
+ *     this.setState(() => {
+ *       return {
+ *         value: parseFloat(value)
+ *       };
+ *     });
+ *   }
+ *
+ *   render() {
+ *     const {value} = this.state;
+ *     return (
+ *       <View style={styles.container}>
+ *         <Text style={styles.text}>{String(value)}</Text>
+ *         <Slider
+ *           step={1}
+ *           maximumValue={100}
+ *           onValueChange={this.change.bind(this)}
+ *           value={value} />
+ *       </View>
+ *     );
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     flexDirection: 'column',
+ *     justifyContent: 'center'
+ *   },
+ *   text: {
+ *     fontSize: 50,
+ *     textAlign: 'center'
+ *   }
+ * });
+ *```
+ *
 */
-// $FlowFixMe(>=0.41.0)
 var Slider = createReactClass({
  displayName: 'Slider',
  mixins: [NativeMethodsMixin],
@@ -159,8 +215,14 @@ var Slider = createReactClass({

  render: function() {
    const {style, onValueChange, onSlidingComplete, ...props} = this.props;
+    /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error found when Flow v0.54 was deployed. To see the error
+     * delete this comment and run Flow. */
    props.style = [styles.slider, style];

+    /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error found when Flow v0.54 was deployed. To see the error
+     * delete this comment and run Flow. */
    props.onValueChange = onValueChange && ((event: Event) => {
      let userEvent = true;
      if (Platform.OS === 'android') {
@@ -171,8 +233,14 @@ var Slider = createReactClass({
      onValueChange && userEvent && onValueChange(event.nativeEvent.value);
    });

+    /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error found when Flow v0.54 was deployed. To see the error
+     * delete this comment and run Flow. */
    props.onChange = props.onValueChange;

+    /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error found when Flow v0.54 was deployed. To see the error
+     * delete this comment and run Flow. */
    props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
      onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
    });
@@ -324,7 +324,6 @@ class StatusBar extends React.Component<{
  componentWillUnmount() {
    // When a StatusBar is unmounted, remove itself from the stack and update
    // the native bar with the next props.
-    // $FlowFixMe found when converting React.createClass to ES6
    const index = StatusBar._propsStack.indexOf(this._stackEntry);
    StatusBar._propsStack.splice(index, 1);

@@ -332,7 +331,6 @@ class StatusBar extends React.Component<{
  }

  componentDidUpdate() {
-    // $FlowFixMe found when converting React.createClass to ES6
    const index = StatusBar._propsStack.indexOf(this._stackEntry);
    this._stackEntry = createStackEntry(this.props);
    StatusBar._propsStack[index] = this._stackEntry;
@@ -38,7 +38,6 @@ type DefaultProps = {
 * @keyword checkbox
 * @keyword toggle
 */
-// $FlowFixMe(>=0.41.0)
 var Switch = createReactClass({
  displayName: 'Switch',
  propTypes: {
@@ -20,19 +20,22 @@ const ViewPropTypes = require('ViewPropTypes');

 var requireNativeComponent = require('requireNativeComponent');

-class TabBarIOS extends React.Component<{
-  style?: $FlowFixMe,
-  unselectedTintColor?: $FlowFixMe,
-  tintColor?: $FlowFixMe,
-  unselectedItemTintColor?: $FlowFixMe,
-  barTintColor?: $FlowFixMe,
+import type {StyleObj} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+class TabBarIOS extends React.Component<ViewProps & {
+  style?: StyleObj,
+  unselectedTintColor?: string,
+  tintColor?: string,
+  unselectedItemTintColor?: string,
+  barTintColor?: string,
  barStyle?: 'default' | 'black',
  translucent?: boolean,
  itemPositioning?: 'fill' | 'center' | 'auto',
+  children: React.Node,
 }> {
  static Item = TabBarItemIOS;

-  // $FlowFixMe(>=0.41.0)
  static propTypes = {
    ...ViewPropTypes,
    style: ViewPropTypes.style,
@@ -85,9 +88,7 @@ class TabBarIOS extends React.Component<{
        barStyle={this.props.barStyle}
        itemPositioning={this.props.itemPositioning}
        translucent={this.props.translucent !== false}>
-        {
-          // $FlowFixMe found when converting React.createClass to ES6
-          this.props.children}
+        {this.props.children}
      </RCTTabBar>
    );
  }
@@ -23,14 +23,23 @@ const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TextInputState = require('TextInputState');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const TimerMixin = require('react-timer-mixin');
 const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 const UIManager = require('UIManager');
 const ViewPropTypes = require('ViewPropTypes');

+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const emptyFunction = require('fbjs/lib/emptyFunction');
 const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const warning = require('fbjs/lib/warning');

 const onlyMultiline = {
@@ -41,8 +50,8 @@ const onlyMultiline = {
 if (Platform.OS === 'android') {
  var AndroidTextInput = requireNativeComponent('AndroidTextInput', null);
 } else if (Platform.OS === 'ios') {
-  var RCTTextView = requireNativeComponent('RCTTextView', null);
-  var RCTTextField = requireNativeComponent('RCTTextField', null);
+  var RCTMultilineTextInputView = requireNativeComponent('RCTMultilineTextInputView', null);
+  var RCTSinglelineTextInputView = requireNativeComponent('RCTSinglelineTextInputView', null);
 }

 type Event = Object;
@@ -172,7 +181,6 @@ const DataDetectorTypes = [
 *
 */

-// $FlowFixMe(>=0.41.0)
 const TextInput = createReactClass({
  displayName: 'TextInput',
  statics: {
@@ -212,12 +220,10 @@ const TextInput = createReactClass({
     */
    autoFocus: PropTypes.bool,
    /**
-     * If true, will increase the height of the textbox if need be. If false,
-     * the textbox will become scrollable once the height is reached. The
-     * default value is false.
-     * @platform android
+     * Specifies whether fonts should scale to respect Text Size accessibility settings. The
+     * default is `true`.
     */
-    autoGrow: PropTypes.bool,
+    allowFontScaling: PropTypes.bool,
    /**
     * If `false`, text is not editable. The default value is `true`.
     */
@@ -231,6 +237,25 @@ const TextInput = createReactClass({
     * - `numeric`
     * - `email-address`
     * - `phone-pad`
+     *
+     * *iOS Only*
+     *
+     * The following values work on iOS only:
+     *
+     * - `ascii-capable`
+     * - `numbers-and-punctuation`
+     * - `url`
+     * - `number-pad`
+     * - `name-phone-pad`
+     * - `decimal-pad`
+     * - `twitter`
+     * - `web-search`
+     *
+     * *Android Only*
+     *
+     * The following values work on Android only:
+     *
+     * - `visible-password`
     */
    keyboardType: PropTypes.oneOf([
      // Cross-platform
@@ -247,6 +272,8 @@ const TextInput = createReactClass({
      'decimal-pad',
      'twitter',
      'web-search',
+      // Android-only
+      'visible-password',
    ]),
    /**
     * Determines the color of the keyboard.
@@ -317,11 +344,6 @@ const TextInput = createReactClass({
     * instead of implementing the logic in JS to avoid flicker.
     */
    maxLength: PropTypes.number,
-    /**
-     * If autogrow is `true`, limits the height that the TextInput box can grow
-     * to. Once it reaches this height, the TextInput becomes scrollable.
-     */
-    maxHeight: PropTypes.number,
    /**
     * Sets the number of lines for a `TextInput`. Use it with multiline set to
     * `true` to be able to fill the lines.
@@ -400,7 +422,6 @@ const TextInput = createReactClass({
     * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
     * the typed-in character otherwise including `' '` for space.
     * Fires before `onChange` callbacks.
-     * @platform ios
     */
    onKeyPress: PropTypes.func,
    /**
@@ -416,14 +437,14 @@ const TextInput = createReactClass({
    /**
     * The string that will be rendered before text input has been entered.
     */
-    placeholder: PropTypes.node,
+    placeholder: PropTypes.string,
    /**
     * The text color of the placeholder string.
     */
    placeholderTextColor: ColorPropType,
    /**
     * If `true`, the text input obscures the text entered so that sensitive text
-     * like passwords stay secure. The default value is `false`.
+     * like passwords stay secure. The default value is `false`. Does not work with 'multiline={true}'.
     */
    secureTextEntry: PropTypes.bool,
    /**
@@ -498,7 +519,17 @@ const TextInput = createReactClass({
     */
    blurOnSubmit: PropTypes.bool,
    /**
-     * Note that not all Text styles are supported,
+     * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+     *
+     * - `borderLeftWidth`
+     * - `borderTopWidth`
+     * - `borderRightWidth`
+     * - `borderBottomWidth`
+     * - `borderTopLeftRadius`
+     * - `borderTopRightRadius`
+     * - `borderBottomRightRadius`
+     * - `borderBottomLeftRadius`
+     *
     * see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
     * for more detail.
     *
@@ -557,17 +588,17 @@ const TextInput = createReactClass({
     */
    caretHidden: PropTypes.bool,
  },
-
+  getDefaultProps(): Object {
+    return {
+      allowFontScaling: true,
+    };
+  },
  /**
   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
   * make `this` look like an actual native component class.
   */
  mixins: [NativeMethodsMixin, TimerMixin],

-  getInitialState: function() {
-    return {layoutHeight: this._layoutHeight};
-  },
-
  /**
   * Returns `true` if the input is currently focused; `false` otherwise.
   */
@@ -585,7 +616,6 @@ const TextInput = createReactClass({
  _focusSubscription: (undefined: ?Function),
  _lastNativeText: (undefined: ?string),
  _lastNativeSelection: (undefined: ?Selection),
-  _layoutHeight: (-1: number),

  componentDidMount: function() {
    this._lastNativeText = this.props.value;
@@ -676,7 +706,7 @@ const TextInput = createReactClass({
        }
      }
      textContainer =
-        <RCTTextField
+        <RCTSinglelineTextInputView
          ref={this._setNativeRef}
          {...props}
          onFocus={this._onFocus}
@@ -695,14 +725,14 @@ const TextInput = createReactClass({
        'Cannot specify both value and children.'
      );
      if (childCount >= 1) {
-        children = <Text style={props.style}>{children}</Text>;
+        children = <Text style={props.style} allowFontScaling={props.allowFontScaling}>{children}</Text>;
      }
      if (props.inputView) {
        children = [children, props.inputView];
      }
      props.style.unshift(styles.multilineInput);
      textContainer =
-        <RCTTextView
+        <RCTMultilineTextInputView
          ref={this._setNativeRef}
          {...props}
          children={children}
@@ -718,6 +748,7 @@ const TextInput = createReactClass({
          onScroll={this._onScroll}
        />;
    }
+
    return (
      <TouchableWithoutFeedback
        onLayout={props.onLayout}
@@ -735,12 +766,11 @@ const TextInput = createReactClass({

  _renderAndroid: function() {
    const props = Object.assign({}, this.props);
-    props.style = this.props.style;
-    if (this.state.layoutHeight >= 0) {
-      props.style = [props.style, {height: this.state.layoutHeight}];
-    }
+    props.style = [this.props.style];
    props.autoCapitalize =
-      UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize];
+      UIManager.AndroidTextInput.Constants.AutoCapitalizationType[
+        props.autoCapitalize || 'sentences'
+      ];
    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
     * suppresses an error when upgrading Flow's support for React. To see the
     * error delete this comment and run Flow. */
@@ -754,9 +784,11 @@ const TextInput = createReactClass({
    if (childCount > 1) {
      children = <Text>{children}</Text>;
    }
+
    if (props.selection && props.selection.end == null) {
      props.selection = {start: props.selection.start, end: props.selection.start};
    }
+
    const textContainer =
      <AndroidTextInput
        ref={this._setNativeRef}
@@ -765,7 +797,6 @@ const TextInput = createReactClass({
        onFocus={this._onFocus}
        onBlur={this._onBlur}
        onChange={this._onChange}
-        onContentSizeChange={this._onContentSizeChange}
        onSelectionChange={this._onSelectionChange}
        onTextInput={this._onTextInput}
        text={this._getText()}
@@ -828,26 +859,6 @@ const TextInput = createReactClass({
    this.forceUpdate();
  },

-  _onContentSizeChange: function(event: Event) {
-    let contentHeight = event.nativeEvent.contentSize.height;
-    if (this.props.autoGrow) {
-      if (this.props.maxHeight) {
-        contentHeight = Math.min(this.props.maxHeight, contentHeight);
-      }
-      this.setState({layoutHeight: Math.max(this._layoutHeight, contentHeight)});
-    }
-
-    this.props.onContentSizeChange && this.props.onContentSizeChange(event);
-  },
-
-  _onLayout: function(event: Event) {
-    const height = event.nativeEvent.layout.height;
-    if (height) {
-      this._layoutHeight = event.nativeEvent.layout.height;
-    }
-    this.props.onLayout && this.props.onLayout(event);
-  },
-
  _onSelectionChange: function(event: Event) {
    this.props.onSelectionChange && this.props.onSelectionChange(event);

@@ -904,9 +915,6 @@ const TextInput = createReactClass({
  },

  _onTextInput: function(event: Event) {
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    this.props.onTextInput && this.props.onTextInput(event);
  },

@@ -917,8 +925,8 @@ const TextInput = createReactClass({

 var styles = StyleSheet.create({
  multilineInput: {
-    // This default top inset makes RCTTextView seem as close as possible
-    // to single-line RCTTextField defaults, using the system defaults
+    // This default top inset makes RCTMultilineTextInputView seem as close as possible
+    // to single-line RCTSinglelineTextInputView defaults, using the system defaults
    // of font size 17 and a height of 31 points.
    paddingTop: 5,
  },
@@ -44,6 +44,10 @@ class TimePickerAndroid {
   *   * `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`,
   *     the picker shows an AM/PM chooser. If undefined, the default for the current locale
   *     is used.
+   *   * `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode
+   *     - 'clock': Show a time picker in clock mode.
+   *     - 'spinner': Show a time picker in spinner mode.
+   *     - 'default': Show a default time picker based on Android versions.
   *
   * Returns a Promise which will be invoked an object containing `action`, `hour` (0-23),
   * `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
@@ -24,7 +24,7 @@ var RCTToastAndroid = require('NativeModules').ToastAndroid;
 * There is also a function `showWithGravity` to specify the layout gravity. May be
 * ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.
 *
- * The 'showWithGravityWithOffset' function adds on the ability to specify offset
+ * The 'showWithGravityAndOffset' function adds on the ability to specify offset
 * These offset values will translate to pixels.
 *
 * Basic usage:
@@ -1,10 +1,8 @@
 /**
- * Copyright 2013-present, Facebook, Inc.
- * All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
 *
- * 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.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
 *
 * @providesModule PooledClass
 * @flow
@@ -8,6 +8,7 @@
 *
 * @providesModule TouchableBounce
 * @flow
+ * @format
 */
 'use strict';

@@ -35,7 +36,6 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 * `TouchableMixin` expects us to implement some abstract methods to handle
 * interesting interactions such as `handleTouchablePress`.
 */
-// $FlowFixMe(>=0.41.0)
 var TouchableBounce = createReactClass({
  displayName: 'TouchableBounce',
  mixins: [Touchable.Mixin, NativeMethodsMixin],
@@ -73,6 +73,12 @@ var TouchableBounce = createReactClass({
     * views.
     */
    hitSlop: EdgeInsetsPropType,
+    releaseVelocity: PropTypes.number.isRequired,
+    releaseBounciness: PropTypes.number.isRequired,
+  },
+
+  getDefaultProps: function() {
+    return {releaseBounciness: 10, releaseVelocity: 10};
  },

  getInitialState: function(): State {
@@ -86,7 +92,7 @@ var TouchableBounce = createReactClass({
    value: number,
    velocity: number,
    bounciness: number,
-    callback?: ?Function
+    callback?: ?Function,
  ) {
    Animated.spring(this.state.scale, {
      toValue: value,
@@ -115,12 +121,22 @@ var TouchableBounce = createReactClass({
    if (onPressWithCompletion) {
      onPressWithCompletion(() => {
        this.state.scale.setValue(0.93);
-        this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete);
+        this.bounceTo(
+          1,
+          this.props.releaseVelocity,
+          this.props.releaseBounciness,
+          this.props.onPressAnimationComplete,
+        );
      });
      return;
    }

-    this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete);
+    this.bounceTo(
+      1,
+      this.props.releaseVelocity,
+      this.props.releaseBounciness,
+      this.props.onPressAnimationComplete,
+    );
    this.props.onPress && this.props.onPress(e);
  },

@@ -166,18 +182,24 @@ var TouchableBounce = createReactClass({
        testID={this.props.testID}
        hitSlop={this.props.hitSlop}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
-        onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
+        onResponderTerminationRequest={
+          this.touchableHandleResponderTerminationRequest
+        }
        onResponderGrant={this.touchableHandleResponderGrant}
        onResponderMove={this.touchableHandleResponderMove}
        onResponderRelease={this.touchableHandleResponderRelease}
        onResponderTerminate={this.touchableHandleResponderTerminate}>
        {
          // $FlowFixMe(>=0.41.0)
-          this.props.children}
-        {Touchable.renderDebugView({color: 'orange', hitSlop: this.props.hitSlop})}
+          this.props.children
+        }
+        {Touchable.renderDebugView({
+          color: 'orange',
+          hitSlop: this.props.hitSlop,
+        })}
      </Animated.View>
    );
-  }
+  },
 });

 module.exports = TouchableBounce;
@@ -8,6 +8,7 @@
 *
 * @providesModule TouchableHighlight
 * @flow
+ * @format
 */
 'use strict';

@@ -17,22 +18,19 @@ const PropTypes = require('prop-types');
 const React = require('React');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheet = require('StyleSheet');
-const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');
 const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');

 const createReactClass = require('create-react-class');
-const ensureComponentIsNative = require('ensureComponentIsNative');
 const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
-const keyOf = require('fbjs/lib/keyOf');
-const merge = require('merge');

-import type {Event} from 'TouchableWithoutFeedback';
+import type {PressEvent} from 'CoreEventTypes';

 const DEFAULT_PROPS = {
  activeOpacity: 0.85,
+  delayPressOut: 100,
  underlayColor: 'black',
 };

@@ -65,9 +63,77 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 *   );
 * },
 * ```
+ *
+ *
+ * ### Example
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react'
+ * import {
+ *   AppRegistry,
+ *   StyleSheet,
+ *   TouchableHighlight,
+ *   Text,
+ *   View,
+ * } from 'react-native'
+ *
+ * class App extends Component {
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = { count: 0 }
+ *   }
+ *
+ *   onPress = () => {
+ *     this.setState({
+ *       count: this.state.count+1
+ *     })
+ *   }
+ *
+ *  render() {
+ *     return (
+ *       <View style={styles.container}>
+ *         <TouchableHighlight
+ *          style={styles.button}
+ *          onPress={this.onPress}
+ *         >
+ *          <Text> Touch Here </Text>
+ *         </TouchableHighlight>
+ *         <View style={[styles.countContainer]}>
+ *           <Text style={[styles.countText]}>
+ *             { this.state.count !== 0 ? this.state.count: null}
+ *           </Text>
+ *         </View>
+ *       </View>
+ *     )
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     justifyContent: 'center',
+ *     paddingHorizontal: 10
+ *   },
+ *   button: {
+ *     alignItems: 'center',
+ *     backgroundColor: '#DDDDDD',
+ *     padding: 10
+ *   },
+ *   countContainer: {
+ *     alignItems: 'center',
+ *     padding: 10
+ *   },
+ *   countText: {
+ *     color: '#FF00FF'
+ *   }
+ * })
+ *
+ * AppRegistry.registerComponent('App', () => App)
+ * ```
+ *
 */

-var TouchableHighlight = createReactClass({
+const TouchableHighlight = createReactClass({
  displayName: 'TouchableHighlight',
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,
@@ -81,6 +147,10 @@ var TouchableHighlight = createReactClass({
     * active.
     */
    underlayColor: ColorPropType,
+    /**
+     * Style to apply to the container/underlay. Most commonly used to make sure
+     * rounded corners match the wrapped component.
+     */
    style: ViewPropTypes.style,
    /**
     * Called immediately after the underlay is shown
@@ -110,108 +180,67 @@ var TouchableHighlight = createReactClass({
    tvParallaxProperties: PropTypes.object,
  },

-  mixins: [NativeMethodsMixin, TimerMixin, Touchable.Mixin],
+  mixins: [NativeMethodsMixin, Touchable.Mixin],

  getDefaultProps: () => DEFAULT_PROPS,

-  // Performance optimization to avoid constantly re-generating these objects.
-  _computeSyntheticState: function(props) {
+  getInitialState: function() {
+    this._isMounted = false;
    return {
-      activeProps: {
-        style: {
-          opacity: props.activeOpacity,
-        }
-      },
-      activeUnderlayProps: {
-        style: {
-          backgroundColor: props.underlayColor,
-        }
-      },
-      underlayStyle: [
-        INACTIVE_UNDERLAY_PROPS.style,
-        props.style,
-      ],
-      hasTVPreferredFocus: props.hasTVPreferredFocus
+      ...this.touchableGetInitialState(),
+      extraChildStyle: null,
+      extraUnderlayStyle: null,
    };
  },

-  getInitialState: function() {
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
-    this._isMounted = false;
-    return merge(
-      this.touchableGetInitialState(), this._computeSyntheticState(this.props)
-    );
-  },
-
  componentDidMount: function() {
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    this._isMounted = true;
    ensurePositiveDelayProps(this.props);
-    ensureComponentIsNative(this.refs[CHILD_REF]);
  },

  componentWillUnmount: function() {
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
    this._isMounted = false;
-  },
-
-  componentDidUpdate: function() {
-    ensureComponentIsNative(this.refs[CHILD_REF]);
+    clearTimeout(this._hideTimeout);
  },

  componentWillReceiveProps: function(nextProps) {
    ensurePositiveDelayProps(nextProps);
-    if (nextProps.activeOpacity !== this.props.activeOpacity ||
-        nextProps.underlayColor !== this.props.underlayColor ||
-        nextProps.style !== this.props.style) {
-      this.setState(this._computeSyntheticState(nextProps));
-    }
  },

  viewConfig: {
    uiViewClassName: 'RCTView',
-    validAttributes: ReactNativeViewAttributes.RCTView
+    validAttributes: ReactNativeViewAttributes.RCTView,
  },

  /**
   * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
   * defined on your component.
   */
-  touchableHandleActivePressIn: function(e: Event) {
-    this.clearTimeout(this._hideTimeout);
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
+  touchableHandleActivePressIn: function(e: PressEvent) {
+    clearTimeout(this._hideTimeout);
    this._hideTimeout = null;
    this._showUnderlay();
    this.props.onPressIn && this.props.onPressIn(e);
  },

-  touchableHandleActivePressOut: function(e: Event) {
+  touchableHandleActivePressOut: function(e: PressEvent) {
    if (!this._hideTimeout) {
      this._hideUnderlay();
    }
    this.props.onPressOut && this.props.onPressOut(e);
  },

-  touchableHandlePress: function(e: Event) {
-    this.clearTimeout(this._hideTimeout);
+  touchableHandlePress: function(e: PressEvent) {
+    clearTimeout(this._hideTimeout);
    this._showUnderlay();
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
-    this._hideTimeout = this.setTimeout(this._hideUnderlay,
-      this.props.delayPressOut || 100);
+    this._hideTimeout = setTimeout(
+      this._hideUnderlay,
+      this.props.delayPressOut,
+    );
    this.props.onPress && this.props.onPress(e);
  },

-  touchableHandleLongPress: function(e: Event) {
+  touchableHandleLongPress: function(e: PressEvent) {
    this.props.onLongPress && this.props.onLongPress(e);
  },

@@ -239,23 +268,24 @@ var TouchableHighlight = createReactClass({
    if (!this._isMounted || !this._hasPressHandler()) {
      return;
    }
-
-    this.refs[UNDERLAY_REF].setNativeProps(this.state.activeUnderlayProps);
-    this.refs[CHILD_REF].setNativeProps(this.state.activeProps);
+    this.setState({
+      extraChildStyle: {
+        opacity: this.props.activeOpacity,
+      },
+      extraUnderlayStyle: {
+        backgroundColor: this.props.underlayColor,
+      },
+    });
    this.props.onShowUnderlay && this.props.onShowUnderlay();
  },

  _hideUnderlay: function() {
-    this.clearTimeout(this._hideTimeout);
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
+    clearTimeout(this._hideTimeout);
    this._hideTimeout = null;
-    if (this._hasPressHandler() && this.refs[UNDERLAY_REF]) {
-      this.refs[CHILD_REF].setNativeProps(INACTIVE_CHILD_PROPS);
-      this.refs[UNDERLAY_REF].setNativeProps({
-        ...INACTIVE_UNDERLAY_PROPS,
-        style: this.state.underlayStyle,
+    if (this._hasPressHandler()) {
+      this.setState({
+        extraChildStyle: null,
+        extraUnderlayStyle: null,
      });
      this.props.onHideUnderlay && this.props.onHideUnderlay();
    }
@@ -271,58 +301,45 @@ var TouchableHighlight = createReactClass({
  },

  render: function() {
+    const child = React.Children.only(this.props.children);
    return (
      <View
        accessible={this.props.accessible !== false}
-        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-         * comment suppresses an error when upgrading Flow's support for React.
-         * To see the error delete this comment and run Flow. */
        accessibilityLabel={this.props.accessibilityLabel}
        accessibilityComponentType={this.props.accessibilityComponentType}
        accessibilityTraits={this.props.accessibilityTraits}
-        ref={UNDERLAY_REF}
-        style={this.state.underlayStyle}
+        style={StyleSheet.compose(
+          this.props.style,
+          this.state.extraUnderlayStyle,
+        )}
        onLayout={this.props.onLayout}
        hitSlop={this.props.hitSlop}
        isTVSelectable={true}
        tvParallaxProperties={this.props.tvParallaxProperties}
-        hasTVPreferredFocus={this.state.hasTVPreferredFocus}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
-        onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
+        onResponderTerminationRequest={
+          this.touchableHandleResponderTerminationRequest
+        }
        onResponderGrant={this.touchableHandleResponderGrant}
        onResponderMove={this.touchableHandleResponderMove}
        onResponderRelease={this.touchableHandleResponderRelease}
        onResponderTerminate={this.touchableHandleResponderTerminate}
-        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-         * comment suppresses an error when upgrading Flow's support for React.
-         * To see the error delete this comment and run Flow. */
        nativeID={this.props.nativeID}
-        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-         * comment suppresses an error when upgrading Flow's support for React.
-         * To see the error delete this comment and run Flow. */
        testID={this.props.testID}>
-        {React.cloneElement(
-          /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error when upgrading Flow's support for
-           * React. To see the error delete this comment and run Flow. */
-          React.Children.only(this.props.children),
-          {
-            ref: CHILD_REF,
-          }
-        )}
-        {Touchable.renderDebugView({color: 'green', hitSlop: this.props.hitSlop})}
+        {React.cloneElement(child, {
+          style: StyleSheet.compose(
+            child.props.style,
+            this.state.extraChildStyle,
+          ),
+        })}
+        {Touchable.renderDebugView({
+          color: 'green',
+          hitSlop: this.props.hitSlop,
+        })}
      </View>
    );
-  }
+  },
 });

-var CHILD_REF = keyOf({childRef: null});
-var UNDERLAY_REF = keyOf({underlayRef: null});
-var INACTIVE_CHILD_PROPS = {
-  style: StyleSheet.create({x: {opacity: 1.0}}).x,
-};
-var INACTIVE_UNDERLAY_PROPS = {
-  style: StyleSheet.create({x: {backgroundColor: 'transparent'}}).x,
-};
-
 module.exports = TouchableHighlight;
@@ -51,6 +51,72 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 *   );
 * },
 * ```
+ * ### Example
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react'
+ * import {
+ *   AppRegistry,
+ *   StyleSheet,
+ *   TouchableOpacity,
+ *   Text,
+ *   View,
+ * } from 'react-native'
+ *
+ * class App extends Component {
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = { count: 0 }
+ *   }
+ *
+ *   onPress = () => {
+ *     this.setState({
+ *       count: this.state.count+1
+ *     })
+ *   }
+ *
+ *  render() {
+ *    return (
+ *      <View style={styles.container}>
+ *        <TouchableOpacity
+ *          style={styles.button}
+ *          onPress={this.onPress}
+ *        >
+ *          <Text> Touch Here </Text>
+ *        </TouchableOpacity>
+ *        <View style={[styles.countContainer]}>
+ *          <Text style={[styles.countText]}>
+ *             { this.state.count !== 0 ? this.state.count: null}
+ *           </Text>
+ *         </View>
+ *       </View>
+ *     )
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     justifyContent: 'center',
+ *     paddingHorizontal: 10
+ *   },
+ *   button: {
+ *     alignItems: 'center',
+ *     backgroundColor: '#DDDDDD',
+ *     padding: 10
+ *   },
+ *   countContainer: {
+ *     alignItems: 'center',
+ *     padding: 10
+ *   },
+ *   countText: {
+ *     color: '#FF00FF'
+ *   }
+ * })
+ *
+ * AppRegistry.registerComponent('App', () => App)
+ * ```
+ *
 */
 var TouchableOpacity = createReactClass({
  displayName: 'TouchableOpacity',
@@ -63,6 +129,12 @@ var TouchableOpacity = createReactClass({
     * active. Defaults to 0.2.
     */
    activeOpacity: PropTypes.number,
+    /**
+     * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+     *
+     * @platform ios
+     */
+    hasTVPreferredFocus: PropTypes.bool,
    /**
     * Apple TV parallax effects
     */
@@ -180,6 +252,7 @@ var TouchableOpacity = createReactClass({
        testID={this.props.testID}
        onLayout={this.props.onLayout}
        isTVSelectable={true}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
        tvParallaxProperties={this.props.tvParallaxProperties}
        hitSlop={this.props.hitSlop}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
@@ -14,11 +14,17 @@
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const React = require('React');
 const PropTypes = require('prop-types');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');

 const createReactClass = require('create-react-class');
 const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 const warning = require('fbjs/lib/warning');

 const {
@@ -26,7 +32,7 @@ const {
  AccessibilityTraits,
 } = require('ViewAccessibility');

-export type Event = Object;
+import type {PressEvent} from 'CoreEventTypes';

 const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};

@@ -96,7 +102,6 @@ const TouchableWithoutFeedback = createReactClass({
     * reactivated! Move it back and forth several times while the scroll view
     * is disabled. Ensure you pass in a constant to reduce memory allocations.
     */
-    // $FlowFixMe: Expected a React PropType instead
    pressRetentionOffset: EdgeInsetsPropType,
    /**
     * This defines how far your touch can start away from the button. This is
@@ -106,7 +111,6 @@ const TouchableWithoutFeedback = createReactClass({
     * of sibling views always takes precedence if a touch hits two overlapping
     * views.
     */
-    // $FlowFixMe: Expected a React PropType instead
    hitSlop: EdgeInsetsPropType,
  },

@@ -126,19 +130,19 @@ const TouchableWithoutFeedback = createReactClass({
   * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
   * defined on your component.
   */
-  touchableHandlePress: function(e: Event) {
+  touchableHandlePress: function(e: PressEvent) {
    this.props.onPress && this.props.onPress(e);
  },

-  touchableHandleActivePressIn: function(e: Event) {
+  touchableHandleActivePressIn: function(e: PressEvent) {
    this.props.onPressIn && this.props.onPressIn(e);
  },

-  touchableHandleActivePressOut: function(e: Event) {
+  touchableHandleActivePressOut: function(e: PressEvent) {
    this.props.onPressOut && this.props.onPressOut(e);
  },

-  touchableHandleLongPress: function(e: Event) {
+  touchableHandleLongPress: function(e: PressEvent) {
    this.props.onLongPress && this.props.onLongPress(e);
  },

@@ -182,13 +186,10 @@ const TouchableWithoutFeedback = createReactClass({
      child.props.style;
    return (React: any).cloneElement(child, {
      accessible: this.props.accessible !== false,
-      // $FlowFixMe(>=0.41.0)
      accessibilityLabel: this.props.accessibilityLabel,
      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,
@@ -5,6 +5,8 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -17,22 +17,15 @@ exports[`TouchableHighlight renders correctly 1`] = `
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {},
-    ]
-  }
+  style={Object {}}
  testID={undefined}
  tvParallaxProperties={undefined}
 >
  <Text
    accessible={true}
    allowFontScaling={true}
-    disabled={false}
    ellipsizeMode="tail"
+    style={null}
  >
    Touchable
  </Text>
@@ -16,6 +16,9 @@ var ImageStylePropTypes = require('ImageStylePropTypes');
 var TextStylePropTypes = require('TextStylePropTypes');
 var ViewStylePropTypes = require('ViewStylePropTypes');

+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
 var keyMirror = require('fbjs/lib/keyMirror');
 var processColor = require('processColor');
 var processTransform = require('processTransform');
@@ -37,6 +40,8 @@ ReactNativeStyleAttributes.borderColor = colorAttributes;
 ReactNativeStyleAttributes.borderLeftColor = colorAttributes;
 ReactNativeStyleAttributes.borderRightColor = colorAttributes;
 ReactNativeStyleAttributes.borderTopColor = colorAttributes;
+ReactNativeStyleAttributes.borderStartColor = colorAttributes;
+ReactNativeStyleAttributes.borderEndColor = colorAttributes;
 ReactNativeStyleAttributes.color = colorAttributes;
 ReactNativeStyleAttributes.shadowColor = colorAttributes;
 ReactNativeStyleAttributes.textDecorationColor = colorAttributes;
@@ -18,6 +18,7 @@ var ReactNativeViewAttributes = {};
 ReactNativeViewAttributes.UIView = {
  pointerEvents: true,
  accessible: true,
+  accessibilityActions: true,
  accessibilityLabel: true,
  accessibilityComponentType: true,
  accessibilityLiveRegion: true,
@@ -28,6 +29,7 @@ ReactNativeViewAttributes.UIView = {
  renderToHardwareTextureAndroid: true,
  shouldRasterizeIOS: true,
  onLayout: true,
+  onAccessibilityAction: true,
  onAccessibilityTap: true,
  onMagicTap: true,
  collapsable: true,
@@ -28,52 +28,10 @@ import type {ViewProps} from 'ViewPropTypes';
 export type Props = ViewProps;

 /**
- * The most fundamental component for building a UI, `View` is a container that supports layout with
- * [flexbox](docs/flexbox.html), [style](docs/style.html),
- * [some touch handling](docs/handling-touches.html), and
- * [accessibility](docs/accessibility.html) controls. `View` maps directly to the
- * native view equivalent on whatever platform React Native is running on, whether that is a
- * `UIView`, `<div>`, `android.view`, etc.
+ * The most fundamental component for building a UI.
 *
- * `View` is designed to be nested inside other views and can have 0 to many children of any type.
- *
- * This example creates a `View` that wraps two colored boxes and a text component in a row with
- * padding.
- *
- * ```javascript
- * class ViewColoredBoxesWithText extends Component {
- *   render() {
- *     return (
- *       <View style={{flexDirection: 'row', height: 100, padding: 20}}>
- *         <View style={{backgroundColor: 'blue', flex: 0.3}} />
- *         <View style={{backgroundColor: 'red', flex: 0.5}} />
- *         <Text>Hello World!</Text>
- *       </View>
- *     );
- *   }
- * }
- * ```
- *
- * > `View`s are designed to be used with [`StyleSheet`](docs/style.html) for clarity
- * > and performance, although inline styles are also supported.
- *
- * ### Synthetic Touch Events
- *
- * For `View` responder props (e.g., `onResponderMove`), the synthetic touch event passed to them
- * are of the following form:
- *
- * - `nativeEvent`
- *   - `changedTouches` - Array of all touch events that have changed since the last event.
- *   - `identifier` - The ID of the touch.
- *   - `locationX` - The X position of the touch, relative to the element.
- *   - `locationY` - The Y position of the touch, relative to the element.
- *   - `pageX` - The X position of the touch, relative to the root element.
- *   - `pageY` - The Y position of the touch, relative to the root element.
- *   - `target` - The node id of the element receiving the touch event.
- *   - `timestamp` - A time identifier for the touch, useful for velocity calculation.
- *   - `touches` - Array of all current touches on the screen.
+ * See http://facebook.github.io/react-native/docs/view.html
 */
-// $FlowFixMe(>=0.41.0)
 const View = createReactClass({
  displayName: 'View',
  // TODO: We should probably expose the mixins, viewConfig, and statics publicly. For example,
@@ -0,0 +1,30 @@
+/**
+ * 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 View
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const {NativeComponent} = require('ReactNative');
+
+import type {ViewProps} from 'ViewPropTypes';
+
+export type Props = ViewProps;
+
+/**
+ * Host components in React 16 are represented by strings (eg "div", "View").
+ * This is inconvenient for users who want to type a ref (eg `ref: View`).
+ * The following type isn't sound but it enables consistent Flow types
+ * for various default React Native components, so it seems a good tradeoff.
+ */
+declare class View extends NativeComponent<void, ViewProps> {}
+
+module.exports = View;
@@ -44,16 +44,18 @@ export type ViewLayoutEvent = {
  }
 }

-// There's no easy way to create a different type if(Platform.isTVOS):
+// There's no easy way to create a different type if (Platform.isTVOS):
 // so we must include TVViewProps
 export type ViewProps = {
  accessible?: bool,
  accessibilityLabel?: React$PropType$Primitive<any>,
+  accessibilityActions?: Array<string>,
  accessibilityComponentType?: AccessibilityComponentType,
  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
  importantForAccessibility?: 'auto'| 'yes'| 'no'| 'no-hide-descendants',
  accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
  accessibilityViewIsModal?: bool,
+  onAccessibilityAction?: Function,
  onAccessibilityTap?: Function,
  onMagicTap?: Function,
  testID?: string,
@@ -83,46 +85,46 @@ module.exports = {
  ...PlatformViewPropTypes,

  /**
-   * When `true`, indicates that the view is an accessibility element. By default,
-   * all the touchable elements are accessible.
+   * When `true`, indicates that the view is an accessibility element. 
+   * By default, all the touchable elements are accessible.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessible
   */
  accessible: PropTypes.bool,

  /**
   * Overrides the text that's read by the screen reader when the user interacts
-   * with the element. By default, the label is constructed by traversing all the
-   * children and accumulating all the `Text` nodes separated by space.
+   * with the element. By default, the label is constructed by traversing all
+   * the children and accumulating all the `Text` nodes separated by space.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessibilitylabel
   */
  accessibilityLabel: PropTypes.node,

+  /**
+   * Provides an array of custom actions available for accessibility.
+   *
+   * @platform ios
+   */
+  accessibilityActions: PropTypes.arrayOf(PropTypes.string),
+
  /**
   * Indicates to accessibility services to treat UI component like a
   * native one. Works for Android only.
   *
-   * Possible values are one of:
-   *
-   * - `'none'`
-   * - `'button'`
-   * - `'radiobutton_checked'`
-   * - `'radiobutton_unchecked'`
-   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessibilitycomponenttype
   */
  accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentTypes),

  /**
   * Indicates to accessibility services whether the user should be notified
   * when this view changes. Works for Android API >= 19 only.
-   * Possible values:
-   *
-   * - `'none'` - Accessibility services should not announce changes to this view.
-   * - `'polite'`- Accessibility services should announce changes to this view.
-   * - `'assertive'` - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-   *
-   * See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion)
-   * for reference.
   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessibilityliveregion
   */
  accessibilityLiveRegion: PropTypes.oneOf([
    'none',
@@ -135,19 +137,9 @@ module.exports = {
   * fires accessibility events and if it is reported to accessibility services
   * that query the screen. Works for Android only.
   *
-   * Possible values:
-   *
-   *  - `'auto'` - The system determines whether the view is important for accessibility -
-   *    default (recommended).
-   *  - `'yes'` - The view is important for accessibility.
-   *  - `'no'` - The view is not important for accessibility.
-   *  - `'no-hide-descendants'` - The view is not important for accessibility,
-   *    nor are any of its descendant views.
-   *
-   * See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility)
-   * for reference.
-   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#importantforaccessibility
   */
  importantForAccessibility: PropTypes.oneOf([
    'auto',
@@ -162,30 +154,9 @@ module.exports = {
   *
   * You can provide one trait or an array of many traits.
   *
-   * Possible values for `AccessibilityTraits` are:
-   *
-   * - `'none'` - The element has no traits.
-   * - `'button'` - The element should be treated as a button.
-   * - `'link'` - The element should be treated as a link.
-   * - `'header'` - The element is a header that divides content into sections.
-   * - `'search'` - The element should be treated as a search field.
-   * - `'image'` - The element should be treated as an image.
-   * - `'selected'` - The element is selected.
-   * - `'plays'` - The element plays sound.
-   * - `'key'` - The element should be treated like a keyboard key.
-   * - `'text'` - The element should be treated as text.
-   * - `'summary'` - The element provides app summary information.
-   * - `'disabled'` - The element is disabled.
-   * - `'frequentUpdates'` - The element frequently changes its value.
-   * - `'startsMedia'` - The element starts a media session.
-   * - `'adjustable'` - The element allows adjustment over a range of values.
-   * - `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
-   * - `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
-   *
-   * See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios)
-   * for more information.
-   *
   * @platform ios
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessibilitytraits
   */
  accessibilityTraits: PropTypes.oneOfType([
    PropTypes.oneOf(AccessibilityTraits),
@@ -197,22 +168,33 @@ module.exports = {
   * within views that are siblings of the receiver.
   * Default is `false`.
   *
-   * See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios)
-   * for more information.
-   *
   * @platform ios
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#accessibilityviewismodal
   */
  accessibilityViewIsModal: PropTypes.bool,

+  /**
+   * When `accessible` is true, the system will try to invoke this function
+   * when the user performs an accessibility custom action.
+   *
+   * @platform ios
+   */
+  onAccessibilityAction: PropTypes.func,
+
  /**
   * When `accessible` is true, the system will try to invoke this function
   * when the user performs accessibility tap gesture.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilitytap
   */
  onAccessibilityTap: PropTypes.func,

  /**
   * When `accessible` is `true`, the system will invoke this function when the
   * user performs the magic tap gesture.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onmagictap
   */
  onMagicTap: PropTypes.func,

@@ -220,6 +202,8 @@ module.exports = {
   * Used to locate this view in end-to-end tests.
   *
   * > This disables the 'layout-only view removal' optimization for this view!
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#testid
   */
  testID: PropTypes.string,

@@ -227,6 +211,8 @@ module.exports = {
   * Used to locate this view from native classes.
   *
   * > This disables the 'layout-only view removal' optimization for this view!
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#nativeid
   */
  nativeID: PropTypes.string,

@@ -237,90 +223,111 @@ module.exports = {
   */

  /**
-   * The View is now responding for touch events. This is the time to highlight and show the user
-   * what is happening.
+   * The View is now responding for touch events. This is the time to highlight 
+   * and show the user what is happening.
   *
-   * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as
-   * described above.
+   * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic
+   * touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onrespondergrant
   */
  onResponderGrant: PropTypes.func,

  /**
   * The user is moving their finger.
   *
-   * `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as
-   * described above.
+   * `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic 
+   * touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onrespondermove
   */
  onResponderMove: PropTypes.func,

  /**
-   * Another responder is already active and will not release it to that `View` asking to be
-   * the responder.
+   * Another responder is already active and will not release it to that `View` 
+   * asking to be the responder.
   *
-   * `View.props.onResponderReject: (event) => {}`, where `event` is a synthetic touch event as
-   * described above.
+   * `View.props.onResponderReject: (event) => {}`, where `event` is a 
+   * synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onresponderreject
   */
  onResponderReject: PropTypes.func,

  /**
   * Fired at the end of the touch.
   *
-   * `View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as
-   * described above.
+   * `View.props.onResponderRelease: (event) => {}`, where `event` is a 
+   * synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onresponderrelease
   */
  onResponderRelease: PropTypes.func,

  /**
-   * The responder has been taken from the `View`. Might be taken by other views after a call to
-   * `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens
-   * with control center/ notification center on iOS)
+   * The responder has been taken from the `View`. Might be taken by other
+   * views after a call to `onResponderTerminationRequest`, or might be taken 
+   * by the OS without asking (e.g., happens with control center/ notification 
+   * center on iOS)
   *
-   * `View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as
-   * described above.
+   * `View.props.onResponderTerminate: (event) => {}`, where `event` is a 
+   * synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onresponderterminate
   */
  onResponderTerminate: PropTypes.func,

  /**
-   * Some other `View` wants to become responder and is asking this `View` to release its
-   * responder. Returning `true` allows its release.
+   * Some other `View` wants to become responder and is asking this `View` to 
+   * release its responder. Returning `true` allows its release.
   *
-   * `View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch
-   * event as described above.
+   * `View.props.onResponderTerminationRequest: (event) => {}`, where `event` 
+   * is a synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onresponderterminationrequest
   */
  onResponderTerminationRequest: PropTypes.func,

  /**
   * Does this view want to become responder on the start of a touch?
   *
-   * `View.props.onStartShouldSetResponder: (event) => [true | false]`, where `event` is a
-   * synthetic touch event as described above.
+   * `View.props.onStartShouldSetResponder: (event) => [true | false]`, where 
+   * `event` is a synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetresponder
   */
  onStartShouldSetResponder: PropTypes.func,

  /**
-   * If a parent `View` wants to prevent a child `View` from becoming responder on a touch start,
-   * it should have this handler which returns `true`.
+   * If a parent `View` wants to prevent a child `View` from becoming responder 
+   * on a touch start, it should have this handler which returns `true`.
   *
-   * `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a
-   * synthetic touch event as described above.
+   * `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, 
+   * where `event` is a synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetrespondercapture
   */
  onStartShouldSetResponderCapture: PropTypes.func,

  /**
-   * Does this view want to "claim" touch responsiveness? This is called for every touch move on
-   * the `View` when it is not the responder.
+   * Does this view want to "claim" touch responsiveness? This is called for 
+   * every touch move on the `View` when it is not the responder.
   *
-   * `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a
-   * synthetic touch event as described above.
+   * `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where 
+   * `event` is a synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onmoveshouldsetresponder
   */
  onMoveShouldSetResponder: PropTypes.func,

  /**
-  * If a parent `View` wants to prevent a child `View` from becoming responder on a move,
-  * it should have this handler which returns `true`.
-  *
-  * `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, where `event` is a
-  * synthetic touch event as described above.
+   * If a parent `View` wants to prevent a child `View` from becoming responder
+   * on a move, it should have this handler which returns `true`.
+   * 
+   * `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`,
+   * where `event` is a synthetic touch event as described above.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onMoveShouldsetrespondercapture
   */
  onMoveShouldSetResponderCapture: PropTypes.func,

@@ -329,12 +336,11 @@ module.exports = {
   * Typical interface guidelines recommend touch targets that are at least
   * 30 - 40 points/density-independent pixels.
   *
-   * For example, if a touchable view has a height of 20 the touchable height can be extended to
-   * 40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}`
-   *
   * > The touch area never extends past the parent view bounds and the Z-index
   * > of sibling views always takes precedence if a touch hits two overlapping
   * > views.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#hitslop
   */
  hitSlop: EdgeInsetsPropType,

@@ -346,41 +352,15 @@ module.exports = {
   * This event is fired immediately once the layout has been calculated, but
   * the new layout may not yet be reflected on the screen at the time the
   * event is received, especially if a layout animation is in progress.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#onlayout
   */
  onLayout: PropTypes.func,

  /**
   * Controls whether the `View` can be the target of touch events.
-   *
-   *   - `'auto'`: The View can be the target of touch events.
-   *   - `'none'`: The View is never the target of touch events.
-   *   - `'box-none'`: The View is never the target of touch events but it's
-   *     subviews can be. It behaves like if the view had the following classes
-   *     in CSS:
-   * ```
-   * .box-none {
-   *      pointer-events: none;
-   * }
-   * .box-none * {
-   *      pointer-events: all;
-   * }
-   * ```
-   *   - `'box-only'`: The view can be the target of touch events but it's
-   *     subviews cannot be. It behaves like if the view had the following classes
-   *     in CSS:
-   * ```
-   * .box-only {
-   *      pointer-events: all;
-   * }
-   * .box-only * {
-   *      pointer-events: none;
-   * }
-   * ```
-   * > Since `pointerEvents` does not affect layout/appearance, and we are
-   * > already deviating from the spec by adding additional modes, we opt to not
-   * > include `pointerEvents` on `style`. On some platforms, we would need to
-   * > implement it as a `className` anyways. Using `style` or not is an
-   * > implementation detail of the platform.
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#pointerevents
   */
  pointerEvents: PropTypes.oneOf([
    'box-none',
@@ -388,6 +368,10 @@ module.exports = {
    'box-only',
    'auto',
  ]),
+
+  /**
+   * See http://facebook.github.io/react-native/docs/style.html
+   */
  style: stylePropType,

  /**
@@ -397,6 +381,8 @@ module.exports = {
   * view that contains many subviews that extend outside its bound. The
   * subviews must also have `overflow: hidden`, as should the containing view
   * (or one of its superviews).
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#removeclippedsubviews
   */
  removeClippedSubviews: PropTypes.bool,

@@ -404,31 +390,18 @@ module.exports = {
   * Whether this `View` should render itself (and all of its children) into a
   * single hardware texture on the GPU.
   *
-   * On Android, this is useful for animations and interactions that only
-   * modify opacity, rotation, translation, and/or scale: in those cases, the
-   * view doesn't have to be redrawn and display lists don't need to be
-   * re-executed. The texture can just be re-used and re-composited with
-   * different parameters. The downside is that this can use up limited video
-   * memory, so this prop should be set back to false at the end of the
-   * interaction/animation.
-   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#rendertohardwaretextureandroid
   */
  renderToHardwareTextureAndroid: PropTypes.bool,

  /**
   * Whether this `View` should be rendered as a bitmap before compositing.
   *
-   * On iOS, this is useful for animations and interactions that do not
-   * modify this component's dimensions nor its children; for example, when
-   * translating the position of a static view, rasterization allows the
-   * renderer to reuse a cached bitmap of a static view and quickly composite
-   * it during each frame.
-   *
-   * Rasterization incurs an off-screen drawing pass and the bitmap consumes
-   * memory. Test and measure when using this property.
-   *
   * @platform ios
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#shouldrasterizeios
   */
  shouldRasterizeIOS: PropTypes.bool,

@@ -439,29 +412,18 @@ module.exports = {
   * ensure that this `View` exists in the native view hierarchy.
   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#collapsable
   */
  collapsable: PropTypes.bool,

  /**
-   * Whether this `View` needs to rendered offscreen and composited with an alpha
-   * in order to preserve 100% correct colors and blending behavior. The default
-   * (`false`) falls back to drawing the component and its children with an alpha
-   * applied to the paint used to draw each element instead of rendering the full
-   * component offscreen and compositing it back with an alpha value. This default
-   * may be noticeable and undesired in the case where the `View` you are setting
-   * an opacity on has multiple overlapping elements (e.g. multiple overlapping
-   * `View`s, or text and a background).
-   *
-   * Rendering offscreen to preserve correct alpha behavior is extremely
-   * expensive and hard to debug for non-native developers, which is why it is
-   * not turned on by default. If you do need to enable this property for an
-   * animation, consider combining it with renderToHardwareTextureAndroid if the
-   * view **contents** are static (i.e. it doesn't need to be redrawn each frame).
-   * If that property is enabled, this View will be rendered off-screen once,
-   * saved in a hardware texture, and then composited onto the screen with an alpha
-   * each frame without having to switch rendering targets on the GPU.
+   * Whether this `View` needs to rendered offscreen and composited with an 
+   * alpha in order to preserve 100% correct colors and blending behavior. 
   *
   * @platform android
+   * 
+   * See http://facebook.github.io/react-native/docs/view.html#needsoffscreenalphacompositing
   */
  needsOffscreenAlphaCompositing: PropTypes.bool,
 };
@@ -31,11 +31,17 @@ var ViewStylePropTypes = {
  borderRightColor: ColorPropType,
  borderBottomColor: ColorPropType,
  borderLeftColor: ColorPropType,
+  borderStartColor: ColorPropType,
+  borderEndColor: ColorPropType,
  borderRadius: ReactPropTypes.number,
  borderTopLeftRadius: ReactPropTypes.number,
  borderTopRightRadius: ReactPropTypes.number,
+  borderTopStartRadius: ReactPropTypes.number,
+  borderTopEndRadius: ReactPropTypes.number,
  borderBottomLeftRadius: ReactPropTypes.number,
  borderBottomRightRadius: ReactPropTypes.number,
+  borderBottomStartRadius: ReactPropTypes.number,
+  borderBottomEndRadius: ReactPropTypes.number,
  borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
  borderWidth: ReactPropTypes.number,
  borderTopWidth: ReactPropTypes.number,
@@ -37,7 +37,7 @@ export type ViewPagerScrollState = $Enum<{
 *
 * It is important all children are `<View>`s and not composite components.
 * You can set style properties like `padding` or `backgroundColor` for each
- * child.
+ * child. It is also important that each child have a `key` prop.
 *
 * Example:
 *
@@ -47,10 +47,10 @@ export type ViewPagerScrollState = $Enum<{
 *     <ViewPagerAndroid
 *       style={styles.viewPager}
 *       initialPage={0}>
- *       <View style={styles.pageStyle}>
+ *       <View style={styles.pageStyle} key="1">
 *         <Text>First page</Text>
 *       </View>
- *       <View style={styles.pageStyle}>
+ *       <View style={styles.pageStyle} key="2">
 *         <Text>Second page</Text>
 *       </View>
 *     </ViewPagerAndroid>
@@ -61,6 +61,9 @@ export type ViewPagerScrollState = $Enum<{
 *
 * var styles = {
 *   ...
+ *   viewPager: {
+ *     flex: 1
+ *   },
 *   pageStyle: {
 *     alignItems: 'center',
 *     padding: 20,
@@ -45,6 +45,14 @@ var defaultRenderLoading = () => (
 * Renders a native WebView.
 */
 class WebView extends React.Component {
+  static get extraNativeComponentConfig() {
+    return {
+      nativeOnly: {
+        messagingEnabled: PropTypes.bool,
+      },
+    };
+  }
+
  static propTypes = {
    ...ViewPropTypes,
    renderError: PropTypes.func,
@@ -197,6 +205,26 @@ class WebView extends React.Component {
    saveFormDataDisabled: PropTypes.bool,

    /**
+     * Override the native component used to render the WebView. Enables a custom native
+     * WebView which uses the same JavaScript as the original WebView.
+     */
+    nativeConfig: PropTypes.shape({
+      /*
+       * The native component used to render the WebView.
+       */
+      component: PropTypes.any,
+      /*
+       * Set props directly on the native component WebView. Enables custom props which the
+       * original WebView doesn't pass through.
+       */
+      props: PropTypes.object,
+      /*
+       * Set the ViewManager to use for communcation with the native side.
+       * @platform ios
+       */
+      viewManager: PropTypes.object,
+    }),
+    /*
     * Used on Android only, controls whether the given list of URL prefixes should
     * make {@link com.facebook.react.views.webview.ReactWebViewClient} to launch a
     * default activity intent for those URL instead of loading it within the webview.
@@ -260,8 +288,12 @@ class WebView extends React.Component {
      console.warn('WebView: `source.body` is not supported when using GET.');
    }

+    const nativeConfig = this.props.nativeConfig || {};
+
+    let NativeWebView = nativeConfig.component || RCTWebView;
+
    var webView =
-      <RCTWebView
+      <NativeWebView
        ref={RCT_WEBVIEW_REF}
        key="webViewKey"
        style={webViewStyles}
@@ -286,6 +318,7 @@ class WebView extends React.Component {
        mixedContentMode={this.props.mixedContentMode}
        saveFormDataDisabled={this.props.saveFormDataDisabled}
        urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
+        {...nativeConfig.props}
      />;

    return (
@@ -402,11 +435,7 @@ class WebView extends React.Component {
  }
 }

-var RCTWebView = requireNativeComponent('RCTWebView', WebView, {
-  nativeOnly: {
-    messagingEnabled: PropTypes.bool,
-  },
-});
+var RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig);

 var styles = StyleSheet.create({
  container: {
@@ -116,6 +116,17 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
 class WebView extends React.Component {
  static JSNavigationScheme = JSNavigationScheme;
  static NavigationType = NavigationType;
+  static get extraNativeComponentConfig() {
+    return {
+      nativeOnly: {
+        onLoadingStart: true,
+        onLoadingError: true,
+        onLoadingFinish: true,
+        onMessage: true,
+        messagingEnabled: PropTypes.bool,
+      },
+    };
+  }

  static propTypes = {
    ...ViewPropTypes,
@@ -230,6 +241,7 @@ class WebView extends React.Component {
    /**
     * The amount by which the web view content is inset from the edges of
     * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
+     * @platform ios
     */
    contentInset: EdgeInsetsPropType,
    /**
@@ -257,7 +269,7 @@ class WebView extends React.Component {
    style: ViewPropTypes.style,

    /**
-     * Determines the types of data converted to clickable URLs in the web view’s content.
+     * Determines the types of data converted to clickable URLs in the web view's content.
     * By default only phone numbers are detected.
     *
     * You can provide one type or an array of many types.
@@ -365,6 +377,27 @@ class WebView extends React.Component {
      'always',
      'compatibility'
    ]),
+
+    /**
+     * Override the native component used to render the WebView. Enables a custom native
+     * WebView which uses the same JavaScript as the original WebView.
+     */
+    nativeConfig: PropTypes.shape({
+      /*
+       * The native component used to render the WebView.
+       */
+      component: PropTypes.any,
+      /*
+       * Set props directly on the native component WebView. Enables custom props which the
+       * original WebView doesn't pass through.
+       */
+      props: PropTypes.object,
+      /*
+       * Set the ViewManager to use for communcation with the native side.
+       * @platform ios
+       */
+      viewManager: PropTypes.object,
+    }),
  };

  static defaultProps = {
@@ -412,10 +445,14 @@ class WebView extends React.Component {
      webViewStyles.push(styles.hidden);
    }

+    const nativeConfig = this.props.nativeConfig || {};
+
+    const viewManager = nativeConfig.viewManager || RCTWebViewManager;
+
    var onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => {
      var shouldStart = this.props.onShouldStartLoadWithRequest &&
        this.props.onShouldStartLoadWithRequest(event.nativeEvent);
-      RCTWebViewManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier);
+      viewManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier);
    });

    var decelerationRate = processDecelerationRate(this.props.decelerationRate);
@@ -429,8 +466,10 @@ class WebView extends React.Component {

    const messagingEnabled = typeof this.props.onMessage === 'function';

+    const NativeWebView = nativeConfig.component || RCTWebView;
+
    var webView =
-      <RCTWebView
+      <NativeWebView
        ref={RCT_WEBVIEW_REF}
        key="webViewKey"
        style={webViewStyles}
@@ -451,6 +490,7 @@ class WebView extends React.Component {
        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
        mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
        dataDetectorTypes={this.props.dataDetectorTypes}
+        {...nativeConfig.props}
      />;

    return (
@@ -590,15 +630,7 @@ class WebView extends React.Component {
  }
 }

-var RCTWebView = requireNativeComponent('RCTWebView', WebView, {
-  nativeOnly: {
-    onLoadingStart: true,
-    onLoadingError: true,
-    onLoadingFinish: true,
-    onMessage: true,
-    messagingEnabled: PropTypes.bool,
-  },
-});
+var RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig);

 var styles = StyleSheet.create({
  container: {
@@ -5,6 +5,8 @@
 * 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.
+ *
+ * @emails oncall+react_native
 */
 'use strict';

@@ -27,6 +27,9 @@ function parseErrorStack(e: ExtendedError): Array<StackFrame> {
    return [];
  }

+  /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an
+   * error found when Flow v0.54 was deployed. To see the error delete this
+   * comment and run Flow. */
  const stacktraceParser = require('stacktrace-parser');
  const stack = Array.isArray(e.stack) ? e.stack : stacktraceParser.parse(e.stack);

--- a/Show More
+++ b/Show More