[0.29.0] Bump version numbers

Merge pull request #8566 from JoelMarcey/post-lockdown-survey-to-0.29
0.29 cherry-pick: Add post documentation lockdown survey link
2025-11-01 09:14:26 +00:00 · 2016-07-06 00:59:33 +02:00 · 2016-07-05 12:57:45 -04:00 · 2016-07-05 16:59:33 +01:00 · 2016-07-05 16:59:06 +01:00 · 2016-07-05 16:58:38 +01:00
2804 changed files with 55539 additions and 169401 deletions
@@ -9,6 +9,3 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
-
-[*.gradle]
-indent_size = 4
@@ -21,7 +21,6 @@
    "__fbBatchedBridgeConfig": false,
    "alert": false,
    "cancelAnimationFrame": false,
-    "cancelIdleCallback": false,
    "clearImmediate": true,
    "clearInterval": false,
    "clearTimeout": false,
@@ -41,7 +40,6 @@
    "process": false,
    "Promise": true,
    "requestAnimationFrame": true,
-    "requestIdleCallback": true,
    "require": false,
    "Set": true,
    "setImmediate": true,
@@ -61,7 +59,6 @@
    "SyntheticEvent": false,
    "$Either": false,
    "$All": false,
-    "$ArrayBufferView": false,
    "$Tuple": false,
    "$Supertype": false,
    "$Subtype": false,
@@ -79,7 +76,6 @@
    "comma-dangle": 0,               // disallow trailing commas in object literals
    "no-cond-assign": 1,             // disallow assignment in conditional expressions
    "no-console": 0,                 // disallow use of console (off by default in the node environment)
-    "no-const-assign": 2,            // disallow assignment to const-declared variables
    "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
@@ -223,9 +219,6 @@
    "no-bitwise": 1,                 // disallow use of bitwise operators (off by default)
    "no-plusplus": 0,                // disallow use of unary operators, ++ and -- (off by default)

-  // React Plugin
-  // The following rules are made available via `eslint-plugin-react`.
-
    "react/display-name": 0,
    "react/jsx-boolean-value": 0,
    "react/jsx-no-duplicate-props": 2,
@@ -233,8 +226,8 @@
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
+    "react/no-did-mount-set-state": [1, "allow-in-func"],
+    "react/no-did-update-set-state": [1, "allow-in-func"],
    "react/no-multi-comp": 0,
    "react/no-string-refs": 1,
    "react/no-unknown-property": 0,
@@ -1,24 +1,13 @@
 [ignore]
-; We fork some components by platform
-.*/*[.]android.js

-; Ignore templates for 'react-native init'
-.*/local-cli/templates/.*
+# We fork some components by platform.
+.*/*.android.js

-; Ignore the website subdir
-<PROJECT_ROOT>/website/.*
+# Ignore templates with `@flow` in header
+.*/local-cli/generator.*

-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
+# Ignore malformed json
+.*/node_modules/y18n/test/.*\.json

 [include]

@@ -27,26 +16,25 @@ Libraries/react-native/react-native-interface.js
 flow/

 [options]
-emoji=true
-
 module.system=haste

+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+
 experimental.strict_type_args=true

 munge_underscores=true

+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-unsafe.enable_getters_and_setters=true

 [version]
-^0.40.0
+^0.27.0
@@ -1,25 +1,21 @@
-We use GitHub Issues for bugs.
+Hey there and thank you for using React Native!

-If you have a non-bug question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
+React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

-If you have a feature request, post it on Product Pains: https://productpains.com/product/react-native/
+Do the checklist before filing an issue:

--- Please use this template, and delete everything above this line before submitting your issue --- 
+- [ ] Is this something you can **debug and fix**? Send a pull request! Bug fixes and documentation fixes are welcome.
+- [ ] Have a usage question? Ask your question on [StackOverflow](http://stackoverflow.com/questions/tagged/react-native). We use StackOverflow for usage question and GitHub for bugs.
+- [ ] Have an idea for a feature? Post the feature request on [Product Pains](https://productpains.com/product/react-native/). It has a voting system to surface the important issues. GitHub issues should only be used for bugs.

-### Description

-[FILL THIS OUT: Explain what you did, what you expected to happen, and what actually happens.]
+None of the above, create a bug report
+------------------------------------------------------------------

-### Reproduction
+Make sure to add **all the information needed to understand the bug** so that someone can help. If the info is missing we'll add the 'Needs more information' label and close the issue until there is enough information.

-[FILL THIS OUT: Try to reproduce your bug on rnplay.org and provide a link. If you can't reproduce the bug on rnplay.org, provide a sample project.]
-
-### Solution
-
-[FILL THIS OUT: What needs to be done to address this issue? Ideally, provide a pull request with a fix.]
-
-### Additional Information
-
-* React Native version: [FILL THIS OUT: Does the bug reproduce on the latest RN release?]
-* Platform: [FILL THIS OUT: iOS, Android, or both?]
-* Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
+- [ ] Provide a **minimal code snippet** / [rnplay](https://rnplay.org/) example that reproduces the bug.
+- [ ] Provide **screenshots** where appropriate
+- [ ] What's the **version** of React Native you're using?
+- [ ] Does this occur on iOS, Android or both?
+- [ ] Are you using Mac, Linux or Windows?
@@ -1,6 +1,6 @@
 Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

-> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
+(You can skip this if you're fixing a typo or adding an app to the Showcase.)

 Explain the **motivation** for making this change. What existing problem does the pull request solve?

@@ -34,7 +34,6 @@ project.xcworkspace
 buck-out
 /ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
 /ReactAndroid/src/main/jni/prebuilt/lib/x86/
-/ReactAndroid/src/main/gen

 # Android
 .idea
@@ -53,4 +52,3 @@ node_modules

 # Test generated files
 /ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
-*.js.meta
@@ -1,3 +1,2 @@
 # rnpm
 /local-cli/rnpm
-/local-cli/server/middleware/heapCapture/bundle.js
@@ -1,35 +1,30 @@
 language: objective-c

-osx_image: xcode8
+osx_image: xcode7.3

 install:
  - mkdir -p /Users/travis/build/facebook/.nvm
  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
  - brew install nvm
  - source $(brew --prefix nvm)/nvm.sh
-  # TODO npm 2 started stalling on Travis, t11852928
-
-  # Use node 6 because that is what runs on land-blocking tests
-  - nvm install 6
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.3
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
-  - wget https://github.com/yarnpkg/yarn/releases/download/v0.16.0/yarn-0.16.0.js
-  - export yarn="node $(pwd)/yarn-0.16.0.js"
-  - $yarn install
+  - npm config set spin=false
+  - npm config set progress=false
+  - npm install

 script:
-  - if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait ./scripts/objc-test-ios.sh; fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.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 && ./scripts/process-podspecs.sh; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi

-
-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
+  matrix:
+    - TEST_TYPE=e2e-objc
+    - TEST_TYPE=objc
+    - TEST_TYPE=js

 branches:
  only:
@@ -39,12 +34,6 @@ branches:
 notifications:
  email:
    recipients:
-      - mkonicek@fb.com
-      - 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
+      - bestander@gmail.com
    on_failure: change
    on_success: change
@@ -14,14 +14,14 @@ We will do our best to keep `master` in good shape, with tests passing at all ti

 The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.

-**Please submit your pull request on the `master` branch**. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.
+Please submit your pull request on the *master* branch. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.

 *Before* submitting a pull request, please make sure the following is done…

 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable

    ```
    $ cd website
@@ -101,7 +101,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe

 #### JSX

-* Prefer `"` over `'` for string literal props
+* Prefer `'` over `"` for string literal props
 * When wrapping opening tags over multiple lines, place one prop per line
 * `{}` of props should hug their values (no spaces)
 * Place the closing `>` of opening tags on the same line as the last prop
@@ -1,55 +0,0 @@
-FROM containership/android-base:latest
-
-# set default environment variables
-ENV GRADLE_OPTS="-Dorg.gradle.jvmargs=\"-Xmx512m -XX:+HeapDumpOnOutOfMemoryError\""
-ENV JAVA_TOOL_OPTIONS="-Dfile.encoding=UTF8"
-ENV REACT_NATIVE_MAX_WORKERS=1
-
-# add ReactAndroid directory
-ADD .buckconfig /app/.buckconfig
-ADD .buckjavaargs /app/.buckjavaargs
-ADD ReactAndroid /app/ReactAndroid
-ADD ReactCommon /app/ReactCommon
-ADD keystores /app/keystores
-
-# set workdir
-WORKDIR /app
-
-# run buck fetches
-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/...
-
-# build app
-RUN buck build ReactAndroid/src/main/java/com/facebook/react
-RUN buck build ReactAndroid/src/main/java/com/facebook/react/shell
-
-ADD gradle /app/gradle
-ADD gradlew /app/gradlew
-ADD settings.gradle /app/settings.gradle
-ADD build.gradle /app/build.gradle
-ADD react.gradle /app/react.gradle
-
-# run gradle downloads
-RUN ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog
-
-# compile native libs with Gradle script, we need bridge for unit and integration tests
-RUN ./gradlew :ReactAndroid:packageReactNdkLibsForBuck -Pjobs=1 -Pcom.android.build.threadPoolSize=1
-
-# add all react-native code
-ADD . /app
-WORKDIR /app
-
-# https://github.com/npm/npm/issues/13306
-RUN cd $(npm root -g)/npm && npm install fs-extra && sed -i -e s/graceful-fs/fs-extra/ -e s/fs.rename/fs.move/ ./lib/utils/rename.js
-
-# build node dependencies
-RUN npm install
-RUN npm install github@0.2.4
-
-WORKDIR /app/website
-RUN npm install
-
-WORKDIR /app
@@ -1,78 +0,0 @@
-FROM library/ubuntu:16.04
-
-# set default build arguments
-ARG ANDROID_VERSION=25.2.3
-ARG BUCK_VERSION=2016.11.11.01
-ARG NDK_VERSION=10e
-ARG NODE_VERSION=6.2.0
-ARG WATCHMAN_VERSION=4.7.0
-
-# set default environment variables
-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 ANDROID_NDK=/opt/ndk/android-ndk-r$NDK_VERSION
-ENV PATH=${PATH}:${ANDROID_NDK}
-
-# install system dependencies
-RUN apt-get update && apt-get install ant autoconf automake curl g++ gcc git libqt5widgets5 lib32z1 lib32stdc++6 make maven npm openjdk-8* python-dev python3-dev qml-module-qtquick-controls qtdeclarative5-dev unzip -y
-
-# configure npm
-RUN npm config set spin=false
-RUN npm config set progress=false
-
-# install node
-RUN npm install n -g
-RUN n $NODE_VERSION
-
-# download buck
-RUN git clone https://github.com/facebook/buck.git /opt/buck
-WORKDIR /opt/buck
-RUN git checkout v$BUCK_VERSION
-
-# build buck
-RUN ant
-
-# download watchman
-RUN git clone https://github.com/facebook/watchman.git /opt/watchman
-WORKDIR /opt/watchman
-RUN git checkout v$WATCHMAN_VERSION
-
-# build watchman
-RUN ./autogen.sh
-RUN ./configure
-RUN make
-RUN make install
-
-# 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 unzip android.zip
-RUN rm android.zip
-
-# download and unpack NDK
-RUN mkdir /opt/ndk
-WORKDIR /opt/ndk
-RUN curl --silent https://dl.google.com/android/repository/android-ndk-r$NDK_VERSION-linux-x86_64.zip > ndk.zip
-RUN unzip ndk.zip
-
-# cleanup NDK
-RUN rm ndk.zip
-
-# add android SDK tools
-# 2 - Android SDK Platform-tools, revision 25.0.3
-# 12 - Android SDK Build-tools, revision 23.0.1
-# 35 - SDK Platform Android 6.0, API 23, revision 3
-# 39 - SDK Platform Android 4.4.2, API 19, revision 4
-# 102 - ARM EABI v7a System Image, Android API 19, revision 5
-# 103 - Intel x86 Atom System Image, Android API 19, revision 5
-# 131 - Google APIs, Android API 23, revision 1
-# 166 - Android Support Repository, revision 41
-RUN echo "y" | android update sdk -u -a -t 2,12,35,39,102,103,131,166
-RUN ln -s /opt/android/platform-tools/adb /usr/bin/adb
-
-# clean up unnecessary directories
-RUN rm -rf /opt/android/system-images/android-19/default/x86
@@ -1,19 +0,0 @@
-FROM library/node:6.9.2
-
-ENV YARN_VERSION=0.19.1
-
-# install dependencies
-RUN apt-get update && apt-get install ocaml libelf-dev -y
-RUN npm install yarn@$YARN_VERSION -g
-
-# add code
-RUN mkdir /app
-ADD . /app
-
-WORKDIR /app
-RUN yarn install --ignore-engines
-
-WORKDIR website
-RUN yarn install --ignore-engines --ignore-platform
-
-WORKDIR /app
@@ -1,153 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-/**
- * This script runs instrumentation tests one by one with retries
- * Instrumentation tests tend to be flaky, so rerunning them individually increases
- * chances for success and reduces total average execution time.
- *
- * We assume that all instrumentation tests are flat in one folder
- * Available arguments:
- * --path - path to all .java files with tests
- * --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');
-const child_process = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-const colors = {
-    GREEN: '\x1b[32m',
-    RED: '\x1b[31m',
-    RESET: '\x1b[0m'
-};
-
-const test_opts = {
-    FILTER: new RegExp(argv.filter || '.*', 'i'),
-    PACKAGE: argv.package || 'com.facebook.react.tests',
-    PATH: argv.path || './ReactAndroid/src/androidTest/java/com/facebook/react/tests',
-    RETRIES: parseInt(argv.retries || 2, 10),
-
-    TEST_TIMEOUT: parseInt(argv['test-timeout'] || 1000 * 60 * 10),
-
-    OFFSET: argv.offset,
-    COUNT: argv.count
-}
-
-let max_test_class_length = Number.NEGATIVE_INFINITY;
-
-let testClasses = fs.readdirSync(path.resolve(process.cwd(), test_opts.PATH))
-    .filter((file) => {
-        return file.endsWith('.java');
-    }).map((clazz) => {
-        return path.basename(clazz, '.java');
-    }).map((clazz) => {
-        return test_opts.PACKAGE + '.' + clazz;
-    }).filter((clazz) => {
-        return test_opts.FILTER.test(clazz);
-    });
-
-// only process subset of the tests at corresponding offset and count if args provided
-if (test_opts.COUNT != null && test_opts.OFFSET != null) {
-    const testCount = testClasses.length;
-    const start = test_opts.COUNT * test_opts.OFFSET;
-    const end = start + test_opts.COUNT;
-
-    if (start >= testClasses.length) {
-        testClasses = [];
-    } else if (end >= testClasses.length) {
-        testClasses = testClasses.slice(start);
-    } else {
-        testClasses = testClasses.slice(start, end);
-    }
-}
-
-return async.mapSeries(testClasses, (clazz, callback) => {
-    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();
-        }, test_opts.TEST_TIMEOUT);
-
-        test_process.on('error', (err) => {
-            clearTimeout(timeout);
-            retryCb(err);
-        });
-
-        test_process.on('exit', (code) => {
-            clearTimeout(timeout);
-
-            if(code !== 0) {
-                return retryCb(new Error(`Process exited with code: ${code}`));
-            }
-
-            return retryCb();
-        });
-    }, (err) => {
-        return callback(null, {
-            name: clazz,
-            status: err ? 'failure' : 'success'
-        });
-    });
-}, (err, results) => {
-    print_test_suite_results(results);
-
-    const failures = results.filter((test) => {
-        test.status === 'failure';
-    });
-
-    return failures.length === 0 ? process.exit(0) : process.exit(1);
-});
-
-function print_test_suite_results(results) {
-    console.log('\n\nTest Suite Results:\n');
-
-    let color;
-    let failing_suites = 0;
-    let passing_suites = 0;
-
-    function pad_output(num_chars) {
-        let i = 0;
-
-        while(i < num_chars) {
-            process.stdout.write(' ');
-            i++;
-        }
-    }
-    results.forEach((test) => {
-        if(test.status === 'success') {
-            color = colors.GREEN;
-            passing_suites++;
-        } else if(test.status === 'failure') {
-            color = colors.RED;
-            failing_suites++;
-        }
-
-        process.stdout.write(color);
-        process.stdout.write(test.name);
-        pad_output((max_test_class_length - test.name.length) + 8);
-        process.stdout.write(test.status);
-        process.stdout.write(`${colors.RESET}\n`);
-    });
-
-    console.log(`\n${passing_suites} passing, ${failing_suites} failing!`);
-}
@@ -1,34 +0,0 @@
-#!/bin/bash
-
-# for buck gen
-mount -o remount,exec /dev/shm
-
-AVD_UUID=$(cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -n 1)
-
-# create virtual device
-echo no | android create avd -n $AVD_UUID -f -t android-19 --abi default/armeabi-v7a
-
-# emulator setup
-emulator64-arm -avd $AVD_UUID -no-skin -no-audio -no-window -no-boot-anim &
-bootanim=""
-until [[ "$bootanim" =~ "stopped" ]]; do
-    sleep 5
-    bootanim=$(adb -e shell getprop init.svc.bootanim 2>&1)
-    echo "boot animation status=$bootanim"
-done
-
-set -x
-
-# solve issue with max user watches limit
-echo 65536 | tee -a /proc/sys/fs/inotify/max_user_watches
-watchman shutdown-server
-
-# integration tests
-# build JS bundle for instrumentation tests
-node local-cli/cli.js bundle --platform android --dev true --entry-file ReactAndroid/src/androidTest/js/TestBundle.js --bundle-output ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
-
-# build test APK
-buck install ReactAndroid/src/androidTest/buck-runner:instrumentation-tests --config build.threads=1
-
-# run installed apk with tests
-node ./ContainerShip/scripts/run-android-ci-instrumentation-tests.js $*
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# set default environment variables
-UNIT_TESTS_BUILD_THREADS="${UNIT_TESTS_BUILD_THREADS:-1}"
-
-# for buck gen
-mount -o remount,exec /dev/shm
-
-set -x
-
-# run unit tests
-buck test ReactAndroid/src/test/... --config build.threads=$UNIT_TESTS_BUILD_THREADS
@@ -1,250 +0,0 @@
-#!/bin/bash
-
-set -ex
-
-# set default environment variables
-ROOT=$(pwd)
-SCRIPTS=$(pwd)/scripts
-
-RUN_ANDROID=0
-RUN_CLI_INSTALL=1
-RUN_IOS=0
-RUN_JS=0
-
-RETRY_COUNT=${RETRY_COUNT:-3}
-AVD_UUID=$(cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -n 1)
-
-ANDROID_NPM_DEPS="appium@1.5.1 mocha@2.4.5 wd@0.3.11 colors@1.0.3 pretty-data2@0.40.1"
-CLI_PACKAGE=$ROOT/react-native-cli/react-native-cli-*.tgz
-PACKAGE=$ROOT/react-native-*.tgz
-REACT_NATIVE_MAX_WORKERS=1
-
-# retries command on failure
-# $1 -- max attempts
-# $2 -- command to run
-function retry() {
-    local -r -i max_attempts="$1"; shift
-    local -r cmd="$@"
-    local -i attempt_num=1
-
-    until $cmd; do
-        if (( attempt_num == max_attempts )); then
-            echo "Execution of '$cmd' failed; no more attempts left"
-            return 1
-        else
-            (( attempt_num++ ))
-            echo "Execution of '$cmd' failed; retrying for attempt number $attempt_num..."
-        fi
-    done
-}
-
-# parse command line args & flags
-while :; do
-  case "$1" in
-    --android)
-      RUN_ANDROID=1
-      shift
-      ;;
-
-    --ios)
-      RUN_IOS=1
-      shift
-      ;;
-
-    --js)
-      RUN_JS=1
-      shift
-      ;;
-
-    --skip-cli-install)
-      RUN_CLI_INSTALL=0
-      shift
-      ;;
-
-    --tvos)
-      RUN_IOS=1
-      shift
-      ;;
-
-    *)
-      break
-  esac
-done
-
-function e2e_suite() {
-    cd $ROOT
-
-    if [ $RUN_ANDROID -eq 0 ] && [ $RUN_IOS -eq 0 ] && [ $RUN_JS -eq 0 ]; then
-      echo "No e2e tests specified!"
-      return 0
-    fi
-
-    # create temp dir
-    TEMP_DIR=$(mktemp -d /tmp/react-native-XXXXXXXX)
-
-    # To make sure we actually installed the local version
-    # of react-native, we will create a temp file inside the template
-    # and check that it exists after `react-native init
-    IOS_MARKER=$(mktemp $ROOT/local-cli/templates/HelloWorld/ios/HelloWorld/XXXXXXXX)
-    ANDROID_MARKER=$(mktemp ${ROOT}/local-cli/templates/HelloWorld/android/XXXXXXXX)
-
-    # install CLI
-    cd react-native-cli
-    npm pack
-    cd ..
-
-    # can skip cli install for non sudo mode
-    if [ $RUN_CLI_INSTALL -ne 0 ]; then
-      npm install -g $CLI_PACKAGE
-      if [ $? -ne 0 ]; then
-        echo "Could not install react-native-cli globally, please run in su mode"
-        echo "Or with --skip-cli-install to skip this step"
-        return 1
-      fi
-    fi
-
-    if [ $RUN_ANDROID -ne 0 ]; then
-        set +ex
-
-        # create virtual device
-        if ! android list avd | grep "$AVD_UUID" > /dev/null; then
-            echo no | android create avd -n $AVD_UUID -f -t android-19 --abi default/armeabi-v7a
-        fi
-
-        # newline at end of adb devices call and first line is headers
-        DEVICE_COUNT=$(adb devices | wc -l)
-        ((DEVICE_COUNT -= 2))
-
-        # will always kill an existing emulator if one exists for fresh setup
-        if [[ $DEVICE_COUNT -ge 1 ]]; then
-            adb emu kill
-        fi
-
-        # emulator setup
-        emulator64-arm -avd $AVD_UUID -no-skin -no-audio -no-window -no-boot-anim &
-
-        bootanim=""
-        until [[ "$bootanim" =~ "stopped" ]]; do
-            sleep 5
-            bootanim=$(adb -e shell getprop init.svc.bootanim 2>&1)
-            echo "boot animation status=$bootanim"
-        done
-
-        set -ex
-
-      ./gradlew :ReactAndroid:installArchives -Pjobs=1 -Dorg.gradle.jvmargs="-Xmx512m -XX:+HeapDumpOnOutOfMemoryError"
-      if [ $? -ne 0 ]; then
-        echo "Failed to compile Android binaries"
-        return 1
-      fi
-    fi
-
-    npm pack
-    if [ $? -ne 0 ]; then
-      echo "Failed to pack react-native"
-      return 1
-    fi
-
-    cd $TEMP_DIR
-
-    retry $RETRY_COUNT react-native init EndToEndTest --version $PACKAGE --npm
-    if [ $? -ne 0 ]; then
-      echo "Failed to execute react-native init"
-      echo "Most common reason is npm registry connectivity, try again"
-      return 1
-    fi
-
-    cd EndToEndTest
-
-    # android tests
-    if [ $RUN_ANDROID -ne 0 ]; then
-      echo "Running an Android e2e test"
-      echo "Installing e2e framework"
-
-      retry $RETRY_COUNT npm install --save-dev $ANDROID_NPM_DEPS --silent >> /dev/null
-      if [ $? -ne 0 ]; then
-        echo "Failed to install appium"
-        echo "Most common reason is npm registry connectivity, try again"
-        return 1
-      fi
-
-      cp $SCRIPTS/android-e2e-test.js android-e2e-test.js
-
-      cd android
-      echo "Downloading Maven deps"
-      ./gradlew :app:copyDownloadableDepsToLibs
-
-      cd ..
-      keytool -genkey -v -keystore android/keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"
-
-      echo "Starting packager server"
-      node ./node_modules/.bin/appium >> /dev/null &
-      APPIUM_PID=$!
-      echo "Starting appium server $APPIUM_PID"
-
-      echo "Building app"
-      buck build android/app
-
-      # hack to get node unhung (kill buckd)
-      kill -9 $(pgrep java)
-
-      if [ $? -ne 0 ]; then
-        echo "could not execute Buck build, is it installed and in PATH?"
-        return 1
-      fi
-
-      npm start >> /dev/null &
-      SERVER_PID=$!
-      sleep 15
-
-      echo "Executing android e2e test"
-      retry $RETRY_COUNT node node_modules/.bin/_mocha android-e2e-test.js
-      if [ $? -ne 0 ]; then
-        echo "Failed to run Android e2e tests"
-        echo "Most likely the code is broken"
-        return 1
-      fi
-
-      # kill packager process
-      if kill -0 $SERVER_PID; then
-        echo "Killing packager $SERVER_PID"
-        kill -9 $SERVER_PID
-      fi
-
-      # kill appium process
-      if kill -0 $APPIUM_PID; then
-        echo "Killing appium $APPIUM_PID"
-        kill -9 $APPIUM_PID
-      fi
-
-    fi
-
-    # ios tests
-    if [ $RUN_IOS -ne 0 ]; then
-      echo "Running ios e2e tests not yet implemented for docker!"
-    fi
-
-    # js tests
-    if [ $RUN_JS -ne 0 ]; then
-      # Check the packager produces a bundle (doesn't throw an error)
-      REACT_NATIVE_MAX_WORKERS=1 react-native bundle --platform android --dev true --entry-file index.android.js --bundle-output android-bundle.js
-      if [ $? -ne 0 ]; then
-        echo "Could not build android bundle"
-        return 1
-      fi
-
-      REACT_NATIVE_MAX_WORKERS=1 react-native bundle --platform ios --dev true --entry-file index.ios.js --bundle-output ios-bundle.js
-      if [ $? -ne 0 ]; then
-        echo "Could not build iOS bundle"
-        return 1
-      fi
-    fi
-
-    # directory cleanup
-    rm $IOS_MARKER
-    rm $ANDROID_MARKER
-
-    return 0
-}
-
-retry $RETRY_COUNT e2e_suite
@@ -1,65 +0,0 @@
-#!/bin/bash
-
-# Python script to run instrumentation tests, copied from https://github.com/circleci/circle-dummy-android
-# Example: ./scripts/run-android-instrumentation-tests.sh com.facebook.react.tests com.facebook.react.tests.ReactPickerTestCase
-#
-export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH"
-
-# clear the logs
-adb logcat -c
-
-# run tests and check output
-python - $1 $2 << END
-
-import re
-import subprocess as sp
-import sys
-import threading
-import time
-
-done = False
-
-test_app = sys.argv[1]
-test_class = None
-
-if len(sys.argv) > 2:
-  test_class = sys.argv[2]
-  
-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..."
-
-t = threading.Thread(target=update)
-t.dameon = True
-t.start()
-
-def run():
-  sp.Popen(['adb', 'wait-for-device']).communicate()
-  if (test_class != None):
-    p = sp.Popen('adb shell am instrument -w -e class %s %s/android.support.test.runner.AndroidJUnitRunner' 
-      % (test_class, test_app), shell=True, stdout=sp.PIPE, stderr=sp.PIPE, stdin=sp.PIPE)
-  else :
-    p = sp.Popen('adb shell am instrument -w %s/android.support.test.runner.AndroidJUnitRunner' 
-      % (test_app), shell=True, stdout=sp.PIPE, stderr=sp.PIPE, stdin=sp.PIPE)
-  return p.communicate()
-
-success = re.compile(r'OK \(\d+ test(s)?\)')
-stdout, stderr = run()
-
-done = True
-print stderr
-print stdout
-
-if success.search(stderr + stdout):
-  sys.exit(0)
-else:
-  # dump the logs
-  sp.Popen(['adb', 'logcat', '-d']).communicate()
-  sys.exit(1) # make sure we fail if the test failed
-END
-
-RETVAL=$?
-
-exit $RETVAL
@@ -1,96 +0,0 @@
-# Dockerfile Tests
-
-This is a high level overview of the test configuration using docker. It explains how to run the tests locally
-and how they integrate with the Jenkins Pipeline script to run the automated tests on ContainerShip <https://www.containership.io/>.
-
-## Docker Installation
-
-It is required to have Docker running on your machine in order to build and run the tests in the Dockerfiles.
-See <https://docs.docker.com/engine/installation/> for more information on how to install.
-
-## Convenience NPM Run Scripts
-
-We have added a number of default run scripts to the `package.json` file to simplify building and running your tests.
-
-`npm run test-android-setup` - Pulls down the base android docker image used for running the tests
-
-`npm run test-android-build` - Builds the docker image used to run the tests
-
-`npm run test-android-run-unit` - Runs all the unit tests that have been built in the latest react/android docker image (note: you need to run test-android-build before executing this, if the image does not exist it will fail)
-
-`npm run test-android-run-instrumentation` - Runs all the instrumentation tests that have been built in the latest react/android docker image (note: you need to run test-android-build before executing this, if the image does not exist it will fail). You can also pass additional flags to filter which tests instrumentation tests are run. Ex: `npm run test-android-run-instrumentation -- --filter=TestIdTestCase` to only run the TestIdTestCase instrumentation test. See below for more information
-on the instrumentation test flags.
-
-`npm run test-android-run-e2e` - Runs all the end to end tests that have been built in the latest react/android docker image (note: you need to run test-android-build before executing this, if the image does not exist it will fail)
-
-`npm run test-android-unit` - Builds and runs the android unit tests.
-
-`npm run test-android-instrumentation` - Builds and runs the android instrumentation tests.
-
-`npm run test-android-e2e` - Builds and runs the android end to end tests.
-
-## Detailed Android Setup
-
-There are two Dockerfiles for use with the Android codebase.
-
-The `Dockerfile.android-base` contains all the necessary prerequisites required to run the React Android tests. It is
-separated out into a separate Dockerfile because these are dependencies that rarely change and also because it is quite
-a beastly image since it contains all the Android depedencies for running android and the emulators (~9GB).
-
-The good news is you should rarely have to build or pull down the base image! All iterative code updates happen as
-part of the `Dockerfile.android` image build.
-
-So step one...
-
-`docker pull containership/android-base:latest`
-
-This will take quite some time depending on your connection and you need to ensure you have ~10GB of free disk space.
-
-Once this is done, you can run tests locally by executing two simple commands:
-
-1. `docker build -t react/android -f ./ContainerShip/Dockerfile.android .`
-2. `docker run --cap-add=SYS_ADMIN -it react/android bash ContainerShip/scripts/run-android-docker-unit-tests.sh`
-
-> Note: `--cap-add=SYS_ADMIN` flag is required for the `ContainerShip/scripts/run-android-docker-unit-tests.sh` and
-`ContainerShip/scripts/run-android-docker-instrumentation-tests.sh` in order to allow the remounting of `/dev/shm` as writeable
-so the `buck` build system may write temporary output to that location
-
-Every time you make any modifications to the codebase, you should re-run the `docker build ...` command in order for your
-updates to be included in your local docker image.
-
-The following shell scripts have been provided for android testing:
-
-`ContainerShip/scripts/run-android-docker-unit-tests.sh` - Runs the standard android unit tests
-
-`ContainerShip/scripts/run-android-docker-instrumentation-tests.sh` - Runs the android instrumentation tests on the emulator. *Note* that these
-tests take quite some time to run so there are various flags you can pass in order to filter which tests are run (see below)
-
-`ContainerShip/scripts/run-ci-e2e-tests.sh` - Runs the android end to end tests
-
-#### ContainerShip/scripts/run-android-docker-instrumentation-tests.sh
-
-The instrumentation test script accepts the following flags in order to customize the execution of the tests:
-
-`--filter` - A regex that filters which instrumentation tests will be run. (Defaults to .*)
-
-`--package` - Name of the java package containing the instrumentation tests (Defaults to com.facebook.react.tests)
-
-`--path` - Path to the directory containing the instrumentation tests. (Defaults to ./ReactAndroid/src/androidTest/java/com/facebook/react/tests)
-
-`--retries` - Number of times to retry a failed test before declaring a failure (Defaults to 2)
-
-For example, if locally you only wanted to run the InitialPropsTestCase, you could do the following:
-
-`docker run --cap-add=SYS_ADMIN -it react/android bash ContainerShip/scripts/run-android-docker-instrumentation-tests.sh --filter="InitialPropsTestCase"`
-
-# Javascript Setup
-
-There is a single Dockerfile for use with the javascript codebase.
-
-The `Dockerfile.javascript` base requires all the necessary dependencies for running Javascript tests.
-
-Any time you make an update to the codebase, you can build and run the javascript tests with the following three commands:
-
-1. `docker build -t react/js -f ./ContainerShip/Dockerfile.javascript .`
-2. `docker run -it react/js yarn test --maxWorkers=4`
-3. `docker run -it react/js yarn run flow -- check`
@@ -14,8 +14,6 @@
 		1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1461632C1AC3E22900C2F5AD /* libReact.a */; };
 		5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F82F1771B85784500FAE87E /* libRCTWebSocket.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
-		E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */; };
-		E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D7561D4EE534000B7DA8 /* libRCTImage.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -40,20 +38,6 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
-		E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
-		E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
-			remoteInfo = RCTImage;
-		};
 /* End PBXContainerItemProxy section */

 /* Begin PBXFileReference section */
@@ -67,8 +51,6 @@
 		146163271AC3E22900C2F5AD /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
-		E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -76,8 +58,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */,
-				E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */,
 				1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
@@ -119,8 +99,6 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */,
-				E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */,
 				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
@@ -155,22 +133,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		E730D7481D4EE4D0000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		E730D7521D4EE534000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D7561D4EE534000B7DA8 /* libRCTImage.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */

 /* Begin PBXNativeTarget section */
@@ -181,7 +143,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				68ACCCD51D2BE2D2008E368A /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -213,14 +174,6 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
-				{
-					ProductGroup = E730D7521D4EE534000B7DA8 /* Products */;
-					ProjectRef = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
-				},
-				{
-					ProductGroup = E730D7481D4EE4D0000B7DA8 /* Products */;
-					ProjectRef = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
-				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -263,20 +216,6 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		E730D7561D4EE534000B7DA8 /* libRCTImage.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTImage.a;
-			remoteRef = E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 /* End PBXReferenceProxy section */

 /* Begin PBXResourcesBuildPhase section */
@@ -291,23 +230,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		68ACCCD51D2BE2D2008E368A /* Run Script */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Run Script";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/2048/Game2048.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -415,7 +337,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -455,7 +377,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -14,14 +14,41 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/2048/Game2048" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Game2048"
@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule MovieCell
 */
 'use strict';

@@ -32,8 +31,8 @@ var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
 var getTextFromScore = require('./getTextFromScore');

-class MovieCell extends React.Component {
-  render() {
+var MovieCell = React.createClass({
+  render: function() {
    var criticsScore = this.props.movie.ratings.critics_score;
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
@@ -67,7 +66,7 @@ class MovieCell extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  textContainer: {
@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule MovieScreen
 */
 'use strict';

@@ -30,8 +29,8 @@ var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
 var getTextFromScore = require('./getTextFromScore');

-class MovieScreen extends React.Component {
-  render() {
+var MovieScreen = React.createClass({
+  render: function() {
    return (
      <ScrollView contentContainerStyle={styles.contentContainer}>
        <View style={styles.mainSection}>
@@ -58,11 +57,11 @@ class MovieScreen extends React.Component {
        <Cast actors={this.props.movie.abridged_cast} />
      </ScrollView>
    );
-  }
-}
+  },
+});

-class Ratings extends React.Component {
-  render() {
+var Ratings = React.createClass({
+  render: function() {
    var criticsScore = this.props.ratings.critics_score;
    var audienceScore = this.props.ratings.audience_score;

@@ -82,11 +81,11 @@ class Ratings extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

-class Cast extends React.Component {
-  render() {
+var Cast = React.createClass({
+  render: function() {
    if (!this.props.actors) {
      return null;
    }
@@ -101,8 +100,8 @@ class Cast extends React.Component {
        )}
      </View>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  contentContainer: {
@@ -200,7 +200,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				68ACCCEE1D2BE57F008E368A /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -321,22 +320,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		68ACCCEE1D2BE57F008E368A /* ShellScript */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/Movies/MoviesApp.ios.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -446,7 +429,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -486,7 +469,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -3,23 +3,9 @@
   LastUpgradeVersion = "0700"
   version = "1.3">
   <BuildAction
-      parallelizeBuildables = "NO"
+      parallelizeBuildables = "YES"
      buildImplicitDependencies = "YES">
      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
-               BuildableName = "libReact.a"
-               BlueprintName = "React"
-               ReferencedContainer = "container:../../React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
         <BuildActionEntry
            buildForTesting = "YES"
            buildForRunning = "YES"
@@ -37,10 +23,10 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
      <Testables>
      </Testables>
      <MacroExpansion>
@@ -56,11 +42,11 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
      debugServiceExtension = "internal"
@@ -79,10 +65,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
-      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -14,7 +14,6 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"

@@ -22,7 +21,35 @@

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/Movies/MoviesApp.ios" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MoviesApp"
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -25,8 +18,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  AppRegistry,
  BackAndroid,
@@ -59,11 +50,7 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
      <View style={{flex: 1}}>
        <ToolbarAndroid
          actions={[]}
-          navIcon={nativeImageSource({
-            android: 'android_back_white',
-            width: 96,
-            height: 96
-          })}
+          navIcon={require('image!android_back_white')}
          onIconClicked={navigationOperations.pop}
          style={styles.toolbar}
          titleColor="white"
@@ -78,8 +65,8 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
  }
 };

-class MoviesApp extends React.Component {
-  render() {
+var MoviesApp = React.createClass({
+  render: function() {
    var initialRoute = {name: 'search'};
    return (
      <Navigator
@@ -90,7 +77,7 @@ class MoviesApp extends React.Component {
      />
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -26,8 +26,8 @@ var {

 var SearchScreen = require('./SearchScreen');

-class MoviesApp extends React.Component {
-  render() {
+var MoviesApp = React.createClass({
+  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
@@ -38,7 +38,7 @@ class MoviesApp extends React.Component {
      />
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -17,7 +17,7 @@ Mac OS and Xcode are required.
 - Open `Examples/Movies/Movies.xcodeproj` in Xcode
 - Hit the Run button

-See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.
+See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.

 ### Running on Android

@@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._

 Open the Movies app in your emulator.

-See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.
+See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.

 ### Running with Buck

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -25,8 +18,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Image,
  Platform,
@@ -39,8 +30,8 @@ var {

 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;

-class SearchBar extends React.Component {
-  render() {
+var SearchBar = React.createClass({
+  render: function() {
    var background = IS_RIPPLE_EFFECT_SUPPORTED ?
      TouchableNativeFeedback.SelectableBackgroundBorderless() :
      TouchableNativeFeedback.SelectableBackground();
@@ -51,11 +42,7 @@ class SearchBar extends React.Component {
            onPress={() => this.refs.input && this.refs.input.focus()}>
          <View>
            <Image
-              source={nativeImageSource({
-                android: 'android_search_white',
-                width: 96,
-                height: 96
-              })}
+              source={require('image!android_search_white')}
              style={styles.icon}
            />
          </View>
@@ -80,7 +67,7 @@ class SearchBar extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  searchBar: {
@@ -25,8 +25,8 @@ var {
  View,
 } = ReactNative;

-class SearchBar extends React.Component {
-  render() {
+var SearchBar = React.createClass({
+  render: function() {
    return (
      <View style={styles.searchBar}>
        <TextInput
@@ -44,7 +44,7 @@ class SearchBar extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  searchBar: {
@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule SearchScreen
 */
 'use strict';

@@ -300,7 +299,7 @@ var SearchScreen = React.createClass({
        onEndReached={this.onEndReached}
        automaticallyAdjustContentInsets={false}
        keyboardDismissMode="on-drag"
-        keyboardShouldPersistTaps="handled"
+        keyboardShouldPersistTaps={true}
        showsVerticalScrollIndicator={false}
      />;

@@ -319,8 +318,8 @@ var SearchScreen = React.createClass({
  },
 });

-class NoMovies extends React.Component {
-  render() {
+var NoMovies = React.createClass({
+  render: function() {
    var text = '';
    if (this.props.filter) {
      text = `No results for "${this.props.filter}"`;
@@ -336,7 +335,7 @@ class NoMovies extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -1,31 +1,31 @@
-include_defs("//ReactAndroid/DEFS")
+include_defs('//ReactAndroid/DEFS')

 android_binary(
-    name = "app",
-    keystore = "//keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    deps = [
-        ":movies-lib",
-    ],
+  name = 'app',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//keystores:debug',
+  deps = [
+    ':movies-lib',
+  ],
 )

 android_library(
-    name = "movies-lib",
-    srcs = glob(["src/main/java/**/*.java"]),
-    deps = [
-        ":res",
-        react_native_dep("third-party/java/jsr-305:jsr-305"),
-        react_native_target("java/com/facebook/react:react"),
-        react_native_target("java/com/facebook/react/modules/core:core"),
-        react_native_target("java/com/facebook/react/shell:shell"),
-        react_native_target("jni/prebuilt:android-jsc"),
-        # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
-        react_native_target("jni/prebuilt:reactnative-libs"),
-    ],
+  name = 'movies-lib',
+  srcs = glob(['src/main/java/**/*.java']),
+  deps = [
+    ':res',
+    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    react_native_target('java/com/facebook/react/modules/core:core'),
+    react_native_target('java/com/facebook/react/shell:shell'),
+    react_native_target('java/com/facebook/react:react'),
+    react_native_target('jni/prebuilt:android-jsc'),
+    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
+    react_native_target('jni/prebuilt:reactnative-libs'),
+  ],
 )

 android_resource(
-    name = "res",
-    package = "com.facebook.react.movies",
-    res = "src/main/res",
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.facebook.react.movies',
 )
@@ -39,7 +39,7 @@ public class MoviesApplication extends Application implements ReactApplication {
    }

    @Override
-    public boolean getUseDeveloperSupport() {
+    protected boolean getUseDeveloperSupport() {
      return true;
    }

@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule getImageSource
 */
 'use strict';

@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule getStyleFromScore
 */
 'use strict';

@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule getTextFromScore
 */
 'use strict';

@@ -16,7 +16,6 @@
 		58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C5724D1AA6224400CDF9C8 /* libRCTText.a */; };
 		5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */; };
 		832044981B492C2500E297FC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832044951B492C1E00E297FC /* libRCTSettings.a */; };
-		E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -55,13 +54,6 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTSettings;
 		};
-		E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
 /* End PBXContainerItemProxy section */

 /* Begin PBXFileReference section */
@@ -77,7 +69,6 @@
 		587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -85,7 +76,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */,
 				144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */,
 				1341803E1AA91802003F314A /* libRCTImage.a in Frameworks */,
@@ -129,7 +119,6 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */,
 				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
@@ -182,14 +171,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		E730D7691D4EE5FC000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */

 /* Begin PBXNativeTarget section */
@@ -200,7 +181,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				681C70ED1D2BE73C00E71791 /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -236,10 +216,6 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
-				{
-					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
-					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -300,13 +276,6 @@
 			remoteRef = 832044941B492C1E00E297FC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 /* End PBXReferenceProxy section */

 /* Begin PBXResourcesBuildPhase section */
@@ -321,22 +290,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		681C70ED1D2BE73C00E71791 /* ShellScript */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/TicTacToe/TicTacToeApp.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -444,7 +397,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -484,7 +437,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -3,23 +3,9 @@
   LastUpgradeVersion = "0700"
   version = "1.3">
   <BuildAction
-      parallelizeBuildables = "NO"
+      parallelizeBuildables = "YES"
      buildImplicitDependencies = "YES">
      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
-               BuildableName = "libReact.a"
-               BlueprintName = "React"
-               ReferencedContainer = "container:../../React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
         <BuildActionEntry
            buildForTesting = "YES"
            buildForRunning = "YES"
@@ -37,10 +23,10 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
      <Testables>
      </Testables>
      <MacroExpansion>
@@ -56,11 +42,11 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
      debugServiceExtension = "internal"
@@ -79,10 +65,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
-      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -14,14 +14,41 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/TicTacToe/TicTacToeApp" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TicTacToeApp"
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -101,7 +94,7 @@ class Board {
  }
 }

-class Cell extends React.Component {
+var Cell = React.createClass({
  cellStyle() {
    switch (this.props.player) {
      case 1:
@@ -111,7 +104,7 @@ class Cell extends React.Component {
      default:
        return null;
    }
-  }
+  },

  textStyle() {
    switch (this.props.player) {
@@ -122,7 +115,7 @@ class Cell extends React.Component {
      default:
        return {};
    }
-  }
+  },

  textContents() {
    switch (this.props.player) {
@@ -133,7 +126,7 @@ class Cell extends React.Component {
      default:
        return '';
    }
-  }
+  },

  render() {
    return (
@@ -149,16 +142,16 @@ class Cell extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

-class GameEndOverlay extends React.Component {
+var GameEndOverlay = React.createClass({
  render() {
    var board = this.props.board;

    var tie = board.tie();
    var winner = board.winner();
    if (!winner && !tie) {
-      return null;
+      return <View />;
    }

    var message;
@@ -182,7 +175,7 @@ class GameEndOverlay extends React.Component {
      </View>
    );
  }
-}
+});

 var TicTacToeApp = React.createClass({
  getInitialState() {
@@ -265,6 +258,7 @@ var styles = StyleSheet.create({
    borderRadius: 5,
    backgroundColor: '#7b8994',
    margin: 5,
+    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
@@ -1,31 +0,0 @@
-include_defs("//ReactAndroid/DEFS")
-
-android_binary(
-    name = "app",
-    keystore = "//keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    deps = [
-        ":tictactoe-lib",
-    ],
-)
-
-android_library(
-    name = "tictactoe-lib",
-    srcs = glob(["src/main/java/**/*.java"]),
-    deps = [
-        ":res",
-        react_native_dep("third-party/java/jsr-305:jsr-305"),
-        react_native_target("java/com/facebook/react:react"),
-        react_native_target("java/com/facebook/react/modules/core:core"),
-        react_native_target("java/com/facebook/react/shell:shell"),
-        react_native_target("jni/prebuilt:android-jsc"),
-        # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
-        react_native_target("jni/prebuilt:reactnative-libs"),
-    ],
-)
-
-android_resource(
-    name = "res",
-    package = "com.facebook.react.tictactoe",
-    res = "src/main/res",
-)
@@ -1,31 +0,0 @@
-apply plugin: 'com.android.application'
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-        applicationId "com.facebook.react.tictactoe"
-        minSdkVersion 16
-        targetSdkVersion 22
-        versionCode 1
-        versionName "1.0"
-        ndk {
-            abiFilters "armeabi-v7a", "x86"
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:23.0.1'
-
-    // Build React Native from source
-    compile project(':ReactAndroid')
-}
@@ -1 +0,0 @@
-android.useDeprecatedNdk=true
@@ -1,17 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
@@ -1,30 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.tictactoe"
-    android:versionCode="1"
-    android:versionName="1.0">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <uses-sdk
-      android:minSdkVersion="16"
-      android:targetSdkVersion="22" />
-
-    <application
-      android:name=".TicTacToeApplication"
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:icon="@drawable/launcher_icon"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".TicTacToeActivity">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
-</manifest>
@@ -1,58 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-package com.facebook.react.tictactoe;
-
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-import javax.annotation.Nullable;
-
-public class TicTacToeApplication extends Application implements ReactApplication {
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public String getJSMainModuleName() {
-      return "Examples/TicTacToe/TicTacToeApp";
-    }
-
-    @Override
-    public @Nullable String getBundleAssetName() {
-      return "TicTacToeApp.bundle";
-    }
-
-    @Override
-    public boolean getUseDeveloperSupport() {
-      return true;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-        new MainReactPackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-}
@@ -1,12 +0,0 @@
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".TicTacToeApp">
-
-    <com.facebook.react.ReactRootView
-      android:layout_width="match_parent"
-      android:layout_height="match_parent"
-      android:id="@+id/react_root_view"/>
-
-</RelativeLayout>
@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">TicTacToeApp</string>
-</resources>
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -18,14 +11,12 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @providesModule AccessibilityAndroidExample
 */
 'use strict';

 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  AccessibilityInfo,
  StyleSheet,
  Text,
  View,
@@ -38,61 +29,40 @@ var UIExplorerPage = require('./UIExplorerPage');

 var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];

-class AccessibilityAndroidExample extends React.Component {
-  static title = 'Accessibility';
-  static description = 'Examples of using Accessibility API.';
+var AccessibilityAndroidExample = React.createClass({

-  state = {
-    count: 0,
-    backgroundImportantForAcc: 0,
-    forgroundImportantForAcc: 0,
-    screenReaderEnabled: false,
-  };
+  statics: {
+    title: 'Accessibility',
+    description: 'Examples of using Accessibility API.',
+  },

-  componentDidMount() {
-    AccessibilityInfo.addEventListener(
-      'change',
-      this._handleScreenReaderToggled
-    );
-    AccessibilityInfo.fetch().done((isEnabled) => {
-      this.setState({
-        screenReaderEnabled: isEnabled
-      });
-    });
-  }
+  getInitialState: function() {
+    return {
+      count: 0,
+      backgroundImportantForAcc: 0,
+      forgroundImportantForAcc: 0,
+    };
+  },

-  componentWillUnmount() {
-    AccessibilityInfo.removeEventListener(
-      'change',
-      this._handleScreenReaderToggled
-    );
-  }
-
-  _handleScreenReaderToggled = (isEnabled) => {
-    this.setState({
-      screenReaderEnabled: isEnabled,
-    });
-  }
-
-  _addOne = () => {
+  _addOne: function() {
    this.setState({
      count: ++this.state.count,
    });
-  };
+  },

-  _changeBackgroundImportantForAcc = () => {
+  _changeBackgroundImportantForAcc: function() {
    this.setState({
      backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
    });
-  };
+  },

-  _changeForgroundImportantForAcc = () => {
+  _changeForgroundImportantForAcc: function() {
    this.setState({
      forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
      <UIExplorerPage title={'Accessibility'}>

@@ -152,12 +122,6 @@ class AccessibilityAndroidExample extends React.Component {
          </Text>
        </UIExplorerBlock>

-        <UIExplorerBlock title="Check if the screen reader is enabled">
-          <Text>
-            The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
-          </Text>
-        </UIExplorerBlock>
-
        <UIExplorerBlock title="Overlapping views and importantForAccessibility property">
          <View style={styles.container}>
            <View
@@ -231,8 +195,8 @@ class AccessibilityAndroidExample extends React.Component {

      </UIExplorerPage>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
   embedded: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,19 +12,17 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AccessibilityIOSExample
 */
 'use strict';

 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  AccessibilityInfo,
  Text,
  View,
 } = ReactNative;

-class AccessibilityIOSExample extends React.Component {
+var AccessibilityIOSExample = React.createClass({
  render() {
    return (
      <View>
@@ -62,59 +53,14 @@ class AccessibilityIOSExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
-
-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>
-    );
-  }
-}
+  },
+});

 exports.title = 'AccessibilityIOS';
 exports.description = 'Interface to show iOS\' accessibility samples';
 exports.examples = [
  {
    title: 'Accessibility elements',
-    render(): React.Element<any> { return <AccessibilityIOSExample />; }
-  },
-  {
-    title: 'Check if the screen reader is enabled',
-    render(): React.Element<any> { return <ScreenReaderStatusExample />; }
+    render(): ReactElement<any> { return <AccessibilityIOSExample />; }
  },
 ];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ActionSheetIOSExample
 */
 'use strict';

@@ -43,10 +35,12 @@ var BUTTONS = [
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;

-class ActionSheetExample extends React.Component {
-  state = {
-    clicked: 'none',
-  };
+var ActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },

  render() {
    return (
@@ -59,9 +53,9 @@ class ActionSheetExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -70,13 +64,15 @@ class ActionSheetExample extends React.Component {
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
-  };
-}
+  }
+});

-class ActionSheetTintExample extends React.Component {
-  state = {
-    clicked: 'none',
-  };
+var ActionSheetTintExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },

  render() {
    return (
@@ -89,9 +85,9 @@ class ActionSheetTintExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -101,13 +97,15 @@ class ActionSheetTintExample extends React.Component {
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
-  };
-}
+  }
+});

-class ShareActionSheetExample extends React.Component {
-  state = {
-    text: ''
-  };
+var ShareActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },

  render() {
    return (
@@ -120,9 +118,9 @@ class ShareActionSheetExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showShareActionSheet = () => {
+  showShareActionSheet() {
    ActionSheetIOS.showShareActionSheetWithOptions({
      url: this.props.url,
      message: 'message to go with the shared url',
@@ -132,22 +130,24 @@ class ShareActionSheetExample extends React.Component {
      ]
    },
    (error) => alert(error),
-    (completed, method) => {
+    (success, method) => {
      var text;
-      if (completed) {
+      if (success) {
        text = `Shared via ${method}`;
      } else {
        text = 'You didn\'t share';
      }
      this.setState({text});
    });
-  };
-}
+  }
+});

-class ShareScreenshotExample extends React.Component {
-  state = {
-    text: ''
-  };
+var ShareScreenshotExample = React.createClass({
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },

  render() {
    return (
@@ -160,9 +160,9 @@ class ShareScreenshotExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showShareActionSheet = () => {
+  showShareActionSheet() {
    // Take the snapshot (returns a temp file uri)
    UIManager.takeSnapshot('window').then((uri) => {
      // Share image data
@@ -173,9 +173,9 @@ class ShareScreenshotExample extends React.Component {
        ]
      },
      (error) => alert(error),
-      (completed, method) => {
+      (success, method) => {
        var text;
-        if (completed) {
+        if (success) {
          text = `Shared via ${method}`;
        } else {
          text = 'You didn\'t share';
@@ -183,8 +183,8 @@ class ShareScreenshotExample extends React.Component {
        this.setState({text});
      });
    }).catch((error) => alert(error));
-  };
-}
+  }
+});

 var style = StyleSheet.create({
  button: {
@@ -198,27 +198,27 @@ exports.description = 'Interface to show iOS\' action sheets';
 exports.examples = [
  {
    title: 'Show Action Sheet',
-    render(): React.Element<any> { return <ActionSheetExample />; }
+    render(): ReactElement<any> { return <ActionSheetExample />; }
  },
  {
    title: 'Show Action Sheet with tinted buttons',
-    render(): React.Element<any> { return <ActionSheetTintExample />; }
+    render(): ReactElement<any> { return <ActionSheetTintExample />; }
  },
  {
    title: 'Show Share Action Sheet',
-    render(): React.Element<any> {
+    render(): ReactElement<any> {
      return <ShareActionSheetExample url="https://code.facebook.com" />;
    }
  },
  {
    title: 'Share Local Image',
-    render(): React.Element<any> {
+    render(): ReactElement<any> {
      return <ShareActionSheetExample url="bunny.png" />;
    }
  },
  {
    title: 'Share Screenshot',
-    render(): React.Element<any> {
+    render(): ReactElement<any> {
      return <ShareScreenshotExample />;
    }
  }
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,47 +12,37 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ActivityIndicatorExample
 */
 'use strict';

-import React, { Component } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+} = ReactNative;
+const TimerMixin = require('react-timer-mixin');

-/**
- * Optional Flowtype state and timer types definition
- */
-type State = { animating: boolean; };
-type Timer = number;
+const ToggleAnimatingActivityIndicator = React.createClass({
+  mixins: [TimerMixin],

-class ToggleAnimatingActivityIndicator extends Component {
-  /**
-   * Optional Flowtype state and timer types
-   */
-  state: State;
-  _timer: Timer;
-
-  constructor(props) {
-    super(props);
-    this.state = {
+  getInitialState() {
+    return {
      animating: true,
    };
-  }
-
-  componentDidMount() {
-    this.setToggleTimeout();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this._timer);
-  }
+  },

  setToggleTimeout() {
-    this._timer = setTimeout(() => {
+    this.setTimeout(() => {
      this.setState({animating: !this.state.animating});
      this.setToggleTimeout();
    }, 2000);
-  }
+  },
+
+  componentDidMount() {
+    this.setToggleTimeout();
+  },

  render() {
    return (
@@ -70,9 +53,7 @@ class ToggleAnimatingActivityIndicator extends Component {
      />
    );
  }
-}
-
-
+});

 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -125,8 +106,8 @@ exports.examples = [
      return (
        <ActivityIndicator
          style={[styles.centering, styles.gray]}
-          size="large"
          color="white"
+          size="large"
        />
      );
    }
@@ -173,21 +154,8 @@ exports.examples = [
      );
    }
  },
-  {
-    platform: 'android',
-    title: 'Custom size (size: 75)',
-    render() {
-      return (
-        <ActivityIndicator
-          style={styles.centering}
-          size={75}
-        />
-      );
-    }
-  },
 ];

-
 const styles = StyleSheet.create({
  centering: {
    alignItems: 'center',
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AdSupportIOSExample
 */
 'use strict';

@@ -39,19 +31,21 @@ exports.description = 'Example of using the ad support API.';
 exports.examples = [
  {
    title: 'Ad Support IOS',
-    render: function(): React.Element<any> {
+    render: function(): ReactElement<any> {
      return <AdSupportIOSExample />;
    },
  }
 ];

-class AdSupportIOSExample extends React.Component {
-  state = {
-    deviceID: 'No IDFA yet',
-    hasAdvertiserTracking: 'unset',
-  };
+var AdSupportIOSExample = React.createClass({
+  getInitialState: function() {
+    return {
+      deviceID: 'No IDFA yet',
+      hasAdvertiserTracking: 'unset',
+    };
+  },

-  componentDidMount() {
+  componentDidMount: function() {
    AdSupportIOS.getAdvertisingId(
      this._onDeviceIDSuccess,
      this._onDeviceIDFailure
@@ -61,33 +55,33 @@ class AdSupportIOSExample extends React.Component {
      this._onHasTrackingSuccess,
      this._onHasTrackingFailure
    );
-  }
+  },

-  _onHasTrackingSuccess = (hasTracking) => {
+  _onHasTrackingSuccess: function(hasTracking) {
    this.setState({
      'hasAdvertiserTracking': hasTracking,
    });
-  };
+  },

-  _onHasTrackingFailure = (e) => {
+  _onHasTrackingFailure: function(e) {
    this.setState({
      'hasAdvertiserTracking': 'Error!',
    });
-  };
+  },

-  _onDeviceIDSuccess = (deviceID) => {
+  _onDeviceIDSuccess: function(deviceID) {
    this.setState({
      'deviceID': deviceID,
    });
-  };
+  },

-  _onDeviceIDFailure = (e) => {
+  _onDeviceIDFailure: function(e) {
    this.setState({
      'deviceID': 'Error!',
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
      <View>
        <Text>
@@ -101,7 +95,7 @@ class AdSupportIOSExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  title: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -18,7 +11,6 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @providesModule AlertExample
 */

 'use strict';
@@ -42,8 +34,9 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after
 /**
 * Simple alert examples.
 */
-class SimpleAlertExampleBlock extends React.Component {
-  render() {
+var SimpleAlertExampleBlock = React.createClass({
+
+  render: function() {
    return (
      <View>
        <TouchableHighlight style={styles.wrapper}
@@ -107,40 +100,25 @@ class SimpleAlertExampleBlock extends React.Component {
            <Text>Alert with too many buttons</Text>
          </View>
        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            null,
-            [
-              {text: 'OK', onPress: () => console.log('OK Pressed!')},
-            ],
-            {
-              cancelable: false
-            }
-          )}>
-          <View style={styles.button}>
-            <Text>Alert that cannot be dismissed</Text>
-          </View>
-        </TouchableHighlight>
      </View>
    );
-  }
-}
+  },
+});

-class AlertExample extends React.Component {
-  static title = 'Alert';
-
-  static description = 'Alerts display a concise and informative message ' +
-  'and prompt the user to make a decision.';
-
-  render() {
+var AlertExample = React.createClass({
+  statics: {
+    title: 'Alert',
+    description: 'Alerts display a concise and informative message ' +
+    'and prompt the user to make a decision.',
+  },
+  render: function() {
    return (
      <UIExplorerBlock title={'Alert'}>
        <SimpleAlertExampleBlock />
      </UIExplorerBlock>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  wrapper: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AlertIOSExample
 */
 'use strict';

@@ -46,7 +38,7 @@ exports.examples = [{
 },
 {
  title: 'Prompt Options',
-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    return <PromptOptions />;
  }
 },
@@ -145,17 +137,6 @@ class PromptOptions extends React.Component {
          </View>
        </TouchableHighlight>

-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Type a phone number', null, null, 'plain-text', undefined, 'phone-pad')}>
-
-          <View style={styles.button}>
-            <Text>
-              prompt with title & custom keyboard
-            </Text>
-          </View>
-        </TouchableHighlight>
-
        <TouchableHighlight
          style={styles.wrapper}
          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AnimatedExample
 */
 'use strict';

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -83,14 +76,13 @@ class Circle extends React.Component {
          y: gestureState.dy + this.props.restLayout.y,
        });
        this.props.onDeactivate();
-        this.state.pan.removeAllListeners();
      },
    })}, () => {
      this.props.onActivate();
    });
  }

-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    if (this.state.panResponder) {
      var handlers = this.state.panResponder.panHandlers;
      var dragStyle = {                 //  Used to position while dragging
@@ -191,7 +183,7 @@ class AnExApp extends React.Component {
    this._onMove = this._onMove.bind(this);
  }

-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    var circles = this.state.keys.map((key, idx) => {
      if (key === this.state.activeKey) {
        return <Circle key={key + 'd'} dummy={true} />;
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -27,6 +20,7 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -95,7 +89,7 @@ class AnExBobble extends React.Component {
    });
  }

-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    return (
      <View style={styles.bobbleContainer}>
        {this.state.bobbles.map((_, i) => {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -27,6 +20,7 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -69,27 +62,18 @@ class AnExScroll extends React.Component {
        <Animated.Image
          pointerEvents="none"
          style={[styles.bunny, {transform: [
-            {
-              translateX: this.state.scrollX.interpolate({
-                inputRange: [0, width, 2 * width],
-                outputRange: [0, 0, width / 3],
-                extrapolate: 'clamp',
-              }),
-            },
-            {
-              translateY: this.state.scrollX.interpolate({
-                inputRange: [0, width, 2 * width],
-                outputRange: [0, -200, -260],
-                extrapolate: 'clamp',
-              }),
-            },
-            {
-              scale: this.state.scrollX.interpolate({
-                inputRange: [0, width, 2 * width],
-                outputRange: [0.5, 0.5, 2],
-                extrapolate: 'clamp',
-              }),
-            },
+            {translateX: this.state.scrollX.interpolate({
+              inputRange: [0, width, 2 * width],
+              outputRange: [0, 0, width / 3]}),          //  multi-part ranges
+              extrapolate: 'clamp'},                     //  default is 'extend'
+            {translateY: this.state.scrollX.interpolate({
+              inputRange: [0, width, 2 * width],
+              outputRange: [0, -200, -260]}),
+              extrapolate: 'clamp'},
+            {scale: this.state.scrollX.interpolate({
+              inputRange: [0, width, 2 * width],
+              outputRange: [0.5, 0.5, 2]}),
+              extrapolate: 'clamp'},
          ]}]}
          source={BUNNY_PIC}
        />
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -52,7 +45,7 @@ class AnExSet extends React.Component {
      openColor: randColor(),
    };
  }
-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    var backgroundColor = this.props.openVal ?
      this.props.openVal.interpolate({
        inputRange: [0, 1],
@@ -98,13 +91,11 @@ class AnExSet extends React.Component {
          toValue: this.state.dismissY.interpolate({   // Track dismiss gesture
            inputRange: [0, 300],                      // and interpolate pixel distance
            outputRange: [1, 0],                       // to a fraction.
-          }),
-          useNativeDriver: true,
+          })
        }).start();
      },
      onPanResponderMove: Animated.event(
-        [null, {dy: this.state.dismissY}],             // track pan gesture
-        {useNativeDriver: true}
+        [null, {dy: this.state.dismissY}]              // track pan gesture
      ),
      onPanResponderRelease: (e, gestureState) => {
        if (gestureState.dy > 100) {
@@ -112,7 +103,6 @@ class AnExSet extends React.Component {
        } else {
          Animated.spring(this.props.openVal, {
            toValue: 1,                           // animate back open if released early
-            useNativeDriver: true,
          }).start();
        }
      },
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -27,8 +20,10 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
+  View,
 } = ReactNative;

 class AnExTilt extends React.Component {
@@ -95,7 +90,7 @@ class AnExTilt extends React.Component {
    this._startBurnsZoom();
  }

-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    return (
      <Animated.View
        {...this.state.tiltPanResponder.panHandlers}
@@ -123,7 +118,7 @@ class AnExTilt extends React.Component {
              },
            ],
          }}
-          source={require('./trees.jpg')}
+          source={NATURE_IMAGE}
        />
      </Animated.View>
    );
@@ -142,4 +137,6 @@ var styles = StyleSheet.create({
  },
 });

+var NATURE_IMAGE = {uri: 'http://www.deshow.net/d/file/travel/2009-04/scenic-beauty-of-nature-photography-2-504-4.jpg'};
+
 module.exports = AnExTilt;
@@ -31,36 +31,33 @@ const {
  View
 } = ReactNative;

-class AppStateSubscription extends React.Component {
-  state = {
-    appState: AppState.currentState,
-    previousAppStates: [],
-    memoryWarnings: 0,
-  };
-
-  componentDidMount() {
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppState.currentState,
+      previousAppStates: [],
+      memoryWarnings: 0,
+    };
+  },
+  componentDidMount: function() {
    AppState.addEventListener('change', this._handleAppStateChange);
    AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function() {
    AppState.removeEventListener('change', this._handleAppStateChange);
    AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  _handleMemoryWarning = () => {
+  },
+  _handleMemoryWarning: function() {
    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
-  };
-
-  _handleAppStateChange = (appState) => {
+  },
+  _handleAppStateChange: function(appState) {
    var previousAppStates = this.state.previousAppStates.slice();
    previousAppStates.push(this.state.appState);
    this.setState({
      appState,
      previousAppStates,
    });
-  };
-
+  },
  render() {
    if (this.props.showMemoryWarnings) {
      return (
@@ -82,7 +79,7 @@ class AppStateSubscription extends React.Component {
      </View>
    );
  }
-}
+});

 exports.title = 'AppState';
 exports.description = 'app background status';
@@ -95,16 +92,16 @@ exports.examples = [
  {
    title: 'Subscribed AppState:',
    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={true} />; }
+    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; }
  },
  {
    title: 'Previous states:',
-    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={false} />; }
+    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; }
  },
  {
    platform: 'ios',
    title: 'Memory Warnings',
    description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
-    render(): React.Element<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
+    render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
  },
 ];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AssetScaledImageExample
 */
 'use strict';

@@ -32,10 +24,13 @@ var {
  ScrollView
 } = ReactNative;

-class AssetScaledImageExample extends React.Component {
-  state = {
-    asset: this.props.asset
-  };
+var AssetScaledImageExample = React.createClass({
+
+  getInitialState() {
+    return {
+      asset: this.props.asset
+    };
+  },

  render() {
    var image = this.state.asset.node.image;
@@ -55,8 +50,8 @@ class AssetScaledImageExample extends React.Component {
        </View>
      </ScrollView>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  row: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule AsyncStorageExample
 */
 'use strict';

@@ -36,17 +28,12 @@ var PickerItemIOS = PickerIOS.Item;
 var STORAGE_KEY = '@AsyncStorageExample:key';
 var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];

-class BasicStorageExample extends React.Component {
-  state = {
-    selectedValue: COLORS[0],
-    messages: [],
-  };
-
+var BasicStorageExample = React.createClass({
  componentDidMount() {
    this._loadInitialState().done();
-  }
+  },

-  _loadInitialState = async () => {
+  async _loadInitialState() {
    try {
      var value = await AsyncStorage.getItem(STORAGE_KEY);
      if (value !== null){
@@ -58,7 +45,14 @@ class BasicStorageExample extends React.Component {
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },
+
+  getInitialState() {
+    return {
+      selectedValue: COLORS[0],
+      messages: [],
+    };
+  },

  render() {
    var color = this.state.selectedValue;
@@ -90,9 +84,9 @@ class BasicStorageExample extends React.Component {
        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
      </View>
    );
-  }
+  },

-  _onValueChange = async (selectedValue) => {
+  async _onValueChange(selectedValue) {
    this.setState({selectedValue});
    try {
      await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -100,27 +94,27 @@ class BasicStorageExample extends React.Component {
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },

-  _removeStorage = async () => {
+  async _removeStorage() {
    try {
      await AsyncStorage.removeItem(STORAGE_KEY);
      this._appendMessage('Selection removed from disk.');
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },

-  _appendMessage = (message) => {
+  _appendMessage(message) {
    this.setState({messages: this.state.messages.concat(message)});
-  };
-}
+  },
+});

 exports.title = 'AsyncStorage';
 exports.description = 'Asynchronous local disk storage.';
 exports.examples = [
  {
    title: 'Basics - getItem, setItem, removeItem',
-    render(): React.Element<any> { return <BasicStorageExample />; }
+    render(): ReactElement<any> { return <BasicStorageExample />; }
  },
 ];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,7 +10,6 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule BorderExample
 */
 'use strict';

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,7 +10,6 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule BoxShadowExample
 */
 'use strict';

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule CameraRollExample
 */
 'use strict';

@@ -36,26 +28,28 @@ const {
  TouchableOpacity
 } = ReactNative;

-const invariant = require('fbjs/lib/invariant');
-
 const CameraRollView = require('./CameraRollView');

 const AssetScaledImageExampleView = require('./AssetScaledImageExample');

-class CameraRollExample extends React.Component {
-  state = {
-    groupTypes: 'SavedPhotos',
-    sliderValue: 1,
-    bigImages: true,
-  };
-  _cameraRollView: ?CameraRollView;
+const CAMERA_ROLL_VIEW = 'camera_roll_view';
+
+const CameraRollExample = React.createClass({
+
+  getInitialState() {
+    return {
+      groupTypes: 'SavedPhotos',
+      sliderValue: 1,
+      bigImages: true,
+    };
+  },
+
  render() {
    return (
      <View>
        <Switch
          onValueChange={this._onSwitchChange}
-          value={this.state.bigImages}
-        />
+          value={this.state.bigImages} />
        <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
        <Slider
          value={this.state.sliderValue}
@@ -63,16 +57,16 @@ class CameraRollExample extends React.Component {
        />
        <Text>{'Group Type: ' + this.state.groupTypes}</Text>
        <CameraRollView
-          ref={(ref) => { this._cameraRollView = ref; }}
+          ref={CAMERA_ROLL_VIEW}
          batchSize={20}
          groupTypes={this.state.groupTypes}
          renderImage={this._renderImage}
        />
      </View>
    );
-  }
+  },

-  loadAsset = (asset) => {
+  loadAsset(asset){
    if (this.props.navigator) {
      this.props.navigator.push({
        title: 'Camera Roll Image',
@@ -81,13 +75,13 @@ class CameraRollExample extends React.Component {
        passProps: { asset: asset },
      });
    }
-  };
+  },

-  _renderImage = (asset) => {
+  _renderImage(asset) {
    const imageSize = this.state.bigImages ? 150 : 75;
    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const {location} = asset.node;
-    const locationStr = location ? JSON.stringify(location) : 'Unknown location';
+    const location = asset.node.location.longitude ?
+      JSON.stringify(asset.node.location) : 'Unknown location';
    return (
      <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
        <View style={styles.row}>
@@ -97,30 +91,29 @@ class CameraRollExample extends React.Component {
          />
          <View style={styles.info}>
            <Text style={styles.url}>{asset.node.image.uri}</Text>
-            <Text>{locationStr}</Text>
+            <Text>{location}</Text>
            <Text>{asset.node.group_name}</Text>
            <Text>{new Date(asset.node.timestamp).toString()}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
-  };
+  },

-  _onSliderChange = (value) => {
+  _onSliderChange(value) {
    const options = CameraRoll.GroupTypesOptions;
    const index = Math.floor(value * options.length * 0.99);
    const groupTypes = options[index];
    if (groupTypes !== this.state.groupTypes) {
      this.setState({groupTypes: groupTypes});
    }
-  };
+  },

-  _onSwitchChange = (value) => {
-    invariant(this._cameraRollView, 'ref should be set');
-    this._cameraRollView.rendererChanged();
+  _onSwitchChange(value) {
+    this.refs[CAMERA_ROLL_VIEW].rendererChanged();
    this.setState({ bigImages: value });
-  };
-}
+  }
+});

 const styles = StyleSheet.create({
  row: {
@@ -144,6 +137,6 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
 exports.examples = [
  {
    title: 'Photos',
-    render(): React.Element<any> { return <CameraRollExample />; }
+    render(): ReactElement<any> { return <CameraRollExample />; }
  }
 ];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -198,7 +191,7 @@ var CameraRollView = React.createClass({

  _renderFooterSpinner: function() {
    if (!this.state.noMore) {
-      return <ActivityIndicator />;
+      return <ActivityIndicator style={styles.spinner} />;
    }
    return null;
  },
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ClipboardExample
 */
 'use strict';

@@ -31,12 +23,14 @@ var {
  Text,
 } = ReactNative;

-class ClipboardExample extends React.Component {
-  state = {
-    content: 'Content will appear here'
-  };
+var ClipboardExample = React.createClass({
+  getInitialState() {
+    return {
+      content: 'Content will appear here'
+    };
+  },

-  _setClipboardContent = async () => {
+  async _setClipboardContent(){
    Clipboard.setString('Hello World');
    try {
      var content = await Clipboard.getString();
@@ -44,7 +38,7 @@ class ClipboardExample extends React.Component {
    } catch (e) {
      this.setState({content:e.message});
    }
-  };
+  },

  render() {
    return (
@@ -58,7 +52,7 @@ class ClipboardExample extends React.Component {
      </View>
    );
  }
-}
+});

 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,7 +10,6 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule DatePickerAndroidExample
 */
 'use strict';

@@ -33,28 +25,26 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

-class DatePickerAndroidExample extends React.Component {
-  static title = 'DatePickerAndroid';
-  static description = 'Standard Android date picker dialog';
+var DatePickerAndroidExample = React.createClass({

-  state = {
-    presetDate: new Date(2020, 4, 5),
-    simpleDate: new Date(2020, 4, 5),
-    spinnerDate: new Date(2020, 4, 5),
-    calendarDate: new Date(2020, 4, 5),
-    defaultDate: new Date(2020, 4, 5),
-    allDate: new Date(2020, 4, 5),
-    simpleText: 'pick a date',
-    spinnerText: 'pick a date',
-    calendarText: 'pick a date',
-    defaultText: 'pick a date',
-    minText: 'pick a date, no earlier than today',
-    maxText: 'pick a date, no later than today',
-    presetText: 'pick a date, preset to 2020/5/5',
-    allText: 'pick a date between 2020/5/1 and 2020/5/10',
-  };
+  statics: {
+    title: 'DatePickerAndroid',
+    description: 'Standard Android date picker dialog',
+  },

-  showPicker = async (stateKey, options) => {
+  getInitialState() {
+    return {
+      presetDate: new Date(2020, 4, 5),
+      allDate: new Date(2020, 4, 5),
+      simpleText: 'pick a date',
+      minText: 'pick a date, no earlier than today',
+      maxText: 'pick a date, no later than today',
+      presetText: 'pick a date, preset to 2020/5/5',
+      allText: 'pick a date between 2020/5/1 and 2020/5/10',
+    };
+  },
+
+  async showPicker(stateKey, options) {
    try {
      var newState = {};
      const {action, year, month, day} = await DatePickerAndroid.open(options);
@@ -69,7 +59,7 @@ class DatePickerAndroidExample extends React.Component {
    } catch ({code, message}) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
-  };
+  },

  render() {
    return (
@@ -80,24 +70,6 @@ class DatePickerAndroidExample extends React.Component {
            <Text style={styles.text}>{this.state.simpleText}</Text>
          </TouchableWithoutFeedback>
        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple spinner date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'spinner', {date: this.state.spinnerDate, mode: 'spinner'})}>
-            <Text style={styles.text}>{this.state.spinnerText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple calendar date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'calendar', {date: this.state.calendarDate, mode: 'calendar'})}>
-            <Text style={styles.text}>{this.state.calendarText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple default date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'default', {date: this.state.defaultDate, mode: 'default'})}>
-            <Text style={styles.text}>{this.state.defaultText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
        <UIExplorerBlock title="Date picker with pre-set date">
          <TouchableWithoutFeedback
            onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
@@ -134,8 +106,8 @@ class DatePickerAndroidExample extends React.Component {
          </UIExplorerBlock>
      </UIExplorerPage>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  text: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule DatePickerIOSExample
 */
 'use strict';

@@ -33,30 +25,34 @@ var {
  View,
 } = ReactNative;

-class DatePickerExample extends React.Component {
-  static defaultProps = {
-    date: new Date(),
-    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
-  };
+var DatePickerExample = React.createClass({
+  getDefaultProps: function () {
+    return {
+      date: new Date(),
+      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+    };
+  },

-  state = {
-    date: this.props.date,
-    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
-  };
+  getInitialState: function() {
+    return {
+      date: this.props.date,
+      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+    };
+  },

-  onDateChange = (date) => {
+  onDateChange: function(date) {
    this.setState({date: date});
-  };
+  },

-  onTimezoneChange = (event) => {
+  onTimezoneChange: function(event) {
    var offset = parseInt(event.nativeEvent.text, 10);
    if (isNaN(offset)) {
      return;
    }
    this.setState({timeZoneOffsetInHours: offset});
-  };
+  },

-  render() {
+  render: function() {
    // Ideally, the timezone input would be a picker rather than a
    // text input, but we don't have any pickers yet :(
    return (
@@ -100,11 +96,11 @@ class DatePickerExample extends React.Component {
        />
      </View>
    );
-  }
-}
+  },
+});

-class WithLabel extends React.Component {
-  render() {
+var WithLabel = React.createClass({
+  render: function() {
    return (
      <View style={styles.labelContainer}>
        <View style={styles.labelView}>
@@ -116,10 +112,10 @@ class WithLabel extends React.Component {
      </View>
    );
  }
-}
+});

-class Heading extends React.Component {
-  render() {
+var Heading = React.createClass({
+  render: function() {
    return (
      <View style={styles.headingContainer}>
        <Text style={styles.heading}>
@@ -128,7 +124,7 @@ class Heading extends React.Component {
      </View>
    );
  }
-}
+});

 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';
@@ -136,7 +132,7 @@ exports.description = 'Select dates and times using the native UIDatePicker.';
 exports.examples = [
 {
  title: '<DatePickerIOS>',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement<any> {
    return <DatePickerExample />;
  },
 }];
@@ -10,14 +10,22 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule ExampleTypes
+ * @flow
 */
-package com.facebook.react.tictactoe;
+'use strict';

-import com.facebook.react.ReactActivity;
+export type Example = {
+  title: string,
+  render: () => ?ReactElement<any>,
+  description?: string,
+  platform?: string;
+};

-public class TicTacToeActivity extends ReactActivity {
-  @Override
-  protected String getMainComponentName() {
-    return "TicTacToeApp";
-  }
-}
+export type ExampleModule = {
+  title: string;
+  description: string;
+  examples: Array<Example>;
+  external?: bool;
+};
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule GeolocationExample
 */
 /* eslint no-console: 0 */
 'use strict';
@@ -40,40 +32,42 @@ exports.description = 'Examples of using the Geolocation API.';
 exports.examples = [
  {
    title: 'navigator.geolocation',
-    render: function(): React.Element<any> {
+    render: function(): ReactElement<any> {
      return <GeolocationExample />;
    },
  }
 ];

-class GeolocationExample extends React.Component {
-  state = {
-    initialPosition: 'unknown',
-    lastPosition: 'unknown',
-  };
+var GeolocationExample = React.createClass({
+  watchID: (null: ?number),

-  watchID: ?number = null;
+  getInitialState: function() {
+    return {
+      initialPosition: 'unknown',
+      lastPosition: 'unknown',
+    };
+  },

-  componentDidMount() {
+  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        var initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
      },
-      (error) => alert(JSON.stringify(error)),
+      (error) => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      var lastPosition = JSON.stringify(position);
      this.setState({lastPosition});
    });
-  }
+  },

-  componentWillUnmount() {
+  componentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
-  }
+  },

-  render() {
+  render: function() {
    return (
      <View>
        <Text>
@@ -87,7 +81,7 @@ class GeolocationExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  title: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -25,8 +18,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Image,
  StyleSheet,
@@ -34,8 +25,8 @@ var {
  View,
 } = ReactNative;

-class ImageCapInsetsExample extends React.Component {
-  render() {
+var ImageCapInsetsExample = React.createClass({
+  render: function() {
    return (
      <View>
        <View style={styles.background}>
@@ -43,11 +34,7 @@ class ImageCapInsetsExample extends React.Component {
            capInsets: none
          </Text>
          <Image
-            source={nativeImageSource({
-              ios: 'story-background',
-              width: 60,
-              height: 60
-            })}
+            source={require('image!story-background')}
            style={styles.storyBackground}
            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
@@ -58,11 +45,7 @@ class ImageCapInsetsExample extends React.Component {
            capInsets: 15
          </Text>
          <Image
-            source={nativeImageSource({
-              ios: 'story-background',
-              width: 60,
-              height: 60
-            })}
+            source={require('image!story-background')}
            style={styles.storyBackground}
            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
@@ -71,7 +54,7 @@ class ImageCapInsetsExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  background: {
@@ -1,11 +1,5 @@
-/*
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
+
+/**
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +13,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ImageEditingExample
 */
 'use strict';

@@ -29,11 +22,13 @@ var {
  CameraRoll,
  Image,
  ImageEditor,
+  NativeModules,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
+  UIManager,
  View,
 } = ReactNative;

@@ -19,7 +19,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ImageExample
 */
 'use strict';

@@ -37,7 +36,7 @@ var {
 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
-const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
+const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
 var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);

 var NetworkImageCallbackExample = React.createClass({
@@ -62,15 +61,7 @@ var NetworkImageCallbackExample = React.createClass({
          source={this.props.source}
          style={[styles.base, {overflow: 'visible'}]}
          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={(event) => {
-            // Currently this image source feature is only available on iOS.
-            if (event.nativeEvent.source) {
-              const url = event.nativeEvent.source.url;
-              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
-            } else {
-              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
-            }
-          }}
+          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
          onLoadEnd={() => {
            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
            this.setState({startLoadPrefetched: true}, () => {
@@ -87,15 +78,7 @@ var NetworkImageCallbackExample = React.createClass({
            source={this.props.prefetchedSource}
            style={[styles.base, {overflow: 'visible'}]}
            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-            onLoad={(event) => {
-              // Currently this image source feature is only available on iOS.
-              if (event.nativeEvent.source) {
-                const url = event.nativeEvent.source.url;
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
-              } else {
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
-              }
-            }}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
          />
          : null}
@@ -182,7 +165,7 @@ var MultipleSourcesExample = React.createClass({
  },
  render: function() {
    return (
-      <View>
+      <View style={styles.container}>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          <Text
            style={styles.touchableText}
@@ -197,13 +180,13 @@ var MultipleSourcesExample = React.createClass({
        </View>
        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
        <View
-          style={{height: this.state.height, width: this.state.width}} >
+          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
          <Image
            style={{flex: 1}}
            source={[
-              {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
-              {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
-              {uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
+              {uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
+              {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
+              {uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
            ]}
          />
        </View>
@@ -243,7 +226,7 @@ exports.examples = [
    render: function() {
      return (
        <Image
-          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
+          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.base}
        />
      );
@@ -268,7 +251,7 @@ exports.examples = [
    title: 'Image Loading Events',
    render: function() {
      return (
-        <NetworkImageCallbackExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now()}}
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
      );
    },
@@ -277,7 +260,7 @@ exports.examples = [
    title: 'Error Handler',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'https://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
+        <NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
      );
    },
    platform: 'ios',
@@ -286,7 +269,7 @@ exports.examples = [
    title: 'Image Download Progress',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1'}}/>
+        <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
      );
    },
    platform: 'ios',
@@ -298,42 +281,13 @@ exports.examples = [
      return (
        <Image
          defaultSource={require('./bunny.png')}
-          source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
+          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
          style={styles.base}
        />
      );
    },
    platform: 'ios',
  },
-  {
-    title: 'Cache Policy',
-    description: 'First image has never been loaded before and is instructed not to load unless in cache.' +
-    'Placeholder image from above will stay. Second image is the same but forced to load regardless of' +
-    ' local cache state.',
-    render: function () {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            defaultSource={require('./bunny.png')}
-            source={{
-              uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
-              cache: 'only-if-cached'
-            }}
-            style={styles.base}
-          />
-          <Image
-            defaultSource={require('./bunny.png')}
-            source={{
-              uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
-              cache: 'reload'
-            }}
-            style={styles.base}
-          />
-        </View>
-      );
-    },
-    platform: 'ios',
-  },
  {
    title: 'Border Color',
    render: function() {
@@ -551,18 +505,6 @@ exports.examples = [
                    source={image}
                  />
                </View>
-                { Platform.OS === 'ios' ?
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Repeat
-                    </Text>
-                    <Image
-                      style={styles.resizeMode}
-                      resizeMode={Image.resizeMode.repeat}
-                      source={image}
-                    />
-                  </View>
-                : null }
                { Platform.OS === 'android' ?
                  <View style={styles.leftMargin}>
                    <Text style={[styles.resizeModeText]}>
@@ -589,7 +531,7 @@ exports.examples = [
      return (
        <Image
          style={styles.gif}
-          source={{uri: 'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
+          source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
        />
      );
    },
@@ -633,54 +575,12 @@ exports.examples = [
    render: function() {
      return <MultipleSourcesExample />;
    },
-  },
-  {
-    title: 'Legacy local image',
-    description:
-      'Images shipped with the native bundle, but not managed ' +
-      'by the JS packager',
-    render: function() {
-      return (
-        <Image
-          source={{uri: 'legacy_image', width: 120, height: 120}}
-        />
-      );
-    },
-  },
-  {
-    title: 'Bundled images',
-    description:
-      'Images shipped in a separate native bundle',
-    render: function() {
-      return (
-        <View style={{flexDirection: 'row'}}>
-          <Image
-            source={{
-              url: 'ImageInBundle',
-              bundle: 'UIExplorerBundle',
-              width: 100,
-              height: 100,
-            }}
-            style={{borderColor: 'yellow', borderWidth: 4}}
-          />
-          <Image
-            source={{
-              url: 'ImageInAssetCatalog',
-              bundle: 'UIExplorerBundle',
-              width: 100,
-              height: 100,
-            }}
-            style={{marginLeft: 10, borderColor: 'blue', borderWidth: 4}}
-          />
-        </View>
-      );
-    },
-    platform: 'ios',
+    platform: 'android',
  },
 ];

-var fullImage = {uri: 'https://facebook.github.io/react/img/logo_og.png'};
-var smallImage = {uri: 'https://facebook.github.io/react/img/logo_small_2x.png'};
+var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};

 var styles = StyleSheet.create({
  base: {
@@ -26,20 +26,24 @@ const {
 const UIExplorerBlock = require('./UIExplorerBlock');
 const UIExplorerPage = require('./UIExplorerPage');

-class KeyboardAvoidingViewExample extends React.Component {
-  static title = '<KeyboardAvoidingView>';
-  static description = 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
+const KeyboardAvoidingViewExample = React.createClass({
+  statics: {
+    title: '<KeyboardAvoidingView>',
+    description: 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.',
+  },

-  state = {
-    behavior: 'padding',
-    modalOpen: false,
-  };
+  getInitialState() {
+    return {
+      behavior: 'padding',
+      modalOpen: false,
+    };
+  },

-  onSegmentChange = (segment: String) => {
+  onSegmentChange(segment: String) {
    this.setState({behavior: segment.toLowerCase()});
-  };
+  },

-  renderExample = () => {
+  renderExample() {
    return (
      <View style={styles.outerContainer}>
        <Modal animationType="fade" visible={this.state.modalOpen}>
@@ -65,7 +69,7 @@ class KeyboardAvoidingViewExample extends React.Component {
        </TouchableHighlight>
      </View>
    );
-  };
+  },

  render() {
    return (
@@ -75,8 +79,8 @@ class KeyboardAvoidingViewExample extends React.Component {
        </UIExplorerBlock>
      </UIExplorerPage>
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  outerContainer: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule LayoutAnimationExample
 */
 'use strict';

@@ -33,22 +25,25 @@ const {
  TouchableOpacity,
 } = ReactNative;

-class AddRemoveExample extends React.Component {
-  state = {
-    views: [],
-  };
+const AddRemoveExample = React.createClass({
+
+  getInitialState() {
+    return {
+      views: [],
+    };
+  },

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
-  }
+  },

-  _onPressAddView = () => {
+  _onPressAddView() {
    this.setState((state) => ({views: [...state.views, {}]}));
-  };
+  },

-  _onPressRemoveView = () => {
+  _onPressRemoveView() {
    this.setState((state) => ({views: state.views.slice(0, -1)}));
-  };
+  },

  render() {
    const views = this.state.views.map((view, i) =>
@@ -73,8 +68,8 @@ class AddRemoveExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

 const GreenSquare = () =>
  <View style={styles.greenSquare}>
@@ -86,15 +81,18 @@ const BlueSquare = () =>
    <Text>Blue square</Text>
  </View>;

-class CrossFadeExample extends React.Component {
-  state = {
-    toggled: false,
-  };
+const CrossFadeExample = React.createClass({

-  _onPressToggle = () => {
+  getInitialState() {
+    return {
+      toggled: false,
+    };
+  },
+
+  _onPressToggle() {
    LayoutAnimation.easeInEaseOut();
    this.setState((state) => ({toggled: !state.toggled}));
-  };
+  },

  render() {
    return (
@@ -113,8 +111,8 @@ class CrossFadeExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  container: {
@@ -162,12 +160,12 @@ exports.title = 'Layout Animation';
 exports.description = 'Layout animation';
 exports.examples = [{
  title: 'Add and remove views',
-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    return <AddRemoveExample />;
  },
 }, {
  title: 'Cross fade views',
-  render(): React.Element<any> {
+  render(): ReactElement<any> {
    return <CrossFadeExample />;
  },
 }];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule LayoutEventsExample
 */
 'use strict';

@@ -55,14 +47,15 @@ type State = {
  viewStyle: { margin: number },
 };

-class LayoutEventExample extends React.Component {
-  state: State = {
-    viewStyle: {
-      margin: 20,
-    },
-  };
-
-  animateViewLayout = () => {
+var LayoutEventExample = React.createClass({
+  getInitialState(): State {
+    return {
+      viewStyle: {
+        margin: 20,
+      },
+    };
+  },
+  animateViewLayout: function() {
    LayoutAnimation.configureNext(
      LayoutAnimation.Presets.spring,
      () => {
@@ -75,35 +68,29 @@ class LayoutEventExample extends React.Component {
        margin: this.state.viewStyle.margin > 20 ? 20 : 60,
      }
    });
-  };
-
-  addWrapText = () => {
+  },
+  addWrapText: function() {
    this.setState(
      {extraText: '  And a bunch more text to wrap around a few lines.'},
      this.changeContainer
    );
-  };
-
-  changeContainer = () => {
+  },
+  changeContainer: function() {
    this.setState({containerStyle: {width: 280}});
-  };
-
-  onViewLayout = (e: LayoutEvent) => {
+  },
+  onViewLayout: function(e: LayoutEvent) {
    console.log('received view layout event\n', e.nativeEvent);
    this.setState({viewLayout: e.nativeEvent.layout});
-  };
-
-  onTextLayout = (e: LayoutEvent) => {
+  },
+  onTextLayout: function(e: LayoutEvent) {
    console.log('received text layout event\n', e.nativeEvent);
    this.setState({textLayout: e.nativeEvent.layout});
-  };
-
-  onImageLayout = (e: LayoutEvent) => {
+  },
+  onImageLayout: function(e: LayoutEvent) {
    console.log('received image layout event\n', e.nativeEvent);
    this.setState({imageLayout: e.nativeEvent.layout});
-  };
-
-  render() {
+  },
+  render: function() {
    var viewStyle = [styles.view, this.state.viewStyle];
    var textLayout = this.state.textLayout || {width: '?', height: '?'};
    var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
@@ -137,7 +124,7 @@ class LayoutEventExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  view: {
@@ -171,7 +158,7 @@ exports.description = 'Examples that show how Layout events can be used to ' +
 exports.examples = [
 {
  title: 'LayoutEventExample',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement<any> {
    return <LayoutEventExample />;
  },
 }];
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule LayoutExample
 */
 'use strict';

@@ -34,8 +26,8 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

-class Circle extends React.Component {
-  render() {
+var Circle = React.createClass({
+  render: function() {
    var size = this.props.size || 20;
    var backgroundColor = this.props.bgColor || '#527fe4';
    return (
@@ -50,10 +42,10 @@ class Circle extends React.Component {
      />
    );
  }
-}
+});

-class CircleBlock extends React.Component {
-  render() {
+var CircleBlock = React.createClass({
+  render: function() {
    var circleStyle = {
      flexDirection: 'row',
      backgroundColor: '#f6f7f8',
@@ -67,14 +59,17 @@ class CircleBlock extends React.Component {
      </View>
    );
  }
-}
+});

-class LayoutExample extends React.Component {
-  static title = 'Layout - Flexbox';
-  static description = 'Examples of using the flexbox API to layout views.';
-  static displayName = 'LayoutExample';
+var LayoutExample = React.createClass({
+  statics: {
+    title: 'Layout - Flexbox',
+    description: 'Examples of using the flexbox API to layout views.',
+  },

-  render() {
+  displayName: 'LayoutExample',
+
+  render: function() {
    var fiveColoredCircles = [
      <Circle bgColor="#527fe4" key="blue" />,
      <Circle bgColor="#D443E3" key="violet" />,
@@ -166,7 +161,7 @@ class LayoutExample extends React.Component {
      </UIExplorerPage>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  overlay: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,7 +10,6 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule LinkingExample
 */
 'use strict';

@@ -32,12 +24,13 @@ var {
 } = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');

-class OpenURLButton extends React.Component {
-  static propTypes = {
-    url: React.PropTypes.string,
-  };
+var OpenURLButton = React.createClass({

-  handleClick = () => {
+  propTypes: {
+    url: React.PropTypes.string,
+  },
+
+  handleClick: function() {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
@@ -45,9 +38,9 @@ class OpenURLButton extends React.Component {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
      <TouchableOpacity
        onPress={this.handleClick}>
@@ -57,13 +50,16 @@ class OpenURLButton extends React.Component {
      </TouchableOpacity>
    );
  }
-}
+});

-class IntentAndroidExample extends React.Component {
-  static title = 'Linking';
-  static description = 'Shows how to use Linking to open URLs.';
+var IntentAndroidExample = React.createClass({

-  render() {
+  statics: {
+    title: 'Linking',
+    description: 'Shows how to use Linking to open URLs.',
+  },
+
+  render: function() {
    return (
      <UIExplorerBlock title="Open external URLs">
        <OpenURLButton url={'https://www.facebook.com'} />
@@ -74,8 +70,8 @@ class IntentAndroidExample extends React.Component {
        <OpenURLButton url={'tel:9876543210'} />
      </UIExplorerBlock>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  container: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ListViewExample
 */
 'use strict';

@@ -30,6 +22,7 @@ var {
  ListView,
  TouchableHighlight,
  StyleSheet,
+  RecyclerViewBackedScrollView,
  Text,
  View,
 } = ReactNative;
@@ -64,7 +57,8 @@ var ListViewSimpleExample = React.createClass({
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
-          renderSeparator={this._renderSeparator}
+          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
+          renderSeparator={this._renderSeperator}
        />
      </UIExplorerPage>
    );
@@ -106,7 +100,7 @@ var ListViewSimpleExample = React.createClass({
    )});
  },

-  _renderSeparator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
    return (
      <View
        key={`${sectionID}-${rowID}`}
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ListViewGridLayoutExample
 */
 'use strict';

@@ -131,8 +123,7 @@ var styles = StyleSheet.create({
  list: {
    justifyContent: 'space-around',
    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start'
+    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -18,7 +11,7 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @providesModule ListViewPagingExample
+ * @provides ListViewPagingExample
 * @flow
 */
 'use strict';
@@ -57,28 +50,26 @@ var THUMB_URLS = [
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;

-class Thumb extends React.Component {
-  componentWillMount() {
+var Thumb = React.createClass({
+  getInitialState: function() {
+    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
+  },
+  componentWillMount: function() {
    UIManager.setLayoutAnimationEnabledExperimental &&
      UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-
-  _getThumbIdx = () => {
+  },
+  _getThumbIdx: function() {
    return Math.floor(Math.random() * THUMB_URLS.length);
-  };
-
-  _onPressThumb = () => {
+  },
+  _onPressThumb: function() {
    var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
    LayoutAnimation.configureNext(config);
    this.setState({
      thumbIndex: this._getThumbIdx(),
      dir: this.state.dir === 'row' ? 'column' : 'row',
    });
-  };
-
-  state = {thumbIndex: this._getThumbIdx(), dir: 'row'};
-
-  render() {
+  },
+  render: function() {
    return (
      <TouchableOpacity
        onPress={this._onPressThumb}
@@ -96,16 +87,15 @@ class Thumb extends React.Component {
      </TouchableOpacity>
    );
  }
-}
+});

-class ListViewPagingExample extends React.Component {
-  state: *;
-  static title = '<ListView> - Paging';
-  static description = 'Floating headers & layout animations.';
+var ListViewPagingExample = React.createClass({
+  statics: {
+    title: '<ListView> - Paging',
+    description: 'Floating headers & layout animations.'
+  },

-  // $FlowFixMe found when converting React.createClass to ES6
-  constructor(props) {
-    super(props);
+  getInitialState: function() {
    var getSectionData = (dataBlob, sectionID) => {
      return dataBlob[sectionID];
    };
@@ -135,18 +125,17 @@ class ListViewPagingExample extends React.Component {
        dataBlob[rowName] = rowName;
      }
    }
-
-    this.state = {
+    return {
      dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
      headerPressCount: 0,
    };
-  }
+  },

-  renderRow = (rowData: string, sectionID: string, rowID: string): React.Element<any> => {
+  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement<any> {
    return (<Thumb text={rowData}/>);
-  };
+  },

-  renderSectionHeader = (sectionData: string, sectionID: string) => {
+  renderSectionHeader: function(sectionData: string, sectionID: string) {
    return (
      <View style={styles.section}>
        <Text style={styles.text}>
@@ -154,9 +143,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  renderHeader = () => {
+  renderHeader: function() {
    var headerLikeText = this.state.headerPressCount % 2 ?
      <View><Text style={styles.text}>1 Like</Text></View> :
      null;
@@ -170,9 +159,9 @@ class ListViewPagingExample extends React.Component {
        </View>
      </TouchableOpacity>
    );
-  };
+  },

-  renderFooter = () => {
+  renderFooter: function() {
    return (
      <View style={styles.header}>
        <Text onPress={() => console.log('Footer!')} style={styles.text}>
@@ -180,9 +169,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <ListView
        style={styles.listview}
@@ -197,14 +186,15 @@ class ListViewPagingExample extends React.Component {
        scrollRenderAheadDistance={500}
      />
    );
-  }
+  },

-  _onPressHeader = () => {
+  _onPressHeader: function() {
    var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
    LayoutAnimation.configureNext(config);
    this.setState({headerPressCount: this.state.headerPressCount + 1});
-  };
-}
+  },
+
+});

 var styles = StyleSheet.create({
  listview: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule MapViewExample
 */
 'use strict';

@@ -161,13 +153,16 @@ var MapRegionInput = React.createClass({

 });

-class MapViewExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    mapRegion: undefined,
-    mapRegionInput: undefined,
-    annotations: [],
-  };
+var MapViewExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      mapRegion: undefined,
+      mapRegionInput: undefined,
+      annotations: [],
+    };
+  },

  render() {
    return (
@@ -185,23 +180,23 @@ class MapViewExample extends React.Component {
        />
      </View>
    );
-  }
+  },

-  _getAnnotations = (region) => {
+  _getAnnotations(region) {
    return [{
      longitude: region.longitude,
      latitude: region.latitude,
      title: 'You Are Here',
    }];
-  };
+  },

-  _onRegionChange = (region) => {
+  _onRegionChange(region) {
    this.setState({
      mapRegionInput: region,
    });
-  };
+  },

-  _onRegionChangeComplete = (region) => {
+  _onRegionChangeComplete(region) {
    if (this.state.isFirstLoad) {
      this.setState({
        mapRegionInput: region,
@@ -209,23 +204,27 @@ class MapViewExample extends React.Component {
        isFirstLoad: false,
      });
    }
-  };
+  },

-  _onRegionInputChanged = (region) => {
+  _onRegionInputChanged(region) {
    this.setState({
      mapRegion: region,
      mapRegionInput: region,
      annotations: this._getAnnotations(region),
    });
-  };
-}
+  },

-class AnnotationExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    annotations: [],
-    mapRegion: undefined,
-  };
+});
+
+var AnnotationExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },

  render() {
    if (this.state.isFirstLoad) {
@@ -243,24 +242,19 @@ class AnnotationExample extends React.Component {

    return (
      <MapView
-        showsAnnotationCallouts={this.props.showsAnnotationCallouts}
        style={styles.map}
        onRegionChangeComplete={onRegionChangeComplete}
        region={this.state.mapRegion}
        annotations={this.state.annotations}
      />
    );
-  }
-}
+  },

-class DraggableAnnotationExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    annotations: [],
-    mapRegion: undefined,
-  };
+});

-  createAnnotation = (longitude, latitude) => {
+var DraggableAnnotationExample = React.createClass({
+
+  createAnnotation(longitude, latitude) {
    return {
      longitude,
      latitude,
@@ -274,7 +268,15 @@ class DraggableAnnotationExample extends React.Component {
        console.log('Drag state: ' + event.state);
      },
    };
-  };
+  },
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },

  render() {
    if (this.state.isFirstLoad) {
@@ -296,8 +298,9 @@ class DraggableAnnotationExample extends React.Component {
        annotations={this.state.annotations}
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  map: {
@@ -368,29 +371,6 @@ exports.examples = [
      }}/>;
    }
  },
-  {
-    title: 'Show callouts by default example',
-    render() {
-      return <AnnotationExample
-        style={styles.map}
-        annotation={{
-          title: 'More Info...',
-          rightCalloutView: (
-            <TouchableOpacity
-              onPress={() => {
-                alert('You Are Here');
-              }}>
-              <Image
-                style={{width:30, height:30}}
-                source={require('./uie_thumb_selected.png')}
-              />
-            </TouchableOpacity>
-          ),
-        }}
-        showsAnnotationCallouts={true}
-      />;
-    }
-  },
  {
    title: 'Annotation focus example',
    render() {
@@ -425,7 +405,7 @@ exports.examples = [
    render() {
      return <AnnotationExample style={styles.map} annotation={{
        title: 'Thumbs Up!',
-        image: require('./uie_thumb_big.png'),
+        image: require('image!uie_thumb_big'),
      }}/>;
    }
  },
@@ -442,7 +422,7 @@ exports.examples = [
          </Text>
          <Image
            style={{width: 90, height: 65, resizeMode: 'cover'}}
-            source={require('./uie_thumb_big.png')}
+            source={require('image!uie_thumb_big')}
          />
        </View>,
      }}/>;
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule ModalExample
 */
 'use strict';

@@ -27,7 +19,6 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Modal,
-  Picker,
  StyleSheet,
  Switch,
  Text,
@@ -35,25 +26,25 @@ var {
  View,
 } = ReactNative;

-const Item = Picker.Item;
-
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';

-class Button extends React.Component {
-  state = {
-    active: false,
-  };
+var Button = React.createClass({
+  getInitialState() {
+    return {
+      active: false,
+    };
+  },

-  _onHighlight = () => {
+  _onHighlight() {
    this.setState({active: true});
-  };
+  },

-  _onUnhighlight = () => {
+  _onUnhighlight() {
    this.setState({active: false});
-  };
+  },

  render() {
    var colorStyle = {
@@ -70,37 +61,28 @@ class Button extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

-const supportedOrientationsPickerValues = [
-  ['portrait'],
-  ['landscape'],
-  ['landscape-left'],
-  ['portrait', 'landscape-right'],
-  ['portrait', 'landscape'],
-  [],
-];
+var ModalExample = React.createClass({
+  getInitialState() {
+    return {
+      animationType: 'none',
+      modalVisible: false,
+      transparent: false,
+    };
+  },

-class ModalExample extends React.Component {
-  state = {
-    animationType: 'none',
-    modalVisible: false,
-    transparent: false,
-    selectedSupportedOrientation: 0,
-    currentOrientation: 'unknown',
-  };
-
-  _setModalVisible = (visible) => {
+  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
-  };
+  },

-  _setAnimationType = (type) => {
+  _setAnimationType(type) {
    this.setState({animationType: type});
-  };
+  },

-  _toggleTransparent = () => {
+  _toggleTransparent() {
    this.setState({transparent: !this.state.transparent});
-  };
+  },

  render() {
    var modalBackgroundStyle = {
@@ -119,14 +101,11 @@ class ModalExample extends React.Component {
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
-          onRequestClose={() => this._setModalVisible(false)}
-          supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]}
-          onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})}
+          onRequestClose={() => {this._setModalVisible(false)}}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
-              <Text>It is currently displayed in {this.state.currentOrientation} mode.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
@@ -153,29 +132,13 @@ class ModalExample extends React.Component {
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

-        <View>
-          <Text style={styles.rowTitle}>Supported orientations</Text>
-          <Picker
-            selectedValue={this.state.selectedSupportedOrientation}
-            onValueChange={(_, i) => this.setState({selectedSupportedOrientation: i})}
-            itemStyle={styles.pickerItem}
-            >
-            <Item label="Portrait" value={0} />
-            <Item label="Landscape" value={1} />
-            <Item label="Landscape left" value={2} />
-            <Item label="Portrait and landscape right" value={3} />
-            <Item label="Portrait and landscape" value={4} />
-            <Item label="Default supportedOrientations" value={5} />
-          </Picker>
-        </View>
-
        <Button onPress={this._setModalVisible.bind(this, true)}>
          Present
        </Button>
      </View>
    );
-  }
-}
+  },
+});

 exports.examples = [
  {
@@ -207,7 +170,7 @@ var styles = StyleSheet.create({
  },
  button: {
    borderRadius: 5,
-    flexGrow: 1,
+    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
@@ -221,7 +184,4 @@ var styles = StyleSheet.create({
  modalButton: {
    marginTop: 10,
  },
-  pickerItem: {
-    fontSize: 16,
-  },
 });
@@ -19,44 +19,43 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule NativeAnimationsExample
 */
 'use strict';

-const React = require('react');
-const ReactNative = require('react-native');
-const {
+var React = require('react');
+var ReactNative = require('react-native');
+var {
  View,
  Text,
  Animated,
  StyleSheet,
  TouchableWithoutFeedback,
-  Slider,
 } = ReactNative;
+var UIExplorerButton = require('./UIExplorerButton');

-var AnimatedSlider = Animated.createAnimatedComponent(Slider);
+var Tester = React.createClass({
+  current: 0,
+  getInitialState() {
+    return {
+      native: new Animated.Value(0),
+      js: new Animated.Value(0),
+    };
+  },

-class Tester extends React.Component {
-  state = {
-    native: new Animated.Value(0),
-    js: new Animated.Value(0),
-  };
-
-  current = 0;
-
-  onPress = () => {
-    const animConfig = (
-      this.current && this.props.reverseConfig ? this.props.reverseConfig : this.props.config
-    );
+  onPress() {
    this.current = this.current ? 0 : 1;
    const config = {
-      ...animConfig,
+      ...this.props.config,
      toValue: this.current,
    };
-
-    Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
+    try {
+      Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
+    } catch (e) {
+      // uncomment this if you want to get the redbox errors!
+      throw e;
+    }
    Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
-  };
+  },

  render() {
    return (
@@ -77,141 +76,8 @@ class Tester extends React.Component {
        </View>
      </TouchableWithoutFeedback>
    );
-  }
-}
-
-class ValueListenerExample extends React.Component {
-  state = {
-    anim: new Animated.Value(0),
-    progress: 0,
-  };
-  _current = 0;
-
-  componentDidMount() {
-    this.state.anim.addListener((e) => this.setState({ progress: e.value }));
-  }
-
-  componentWillUnmount() {
-    this.state.anim.removeAllListeners();
-  }
-
-  _onPress = () => {
-    this._current = this._current ? 0 : 1;
-    const config = {
-      duration: 1000,
-      toValue: this._current,
-    };
-
-    Animated.timing(this.state.anim, { ...config, useNativeDriver: true }).start();
-  };
-
-  render() {
-    return (
-      <TouchableWithoutFeedback onPress={this._onPress}>
-        <View>
-          <View style={styles.row}>
-            <Animated.View
-              style={[
-                styles.block,
-                {
-                  opacity: this.state.anim,
-                }
-              ]}
-            />
-          </View>
-          <Text>Value: {this.state.progress}</Text>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-}
-
-const UIExplorerSettingSwitchRow = require('UIExplorerSettingSwitchRow');
-class InternalSettings extends React.Component {
-  _stallInterval: ?number;
-  state: {busyTime: number | string, filteredStall: number};
-  render() {
-    return (
-      <View>
-        <UIExplorerSettingSwitchRow
-          initialValue={false}
-          label="Force JS Stalls"
-          onEnable={() => {
-            this._stallInterval = setInterval(() => {
-              const start = Date.now();
-              console.warn('burn CPU');
-              while ((Date.now() - start) < 100) {}
-            }, 300);
-          }}
-          onDisable={() => {
-            clearInterval(this._stallInterval || 0);
-          }}
-        />
-        <UIExplorerSettingSwitchRow
-          initialValue={false}
-          label="Track JS Stalls"
-          onEnable={() => {
-            require('JSEventLoopWatchdog').install({thresholdMS: 25});
-            this.setState({busyTime: '<none>'});
-            require('JSEventLoopWatchdog').addHandler({
-              onStall: ({busyTime}) => this.setState((state) => ({
-                busyTime,
-                filteredStall: (state.filteredStall || 0) * 0.97 + busyTime * 0.03,
-              })),
-            });
-          }}
-          onDisable={() => {
-            console.warn('Cannot disable yet....');
-          }}
-        />
-        {this.state && <Text>
-          JS Stall filtered: {Math.round(this.state.filteredStall)}, last: {this.state.busyTime}
-        </Text>}
-      </View>
-    );
-  }
-}
-
-class EventExample extends React.Component {
-  state = {
-    scrollX: new Animated.Value(0),
-  };
-
-  render() {
-    const opacity = this.state.scrollX.interpolate({
-      inputRange: [0, 200],
-      outputRange: [1, 0],
-    });
-    return (
-      <View>
-        <Animated.View
-          style={[
-            styles.block,
-            {
-              opacity,
-            }
-          ]}
-        />
-        <Animated.ScrollView
-          horizontal
-          style={{ height: 100, marginTop: 16 }}
-          scrollEventThrottle={16}
-          onScroll={
-            Animated.event([{
-              nativeEvent: { contentOffset: { x: this.state.scrollX } }
-            }], {
-              useNativeDriver: true,
-            })
-          }
-        >
-          <View style={{ width: 600, backgroundColor: '#eee', justifyContent: 'center' }}>
-            <Text>Scroll me!</Text>
-          </View>
-        </Animated.ScrollView>
-      </View>
-    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  row: {
@@ -232,11 +98,13 @@ exports.description = 'Test out Native Animations';
 exports.examples = [
 {
    title: 'Multistage With Multiply and rotation',
+    description: 'description',
    render: function() {
      return (
          <Tester
            type="timing"
-            config={{ duration: 1000 }}>
+            config={{ duration: 1000 }}
+          >
            {anim => (
              <Animated.View
                style={[
@@ -281,11 +149,13 @@ exports.examples = [
  },
  {
    title: 'Multistage With Multiply',
+    description: 'description',
    render: function() {
      return (
          <Tester
            type="timing"
-            config={{ duration: 1000 }}>
+            config={{ duration: 1000 }}
+          >
            {anim => (
              <Animated.View
                style={[
@@ -323,12 +193,14 @@ exports.examples = [
    },
  },
  {
-    title: 'Scale interpolation with clamping',
+    title: 'Scale interpolation',
+    description: 'description',
    render: function() {
      return (
        <Tester
          type="timing"
-          config={{ duration: 1000 }}>
+          config={{ duration: 1000 }}
+        >
          {anim => (
            <Animated.View
              style={[
@@ -337,9 +209,8 @@ exports.examples = [
                  transform: [
                    {
                      scale: anim.interpolate({
-                        inputRange: [0, 0.5],
+                        inputRange: [0, 1],
                        outputRange: [1, 1.4],
-                        extrapolateRight: 'clamp',
                      })
                    }
                  ],
@@ -353,11 +224,13 @@ exports.examples = [
  },
  {
    title: 'Opacity without interpolation',
+    description: 'description',
    render: function() {
      return (
        <Tester
          type="timing"
-          config={{ duration: 1000 }}>
+          config={{ duration: 1000 }}
+        >
          {anim => (
            <Animated.View
              style={[
@@ -374,11 +247,13 @@ exports.examples = [
  },
  {
    title: 'Rotate interpolation',
+    description: 'description',
    render: function() {
      return (
        <Tester
          type="timing"
-          config={{ duration: 1000 }}>
+          config={{ duration: 1000 }}
+        >
          {anim => (
            <Animated.View
              style={[
@@ -402,11 +277,13 @@ exports.examples = [
  },
  {
    title: 'translateX => Animated.spring',
+    description: 'description',
    render: function() {
      return (
        <Tester
          type="spring"
-          config={{ bounciness: 0 }}>
+          config={{ bounciness: 0 }}
+        >
          {anim => (
            <Animated.View
              style={[
@@ -418,7 +295,7 @@ exports.examples = [
                        inputRange: [0, 1],
                        outputRange: [0, 100],
                      })
-                    },
+                    }
                  ],
                }
              ]}
@@ -427,67 +304,5 @@ exports.examples = [
        </Tester>
      );
    },
-  },{
-    title: 'translateX => Animated.decay',
-    render: function() {
-      return (
-        <Tester
-          type="decay"
-          config={{ velocity: 0.5 }}
-          reverseConfig={{ velocity: -0.5 }}>
-          {anim => (
-            <Animated.View
-              style={[
-                styles.block,
-                {
-                  transform: [
-                    {
-                      translateX: anim
-                    },
-                  ],
-                }
-              ]}
-            />
-          )}
-        </Tester>
-      );
-    },
-  },{
-    title: 'Drive custom property',
-    render: function() {
-      return (
-        <Tester
-          type="timing"
-          config={{ duration: 1000 }}>
-          {anim => (
-            <AnimatedSlider style={{}} value={anim} />
-          )}
-        </Tester>
-      );
-    },
-  },
-  {
-    title: 'Animated value listener',
-    render: function() {
-      return (
-        <ValueListenerExample />
-      );
-    },
-  },
-  {
-    title: 'Animated events',
-    render: function() {
-      return (
-        <EventExample />
-      );
-    },
-  },
-  {
-    title: 'Internal Settings',
-    render: function() {
-      return (
-        <InternalSettings />
-      );
-    },
  },
 ];
@@ -0,0 +1,488 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ReactNative = require('react-native');
+
+/**
+ * Basic example that shows how to use <NavigationCardStack /> to build
+ * an app with composite navigation system.
+ */
+
+const {
+  Component,
+  PropTypes,
+} = React;
+
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  Header: NavigationHeader,
+  PropTypes: NavigationPropTypes,
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+// First Step.
+// Define what app navigation state will look like.
+function createAppNavigationState(): Object {
+  return  {
+    // Three tabs.
+    tabs: {
+      index: 0,
+      routes: [
+        {key: 'apple'},
+        {key: 'banana'},
+        {key: 'orange'},
+      ],
+    },
+    // Scenes for the `apple` tab.
+    apple: {
+      index: 0,
+      routes: [{key: 'Apple Home'}],
+    },
+    // Scenes for the `banana` tab.
+    banana: {
+      index: 0,
+      routes: [{key: 'Banana Home'}],
+    },
+    // Scenes for the `orange` tab.
+    orange: {
+      index: 0,
+      routes: [{key: 'Orange Home'}],
+    },
+  };
+}
+
+// Next step.
+// Define what app navigation state shall be updated.
+function updateAppNavigationState(
+  state: Object,
+  action: Object,
+): Object {
+  let {type} = action;
+  if (type === 'BackAction') {
+    type = 'pop';
+  }
+
+  switch (type) {
+    case 'push': {
+      // Push a route into the scenes stack.
+      const route: Object = action.route;
+      const {tabs} = state;
+      const tabKey = tabs.routes[tabs.index].key;
+      const scenes = state[tabKey];
+      const nextScenes = NavigationStateUtils.push(scenes, route);
+      if (scenes !== nextScenes) {
+        return {
+          ...state,
+          [tabKey]: nextScenes,
+        };
+      }
+      break;
+    }
+
+    case 'pop': {
+      // Pops a route from the scenes stack.
+      const {tabs} = state;
+      const tabKey = tabs.routes[tabs.index].key;
+      const scenes = state[tabKey];
+      const nextScenes = NavigationStateUtils.pop(scenes);
+      if (scenes !== nextScenes) {
+        return {
+          ...state,
+          [tabKey]: nextScenes,
+        };
+      }
+      break;
+    }
+
+    case 'selectTab': {
+      // Switches the tab.
+      const tabKey: string = action.tabKey;
+      const tabs = NavigationStateUtils.jumpTo(state.tabs, tabKey);
+      if (tabs !== state.tabs) {
+        return {
+          ...state,
+          tabs,
+        };
+      }
+    }
+  }
+  return state;
+}
+
+// Next step.
+// Defines a helper function that creates a HOC (higher-order-component)
+// which provides a function `navigate` through component props. The
+// `navigate` function will be used to invoke navigation changes.
+// This serves a convenient way for a component to navigate.
+function createAppNavigationContainer(ComponentClass) {
+  const key = '_yourAppNavigationContainerNavigateCall';
+
+  class Container extends Component {
+    static contextTypes = {
+      [key]: PropTypes.func,
+    };
+
+    static childContextTypes = {
+      [key]: PropTypes.func.isRequired,
+    };
+
+    static propTypes = {
+      navigate: PropTypes.func,
+    };
+
+    getChildContext(): Object {
+      return {
+        [key]: this.context[key] || this.props.navigate,
+      };
+    }
+
+    render(): ReactElement {
+      const navigate = this.context[key] || this.props.navigate;
+      return <ComponentClass {...this.props} navigate={navigate} />;
+    }
+  }
+
+  return Container;
+}
+
+// Next step.
+// Define a component for your application that owns the navigation state.
+class YourApplication extends Component {
+
+  static propTypes = {
+    onExampleExit: PropTypes.func,
+  };
+
+  // This sets up the initial navigation state.
+  constructor(props, context) {
+    super(props, context);
+    // This sets up the initial navigation state.
+    this.state = createAppNavigationState();
+    this._navigate = this._navigate.bind(this);
+  }
+
+  render(): ReactElement {
+    // User your own navigator (see next step).
+    return (
+      <YourNavigator
+        appNavigationState={this.state}
+        navigate={this._navigate}
+      />
+    );
+  }
+
+  // This public method is optional. If exists, the UI explorer will call it
+  // the "back button" is pressed. Normally this is the cases for Android only.
+  handleBackAction(): boolean {
+    return this._navigate({type: 'pop'});
+  }
+
+  // This handles the navigation state changes. You're free and responsible
+  // to define the API that changes that navigation state. In this exmaple,
+  // we'd simply use a `updateAppNavigationState` to update the navigation
+  // state.
+  _navigate(action: Object): void {
+    if (action.type === 'exit') {
+      // Exits the example. `this.props.onExampleExit` is provided
+      // by the UI Explorer.
+      this.props.onExampleExit && this.props.onExampleExit();
+      return;
+    }
+
+    const state = updateAppNavigationState(
+      this.state,
+      action,
+    );
+
+    // `updateAppNavigationState` (which uses NavigationStateUtils) gives you
+    // back the same `state` if nothing has changed. You could use
+    // that to avoid redundant re-rendering.
+    if (this.state !== state) {
+      this.setState(state);
+    }
+  }
+}
+
+// Next step.
+// Define your own controlled navigator.
+const YourNavigator = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    appNavigationState: PropTypes.shape({
+      apple: NavigationPropTypes.navigationState.isRequired,
+      banana: NavigationPropTypes.navigationState.isRequired,
+      orange: NavigationPropTypes.navigationState.isRequired,
+      tabs: NavigationPropTypes.navigationState.isRequired,
+    }),
+    navigate: PropTypes.func.isRequired,
+  };
+
+  // This sets up the methods (e.g. Pop, Push) for navigation.
+  constructor(props: any, context: any) {
+    super(props, context);
+    this._back = this._back.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  // Now use the `NavigationCardStack` to render the scenes.
+  render(): ReactElement {
+    const {appNavigationState} = this.props;
+    const {tabs} = appNavigationState;
+    const tabKey = tabs.routes[tabs.index].key;
+    const scenes = appNavigationState[tabKey];
+
+    return (
+      <View style={styles.navigator}>
+        <NavigationCardStack
+          key={'stack_' + tabKey}
+          onNavigateBack={this._back}
+          navigationState={scenes}
+          renderOverlay={this._renderHeader}
+          renderScene={this._renderScene}
+          style={styles.navigatorCardStack}
+        />
+        <YourTabs
+          navigationState={tabs}
+        />
+      </View>
+    );
+  }
+
+  // Render the header.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderHeader(sceneProps: Object): ReactElement {
+    return (
+      <YourHeader
+        {...sceneProps}
+      />
+    );
+  }
+
+  // Render a scene for route.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderScene(sceneProps: Object): ReactElement {
+    return (
+      <YourScene
+        {...sceneProps}
+      />
+    );
+  }
+
+  _back() {
+    this.props.navigate({type: 'pop'});
+  }
+});
+
+// Next step.
+// Define your own header.
+const YourHeader = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    ...NavigationPropTypes.SceneRendererProps,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._back = this._back.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.bind(this);
+  }
+
+  render(): ReactElement {
+    return (
+      <NavigationHeader
+        {...this.props}
+        renderTitleComponent={this._renderTitleComponent}
+        onNavigateBack={this._back}
+      />
+    );
+  }
+
+  _back(): void {
+    this.props.navigate({type: 'pop'});
+  }
+
+  _renderTitleComponent(): ReactElement {
+    return (
+      <NavigationHeader.Title>
+        {this.props.scene.route.key}
+      </NavigationHeader.Title>
+    );
+  }
+});
+
+// Next step.
+// Define your own scene.
+const YourScene = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    ...NavigationPropTypes.SceneRendererProps,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._exit = this._exit.bind(this);
+    this._popRoute = this._popRoute.bind(this);
+    this._pushRoute = this._pushRoute.bind(this);
+  }
+
+  render(): ReactElement {
+    return (
+      <ScrollView style={styles.scrollView}>
+        <NavigationExampleRow
+          text="Push Route"
+          onPress={this._pushRoute}
+        />
+        <NavigationExampleRow
+          text="Pop Route"
+          onPress={this._popRoute}
+        />
+        <NavigationExampleRow
+          text="Exit Header + Scenes + Tabs Example"
+          onPress={this._exit}
+        />
+      </ScrollView>
+    );
+  }
+
+  _pushRoute(): void {
+    // Just push a route with a new unique key.
+    const route = {key: '[' + this.props.scenes.length + ']-' + Date.now()};
+    this.props.navigate({type: 'push', route});
+  }
+
+  _popRoute(): void {
+    this.props.navigate({type: 'pop'});
+  }
+
+  _exit(): void {
+    this.props.navigate({type: 'exit'});
+  }
+});
+
+// Next step.
+// Define your own tabs.
+const YourTabs = createAppNavigationContainer(class extends Component {
+  static propTypes = {
+    navigationState: NavigationPropTypes.navigationState.isRequired,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+  }
+
+  render(): ReactElement {
+    return (
+      <View style={styles.tabs}>
+        {this.props.navigationState.routes.map(this._renderTab, this)}
+      </View>
+    );
+  }
+
+  _renderTab(route: Object, index: number): ReactElement {
+    return (
+      <YourTab
+        key={route.key}
+        route={route}
+        selected={this.props.navigationState.index === index}
+      />
+    );
+  }
+});
+
+// Next step.
+// Define your own Tab
+const YourTab = createAppNavigationContainer(class extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func.isRequired,
+    route: NavigationPropTypes.navigationRoute.isRequired,
+    selected: PropTypes.bool.isRequired,
+  };
+
+  constructor(props: Object, context: any) {
+    super(props, context);
+    this._onPress = this._onPress.bind(this);
+  }
+
+  render(): ReactElement {
+    const style = [styles.tabText];
+    if (this.props.selected) {
+      style.push(styles.tabSelected);
+    }
+    return (
+      <TouchableOpacity style={styles.tab} onPress={this._onPress}>
+        <Text style={style}>
+          {this.props.route.key}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  _onPress() {
+    this.props.navigate({type: 'selectTab', tabKey: this.props.route.key});
+  }
+});
+
+const styles = StyleSheet.create({
+  navigator: {
+    flex: 1,
+  },
+  navigatorCardStack: {
+    flex: 20,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+  tabs: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tab: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  tabText: {
+    color: '#222',
+    fontWeight: '500',
+  },
+  tabSelected: {
+    color: 'blue',
+  },
+});
+
+module.exports = YourApplication;
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ReactNative = require('react-native');
+
+/**
+ * Basic example that shows how to use <NavigationCardStack /> to build
+ * an app with controlled navigation system.
+ */
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+// Step 1:
+// Define a component for your application.
+class YourApplication extends React.Component {
+
+  // This sets up the initial navigation state.
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      // This defines the initial navigation state.
+      navigationState: {
+        index: 0, // starts with first route focused.
+        routes: [{key: 'Welcome'}], // starts with only one route.
+      },
+    };
+
+    this._exit = this._exit.bind(this);
+    this._onNavigationChange = this._onNavigationChange.bind(this);
+  }
+
+  // User your own navigator (see Step 2).
+  render(): ReactElement {
+    return (
+      <YourNavigator
+        navigationState={this.state.navigationState}
+        onNavigationChange={this._onNavigationChange}
+        onExit={this._exit}
+      />
+    );
+  }
+
+  // This handles the navigation state changes. You're free and responsible
+  // to define the API that changes that navigation state. In this exmaple,
+  // we'd simply use a `function(type: string)` to update the navigation state.
+  _onNavigationChange(type: string): void {
+    let {navigationState} = this.state;
+    switch (type) {
+      case 'push':
+        // push a new route.
+        const route = {key: 'route-' + Date.now()};
+        navigationState = NavigationStateUtils.push(navigationState, route);
+        break;
+
+      case 'pop':
+        navigationState = NavigationStateUtils.pop(navigationState);
+        break;
+    }
+
+    // NavigationStateUtils gives you back the same `navigationState` if nothing
+    // has changed. You could use that to avoid redundant re-rendering.
+    if (this.state.navigationState !== navigationState) {
+      this.setState({navigationState});
+    }
+  }
+
+  // Exits the example. `this.props.onExampleExit` is provided
+  // by the UI Explorer.
+  _exit(): void {
+    this.props.onExampleExit && this.props.onExampleExit();
+  }
+
+  // This public method is optional. If exists, the UI explorer will call it
+  // the "back button" is pressed. Normally this is the cases for Android only.
+  handleBackAction(): boolean {
+    return this._onNavigationChange('pop');
+  }
+}
+
+// Step 2:
+// Define your own controlled navigator.
+//
+//      +------------+
+//    +-+            |
+//  +-+ |            |
+//  | | |            |
+//  | | |   Active   |
+//  | | |   Scene    |
+//  | | |            |
+//  +-+ |            |
+//    +-+            |
+//      +------------+
+//
+class YourNavigator extends React.Component {
+
+  // This sets up the methods (e.g. Pop, Push) for navigation.
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
+    this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
+
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  // Now use the `NavigationCardStack` to render the scenes.
+  render(): ReactElement {
+    return (
+      <NavigationCardStack
+        onNavigateBack={this._onPopRoute}
+        navigationState={this.props.navigationState}
+        renderScene={this._renderScene}
+        style={styles.navigator}
+      />
+    );
+  }
+
+  // Render a scene for route.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderScene(sceneProps: Object): ReactElement {
+    return (
+      <YourScene
+        route={sceneProps.scene.route}
+        onPushRoute={this._onPushRoute}
+        onPopRoute={this._onPopRoute}
+        onExit={this.props.onExit}
+      />
+    );
+  }
+}
+
+// Step 3:
+// Define your own scene.
+class YourScene extends React.Component {
+  render() {
+    return (
+      <ScrollView style={styles.scrollView}>
+        <NavigationExampleRow
+          text={'route = ' + this.props.route.key}
+        />
+        <NavigationExampleRow
+          text="Push Route"
+          onPress={this.props.onPushRoute}
+        />
+        <NavigationExampleRow
+          text="Pop Route"
+          onPress={this.props.onPopRoute}
+        />
+        <NavigationExampleRow
+          text="Exit Card Stack Example"
+          onPress={this.props.onExit}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  navigator: {
+    flex: 1,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+});
+
+module.exports = YourApplication;
@@ -0,0 +1,66 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Text,
+  PixelRatio,
+  StyleSheet,
+  View,
+  TouchableHighlight,
+} = ReactNative;
+
+var NavigationExampleRow = React.createClass({
+  render: function() {
+    if (this.props.onPress) {
+      return (
+        <TouchableHighlight
+          style={styles.row}
+          underlayColor="#D0D0D0"
+          onPress={this.props.onPress}>
+          <Text style={styles.buttonText}>
+            {this.props.text}
+          </Text>
+        </TouchableHighlight>
+      );
+    }
+    return (
+      <View style={styles.row}>
+        <Text style={styles.rowText}>
+          {this.props.text}
+        </Text>
+      </View>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 15,
+    backgroundColor: 'white',
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
+  },
+  rowText: {
+    fontSize: 17,
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+});
+
+module.exports = NavigationExampleRow;
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const AsyncStorage = require('AsyncStorage');
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+
+/*
+ * Heads up! This file is not the real navigation example- only a utility to switch between them.
+ *
+ * To learn how to use the Navigation API, take a look at the following example files:
+ */
+const EXAMPLES = {
+  'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
+  'CardStack Example': require('./NavigationCardStack-example'),
+};
+
+const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
+
+const NavigationExperimentalExample = React.createClass({
+  statics: {
+    title: 'Navigation (Experimental)',
+    description: 'Upcoming navigation APIs and animated navigation views',
+    external: true,
+  },
+
+  getInitialState: function() {
+    return {
+      example: null,
+    };
+  },
+
+  componentDidMount() {
+    AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
+      if (err || !example || !EXAMPLES[example]) {
+        this.setState({
+          example: 'menu',
+        });
+        return;
+      }
+      this.setState({
+        example,
+      });
+    });
+  },
+
+  setExample: function(example) {
+    this.setState({
+      example,
+    });
+    AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
+  },
+
+  _renderMenu: function() {
+    let exitRow = null;
+    if (this.props.onExampleExit) {
+      exitRow = (
+        <NavigationExampleRow
+          text="Exit Navigation Examples"
+          onPress={this.props.onExampleExit}
+        />
+      );
+    }
+    return (
+      <View style={styles.menu}>
+        <ScrollView>
+          {this._renderExampleList()}
+          {exitRow}
+        </ScrollView>
+      </View>
+    );
+  },
+
+  _renderExampleList: function() {
+    return Object.keys(EXAMPLES).map(exampleName => (
+      <NavigationExampleRow
+        key={exampleName}
+        text={exampleName}
+        onPress={() => {
+          this.setExample(exampleName);
+        }}
+      />
+    ));
+  },
+
+  _exitInnerExample: function() {
+    this.setExample('menu');
+  },
+
+  handleBackAction: function() {
+    const wasHandledByExample = (
+      this.exampleRef &&
+      this.exampleRef.handleBackAction &&
+      this.exampleRef.handleBackAction()
+    );
+    if (wasHandledByExample) {
+      return true;
+    }
+    if (this.state.example && this.state.example !== 'menu') {
+      this._exitInnerExample();
+      return true;
+    }
+    return false;
+  },
+
+  render: function() {
+    if (this.state.example === 'menu') {
+      return this._renderMenu();
+    }
+    if (EXAMPLES[this.state.example]) {
+      const Component = EXAMPLES[this.state.example];
+      return (
+        <Component
+          onExampleExit={this._exitInnerExample}
+          ref={exampleRef => { this.exampleRef = exampleRef; }}
+        />
+      );
+    }
+    return null;
+  },
+});
+
+const styles = StyleSheet.create({
+  menu: {
+    backgroundColor: '#E9E9EF',
+    flex: 1,
+    marginTop: 20,
+  },
+});
+
+module.exports = NavigationExperimentalExample;
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,8 +10,7 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule BreadcrumbNavSample
- */
+*/
 'use strict';

 var React = require('react');
@@ -51,8 +43,9 @@ class NavButton extends React.Component {
  }
 }

-class BreadcrumbNavSample extends React.Component {
-  componentWillMount() {
+var BreadcrumbNavSample = React.createClass({
+
+  componentWillMount: function() {
    this._navBarRouteMapper = {
      rightContentForRoute: function(route, navigator) {
        return null;
@@ -82,9 +75,9 @@ class BreadcrumbNavSample extends React.Component {
        );
      }
    };
-  }
+  },

-  _renderScene = (route, navigator) => {
+  _renderScene: function(route, navigator) {
    return (
      <ScrollView style={styles.scene}>
        <NavButton
@@ -109,9 +102,9 @@ class BreadcrumbNavSample extends React.Component {
        />
      </ScrollView>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        style={styles.container}
@@ -124,8 +117,11 @@ class BreadcrumbNavSample extends React.Component {
        }
      />
    );
-  }
-}
+  },
+
+
+
+});

 var styles = StyleSheet.create({
  scene: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,14 +10,11 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule JumpingNavSample
- */
+*/
 'use strict';

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Navigator,
  StyleSheet,
@@ -77,11 +67,7 @@ class JumpingNavBar extends React.Component {
      <View style={styles.tabs}>
        <TabBarIOS>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_notification',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_notification')}
            selected={this.state.tabIndex === 0}
            onPress={() => {
              this.props.onTabIndex(0);
@@ -90,11 +76,7 @@ class JumpingNavBar extends React.Component {
            <View />
          </TabBarIOS.Item>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_list',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_list')}
            selected={this.state.tabIndex === 1}
            onPress={() => {
              this.props.onTabIndex(1);
@@ -103,11 +85,7 @@ class JumpingNavBar extends React.Component {
            <View />
          </TabBarIOS.Item>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_settings',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_settings')}
            selected={this.state.tabIndex === 2}
            onPress={() => {
              this.props.onTabIndex(2);
@@ -121,8 +99,8 @@ class JumpingNavBar extends React.Component {
  }
 }

-class JumpingNavSample extends React.Component {
-  render() {
+var JumpingNavSample = React.createClass({
+  render: function() {
    return (
      <Navigator
        debugOverlay={false}
@@ -148,9 +126,9 @@ class JumpingNavSample extends React.Component {
        }
      />
    );
-  }
+  },

-  renderScene = (route, navigator) => {
+  renderScene: function(route, navigator) {
    var backBtn;
    var forwardBtn;
    if (ROUTE_STACK.indexOf(route) !== 0) {
@@ -200,8 +178,8 @@ class JumpingNavSample extends React.Component {
        />
      </ScrollView>
    );
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  button: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,8 +10,7 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule NavigationBarSample
- */
+*/
 'use strict';


@@ -93,8 +85,9 @@ function newRandomRoute() {
  };
 }

-class NavigationBarSample extends React.Component {
-  componentWillMount() {
+var NavigationBarSample = React.createClass({
+
+  componentWillMount: function() {
    var navigator = this.props.navigator;

    var callback = (event) => {
@@ -113,13 +106,13 @@ class NavigationBarSample extends React.Component {
      navigator.navigationContext.addListener('willfocus', callback),
      navigator.navigationContext.addListener('didfocus', callback),
    ];
-  }
+  },

-  componentWillUnmount() {
+  componentWillUnmount: function() {
    this._listeners && this._listeners.forEach(listener => listener.remove());
-  }
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        debugOverlay={false}
@@ -154,8 +147,9 @@ class NavigationBarSample extends React.Component {
        }
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -112,11 +105,14 @@ class NavMenu extends React.Component {
  }
 }

-class TabBarExample extends React.Component {
-  static title = '<Navigator>';
-  static description = 'JS-implemented navigation';
+var TabBarExample = React.createClass({

-  renderScene = (route, nav) => {
+  statics: {
+    title: '<Navigator>',
+    description: 'JS-implemented navigation',
+  },
+
+  renderScene: function(route, nav) {
    switch (route.id) {
      case 'navbar':
        return <NavigationBarSample navigator={nav} />;
@@ -133,9 +129,9 @@ class TabBarExample extends React.Component {
          />
        );
    }
-  };
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        ref={this._setNavigatorRef}
@@ -150,13 +146,14 @@ class TabBarExample extends React.Component {
        }}
      />
    );
-  }
+  },

-  componentWillUnmount() {
+
+  componentWillUnmount: function() {
    this._listeners && this._listeners.forEach(listener => listener.remove());
-  }
+  },

-  _setNavigatorRef = (navigator) => {
+  _setNavigatorRef: function(navigator) {
    if (navigator !== this._navigator) {
      this._navigator = navigator;

@@ -178,8 +175,8 @@ class TabBarExample extends React.Component {
        ];
      }
    }
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -17,8 +10,7 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @providesModule NavigatorIOSColorsExample
- */
+*/
 'use strict';

 var React = require('react');
@@ -31,8 +23,9 @@ var {
  View
 } = ReactNative;

-class EmptyPage extends React.Component {
-  render() {
+var EmptyPage = React.createClass({
+
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -40,14 +33,18 @@ class EmptyPage extends React.Component {
        </Text>
      </View>
    );
-  }
-}
+  },

-class NavigatorIOSColors extends React.Component {
-  static title = '<NavigatorIOS> - Custom';
-  static description = 'iOS navigation with custom nav bar colors';
+});

-  render() {
+var NavigatorIOSColors = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS> - Custom',
+    description: 'iOS navigation with custom nav bar colors',
+  },
+
+  render: function() {
    // Set StatusBar with light contents to get better contrast
    StatusBar.setBarStyle('light-content');

@@ -73,8 +70,9 @@ class NavigatorIOSColors extends React.Component {
        translucent={true}
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  container: {
@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -19,16 +12,13 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
- * @providesModule NavigatorIOSExample
 */
 'use strict';

 const React = require('react');
 const ReactNative = require('react-native');
 const ViewExample = require('./ViewExample');
-
 const createExamplePage = require('./createExamplePage');
-const nativeImageSource = require('nativeImageSource');
 const {
  AlertIOS,
  NavigatorIOS,
@@ -39,8 +29,8 @@ const {
  View,
 } = ReactNative;

-class EmptyPage extends React.Component {
-  render() {
+const EmptyPage = React.createClass({
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -48,11 +38,11 @@ class EmptyPage extends React.Component {
        </Text>
      </View>
    );
-  }
-}
+  },
+});

-class NavigatorIOSExamplePage extends React.Component {
-  render() {
+const NavigatorIOSExamplePage = React.createClass({
+  render: function() {
    var recurseTitle = 'Recurse Navigation';
    if (!this.props.depth || this.props.depth === 1) {
      recurseTitle += ' - more examples here';
@@ -75,13 +65,6 @@ class NavigatorIOSExamplePage extends React.Component {
              component: createExamplePage(null, ViewExample),
            });
          })}
-          {this._renderRow('Custom title image Example', () => {
-            this.props.navigator.push({
-              title: 'Custom title image Example',
-              titleImage: require('./relay.png'),
-              component: createExamplePage(null, ViewExample),
-            });
-          })}
          {this._renderRow('Custom Right Button', () => {
            this.props.navigator.push({
              title: NavigatorIOSExample.title,
@@ -93,52 +76,13 @@ class NavigatorIOSExamplePage extends React.Component {
              }
            });
          })}
-          {this._renderRow('Custom Right System Button', () => {
-            this.props.navigator.push({
-              title: NavigatorIOSExample.title,
-              component: EmptyPage,
-              rightButtonSystemIcon: 'bookmarks',
-              onRightButtonPress: () => this.props.navigator.pop(),
-              passProps: {
-                text: 'This page has a right system button in the nav bar',
-              }
-            });
-          })}
          {this._renderRow('Custom Left & Right Icons', () => {
            this.props.navigator.push({
              title: NavigatorIOSExample.title,
              component: EmptyPage,
              leftButtonTitle: 'Custom Left',
              onLeftButtonPress: () => this.props.navigator.pop(),
-              rightButtonIcon: nativeImageSource({
-                ios: 'NavBarButtonPlus',
-                width: 17,
-                height: 17
-              }),
-              onRightButtonPress: () => {
-                AlertIOS.alert(
-                  'Bar Button Action',
-                  'Recognized a tap on the bar button icon',
-                  [
-                    {
-                      text: 'OK',
-                      onPress: () => console.log('Tapped OK'),
-                    },
-                  ]
-                );
-              },
-              passProps: {
-                text: 'This page has an icon for the right button in the nav bar',
-              }
-            });
-          })}
-          {this._renderRow('Custom Left & Right System Icons', () => {
-            this.props.navigator.push({
-              title: NavigatorIOSExample.title,
-              component: EmptyPage,
-              leftButtonSystemIcon: 'cancel',
-              onLeftButtonPress: () => this.props.navigator.pop(),
-              rightButtonSystemIcon: 'search',
+              rightButtonIcon: require('image!NavBarButtonPlus'),
              onRightButtonPress: () => {
                AlertIOS.alert(
                  'Bar Button Action',
@@ -170,9 +114,9 @@ class NavigatorIOSExamplePage extends React.Component {
        <View style={styles.line}/>
      </ScrollView>
    );
-  }
+  },

-  _renderReplace = () => {
+  _renderReplace: function() {
    if (!this.props.depth) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -190,9 +134,9 @@ class NavigatorIOSExamplePage extends React.Component {
        }
      });
    });
-  };
+  },

-  _renderReplacePrevious = () => {
+  _renderReplacePrevious: function() {
    if (!this.props.depth || this.props.depth < 2) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -207,9 +151,9 @@ class NavigatorIOSExamplePage extends React.Component {
        wrapperStyle: styles.customWrapperStyle,
      });
    });
-  };
+  },

-  _renderReplacePreviousAndPop = () => {
+  _renderReplacePreviousAndPop: function() {
    if (!this.props.depth || this.props.depth < 2) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -224,9 +168,9 @@ class NavigatorIOSExamplePage extends React.Component {
        wrapperStyle: styles.customWrapperStyle,
      });
    });
-  };
+  },

-  _renderRow = (title: string, onPress: Function) => {
+  _renderRow: function(title: string, onPress: Function) {
    return (
      <View>
        <TouchableHighlight onPress={onPress}>
@@ -239,15 +183,17 @@ class NavigatorIOSExamplePage extends React.Component {
        <View style={styles.separator} />
      </View>
    );
-  };
-}
+  },
+});

-class NavigatorIOSExample extends React.Component {
-  static title = '<NavigatorIOS>';
-  static description = 'iOS navigation capabilities';
-  static external = true;
+const NavigatorIOSExample = React.createClass({
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+    external: true,
+  },

-  render() {
+  render: function() {
    const {onExampleExit} = this.props;
    return (
      <NavigatorIOS
@@ -257,11 +203,12 @@ class NavigatorIOSExample extends React.Component {
          component: NavigatorIOSExamplePage,
          passProps: {onExampleExit},
        }}
+        itemWrapperStyle={styles.itemWrapper}
        tintColor="#008888"
      />
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  container: {
--- a/Show More
+++ b/Show More