Add link to the survey at the bottom of the page

Summary:
![simulator screen shot may 11 2016 3 03 14 pm](https://cloud.githubusercontent.com/assets/197597/15198889/3374abe6-178f-11e6-95e5-378004ea45aa.png)

<img width="1333" alt="screen shot 2016-05-11 at 3 03 25 pm" src="https://cloud.githubusercontent.com/assets/197597/15198886/2e545a8a-178f-11e6-8fd1-975ca700e49b.png">
Closes https://github.com/facebook/react-native/pull/7524

Reviewed By: JoelMarcey

Differential Revision: D3293684

Pulled By: vjeux

fbshipit-source-id: c0e7d138040eae49c6b7f7398de8d50f0ed2f564

.buckconfig

@@ -7,3 +7,4 @@
 
 [alias]
   movies = //Examples/Movies/android/app:app
+  uiexplorer = //Examples/UIExplorer/android/app:app

.eslintrc

@@ -147,11 +147,6 @@
     "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
     "yoda": 1,                       // require or disallow Yoda conditions
 
-  // Strict Mode
-  // These rules relate to using strict mode.
-
-    "strict": [2, "global"],         // require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
-
   // Variables
   // These rules have to do with variable declarations.
 

.flowconfig

@@ -42,10 +42,35 @@
 # Ignore Website
 .*/website/.*
 
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
 [include]
 
 [libs]
 Libraries/react-native/react-native-interface.js
+flow/
 
 [options]
 module.system=haste
@@ -62,9 +87,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.21.0
+0.23.0

.gitignore

@@ -24,6 +24,9 @@ project.xcworkspace
 # Gradle
 /build/
 /Examples/**/android/app/build/
+/Examples/**/android/app/gradle/
+/Examples/**/android/app/gradlew
+/Examples/**/android/app/gradlew.bat
 /ReactAndroid/build/
 
 # Buck
@@ -37,6 +40,7 @@ buck-out
 .gradle
 local.properties
 *.iml
+/android/
 
 # Node
 node_modules

.travis.yml

@@ -1,52 +1,31 @@
 language: objective-c
 
-osx_image: xcode7.2
-
-cache:
-  directories:
-    - node_modules
-    - .nvm
+osx_image: xcode7.3
 
 install:
-  - brew reinstall nvm
-  - mkdir -p .nvm
-  - export NVM_DIR="$PWD/.nvm"
+  - brew update
+  - brew reinstall nvm xctool
+  - mkdir -p /Users/travis/build/facebook/.nvm
+  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
   - source $(brew --prefix nvm)/nvm.sh
-  - nvm install 5
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.0
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm config set progress=false
   - npm install
 
 script:
-- |
-  if [ "$TEST_TYPE" = objc ]
-  then
-
-    travis_retry ./scripts/objc-test.sh
-
-  elif [ "$TEST_TYPE" = js ]
-  then
-
-    npm install github@0.2.4
-    cat <(echo eslint; npm run lint --silent -- --format=json; echo flow; npm run flow --silent -- --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" node bots/code-analysis-bot.js
-    npm run flow && npm test
-
-  elif [ "$TEST_TYPE" = e2e-objc ]
-  then
-
-    travis_retry ./scripts/e2e-test.sh --ios
-
-  else
-    echo "Unknown test type: $TEST_TYPE"
-    exit 1
-  fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then travis_retry node ./scripts/run-ci-e2e-tests.js --ios --js; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
 
 env:
   matrix:
+    - TEST_TYPE=e2e-objc
     - TEST_TYPE=objc
     - TEST_TYPE=js
-    - TEST_TYPE=e2e-objc
 
 branches:
   only:

CONTRIBUTING.md

@@ -19,11 +19,17 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 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. Add the copyright notice to the top of any new files you've added.
-5. Ensure tests pass on Travis and Circle CI.
-6. Make sure your code lints (`node linter.js <files touched>`).
-7. Squash your commits (`git rebase -i`).
-8. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+```
+$ cd website
+$ npm install && npm start
+go to: http://localhost:8079/react-native/index.html
+```
+5. Add the copyright notice to the top of any new files you've added.
+6. Ensure tests pass on Travis and Circle CI.
+7. Make sure your code lints (`node linter.js <files touched>`).
+8. Squash your commits (`git rebase -i`).
+9. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
 
 #### Copyright Notice for files
 

Examples/2048/Game2048.js

@@ -16,13 +16,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var Animated = require('Animated');
 var GameBoard = require('GameBoard');

Examples/Movies/MovieCell.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   Platform,
@@ -24,7 +25,7 @@ var {
   TouchableHighlight,
   TouchableNativeFeedback,
   View
-} = React;
+} = ReactNative;
 
 var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');

Examples/Movies/MovieScreen.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   ScrollView,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');

Examples/Movies/MoviesApp.android.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   BackAndroid,
@@ -24,7 +25,7 @@ var {
   StyleSheet,
   ToolbarAndroid,
   View,
-} = React;
+} = ReactNative;
 
 var MovieScreen = require('./MovieScreen');
 var SearchScreen = require('./SearchScreen');

Examples/Movies/MoviesApp.ios.js

@@ -16,12 +16,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
-} = React;
+} = ReactNative;
 
 var SearchScreen = require('./SearchScreen');
 

Examples/Movies/README.md

@@ -35,6 +35,21 @@ Open the Movies app in your emulator.
 
 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
+
+Follow the same setup as running with gradle.
+
+Install Buck from [here](https://buckbuild.com/setup/install.html).
+
+Run the following commands from the react-native folder:
+
+    ./gradlew :ReactAndroid:packageReactNdkLibsForBuck
+    buck fetch movies
+    buck install -r movies
+    ./packager/packager.sh
+
+_Note: The native libs are still built using gradle. Full build with buck is coming soon(tm)._
+
 ## Built from source
 
 Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.

Examples/Movies/SearchBar.android.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   Platform,
@@ -25,7 +26,7 @@ var {
   StyleSheet,
   TouchableNativeFeedback,
   View,
-} = React;
+} = ReactNative;
 
 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
 

Examples/Movies/SearchBar.ios.js

@@ -16,13 +16,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ActivityIndicatorIOS,
   TextInput,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 var SearchBar = React.createClass({
   render: function() {

Examples/Movies/SearchScreen.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ActivityIndicatorIOS,
   ListView,
@@ -24,7 +25,7 @@ var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');
 
 var invariant = require('fbjs/lib/invariant');

Examples/Movies/android/app/BUCK

@@ -13,29 +13,17 @@ android_library(
   name = 'movies-lib',
   srcs = glob(['src/main/java/**/*.java']),
   deps = [
-    react_native_target('java/com/facebook/csslayout:csslayout'),
-    react_native_target('java/com/facebook/react:react'),
-    react_native_target('java/com/facebook/react/devsupport:devsupport'),
+    ':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/touch:touch'),
-    react_native_target('java/com/facebook/react/uimanager:uimanager'),
-    react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
-    react_native_target('java/com/facebook/react/views/image:image'),
-    react_native_target('java/com/facebook/react/views/recyclerview:recyclerview'),
-    react_native_target('java/com/facebook/react/views/scroll:scroll'),
-    react_native_target('java/com/facebook/react/views/text:text'),
-    react_native_target('java/com/facebook/react/views/view:view'),
+    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'),
-    react_native_target('jni/prebuilt:android-jsc'),
-    react_native_dep('libraries/soloader/java/com/facebook/soloader:soloader'),
-    react_native_dep('third-party/java/jsr-305:jsr-305'),
-    ':res',
   ],
 )
 
-
 android_resource(
   name = 'res',
   res = 'src/main/res',

Examples/Movies/android/app/src/main/AndroidManifest.xml

@@ -1,10 +1,16 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.movies">
+    package="com.facebook.react.movies"
+    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:allowBackup="true"
       android:label="@string/app_name"

Examples/Movies/getStyleFromScore.js

@@ -15,10 +15,10 @@
  */
 'use strict';
 
-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
-} = React;
+} = ReactNative;
 
 var MAX_VALUE = 200;
 

Examples/TicTacToe/TicTacToeApp.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 class Board {
   grid: Array<Array<number>>;
@@ -271,7 +272,6 @@ var styles = StyleSheet.create({
   // CELL TEXT
 
   cellText: {
-    borderRadius: 5,
     fontSize: 50,
     fontFamily: 'AvenirNext-Bold',
   },

Examples/UIExplorer/AccessibilityAndroidExample.android.js

@@ -14,14 +14,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   Text,
   View,
   ToastAndroid,
   TouchableWithoutFeedback,
-} = React;
+} = ReactNative;
 
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

Examples/UIExplorer/AccessibilityIOSExample.js

@@ -15,11 +15,12 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var AccessibilityIOSExample = React.createClass({
   render() {

Examples/UIExplorer/ActionSheetIOSExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ActionSheetIOS,
   StyleSheet,
   Text,
   UIManager,
   View,
-} = React;
+} = ReactNative;
 
 var BUTTONS = [
   'Option 0',

Examples/UIExplorer/ActivityIndicatorIOSExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ActivityIndicatorIOS,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');
 
 var ToggleAnimatingActivityIndicator = React.createClass({

Examples/UIExplorer/AdSupportIOSExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AdSupportIOS,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'Advertising ID';

Examples/UIExplorer/AlertExample.js

@@ -15,14 +15,15 @@
 
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Alert,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 var UIExplorerBlock = require('./UIExplorerBlock');
 

Examples/UIExplorer/AlertIOSExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   View,
   Text,
   TouchableHighlight,
   AlertIOS,
-} = React;
+} = ReactNative;
 
 var { SimpleAlertExampleBlock } = require('./AlertExample');
 

Examples/UIExplorer/AnimatedExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   Easing,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 var UIExplorerButton = require('./UIExplorerButton');
 
 exports.framework = 'React';

Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   LayoutAnimation,
   PanResponder,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 var AnExSet = require('AnExSet');
 

Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   Image,
   PanResponder,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 var NUM_BOBBLES = 5;
 var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);

Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   Image,
   PanResponder,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 class AnExChained extends React.Component {
   state: any;

Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   Image,
@@ -24,7 +25,7 @@ var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 class AnExScroll extends React.Component {
   state: any = { scrollX: new Animated.Value(0) };

Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   PanResponder,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var AnExBobble = require('./AnExBobble');
 var AnExChained = require('./AnExChained');

Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   Image,
   PanResponder,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 class AnExTilt extends React.Component {
   state: any;

Examples/UIExplorer/AppStateExample.js

@@ -16,12 +16,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppState,
   Text,
   View
-} = React;
+} = ReactNative;
 
 var AppStateSubscription = React.createClass({
   getInitialState() {

Examples/UIExplorer/AppStateIOSExample.js

@@ -16,12 +16,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppStateIOS,
   Text,
   View
-} = React;
+} = ReactNative;
 
 var AppStateSubscription = React.createClass({
   getInitialState() {

Examples/UIExplorer/AssetScaledImageExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   View,
   ScrollView
-} = React;
+} = ReactNative;
 
 var AssetScaledImageExample = React.createClass({
 

Examples/UIExplorer/AsyncStorageExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AsyncStorage,
   PickerIOS,
   Text,
   View
-} = React;
+} = ReactNative;
 var PickerItemIOS = PickerIOS.Item;
 
 var STORAGE_KEY = '@AsyncStorageExample:key';

Examples/UIExplorer/BorderExample.js

@@ -13,11 +13,11 @@
  */
 'use strict';
 
-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   View
-} = React;
+} = ReactNative;
 
 var styles = StyleSheet.create({
   box: {

Examples/UIExplorer/BoxShadowExample.js

@@ -13,12 +13,12 @@
  */
 'use strict';
 
-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   View
-} = React;
+} = ReactNative;
 
 var styles = StyleSheet.create({
   box: {

Examples/UIExplorer/CameraRollExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   CameraRoll,
   Image,
@@ -25,7 +26,7 @@ const {
   Text,
   View,
   TouchableOpacity
-} = React;
+} = ReactNative;
 
 const CameraRollView = require('./CameraRollView');
 

Examples/UIExplorer/CameraRollView.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ActivityIndicatorIOS,
   CameraRoll,
@@ -25,7 +26,7 @@ var {
   Platform,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 var groupByEveryN = require('groupByEveryN');
 var logError = require('logError');
@@ -148,7 +149,8 @@ var CameraRollView = React.createClass({
       fetchParams.after = this.state.lastCursor;
     }
 
-    CameraRoll.getPhotos(fetchParams, this._appendAssets, logError);
+    CameraRoll.getPhotos(fetchParams)
+      .then((data) => this._appendAssets(data), (e) => logError(e));
   },
 
   /**

Examples/UIExplorer/ClipboardExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Clipboard,
   View,
   Text,
-} = React;
+} = ReactNative;
 
 var ClipboardExample = React.createClass({
   getInitialState() {

Examples/UIExplorer/DatePickerAndroidExample.js

@@ -13,13 +13,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   DatePickerAndroid,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
-} = React;
+} = ReactNative;
 
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
@@ -46,7 +47,7 @@ var DatePickerAndroidExample = React.createClass({
   async showPicker(stateKey, options) {
     try {
       var newState = {};
-      const {action, year, month, day} = await DatePickerAndroid.open(options);      
+      const {action, year, month, day} = await DatePickerAndroid.open(options);
       if (action === DatePickerAndroid.dismissedAction) {
         newState[stateKey + 'Text'] = 'dismissed';
       } else {

Examples/UIExplorer/DatePickerIOSExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   DatePickerIOS,
   StyleSheet,
   Text,
   TextInput,
   View,
-} = React;
+} = ReactNative;
 
 var DatePickerExample = React.createClass({
   getDefaultProps: function () {

Examples/UIExplorer/ExampleTypes.js

@@ -18,7 +18,7 @@
 
 export type Example = {
   title: string,
-  render: () => ?ReactElement<any, any, any>,
+  render: () => ?ReactElement<any>,
   description?: string,
   platform?: string;
 };

Examples/UIExplorer/GeolocationExample.js

@@ -17,12 +17,13 @@
 'use strict';
 
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'Geolocation';

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -16,13 +16,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var ImageCapInsetsExample = React.createClass({
   render: function() {

Examples/UIExplorer/ImageEditingExample.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   CameraRoll,
   Image,
@@ -29,7 +30,7 @@ var {
   TouchableHighlight,
   UIManager,
   View,
-} = React;
+} = ReactNative;
 
 var PAGE_SIZE = 20;
 
@@ -230,7 +231,7 @@ class ImageCropper extends React.Component {
     );
     this._minimumZoomScale = Math.max(
       this.props.size.width / this._scaledImageSize.width,
-      this.props.size.height / this._scaledImageSize.height 
+      this.props.size.height / this._scaledImageSize.height
     );
     this._updateTransformData(
       this._contentOffset,

Examples/UIExplorer/ImageExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -15,23 +22,28 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
+  Platform,
   StyleSheet,
   Text,
   View,
   ActivityIndicatorIOS
-} = React;
+} = ReactNative;
 
 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://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({
   getInitialState: function() {
     return {
       events: [],
+      startLoadPrefetched: false,
       mountTime: new Date(),
     };
   },
@@ -50,9 +62,26 @@ var NetworkImageCallbackExample = React.createClass({
           style={[styles.base, {overflow: 'visible'}]}
           onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
           onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
-          onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)}
+          onLoadEnd={() => {
+            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
+            this.setState({startLoadPrefetched: true}, () => {
+              prefetchTask.then(() => {
+                this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
+              }, error => {
+                this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
+              });
+            });
+          }}
         />
-
+        {this.state.startLoadPrefetched ?
+          <Image
+            source={this.props.prefetchedSource}
+            style={[styles.base, {overflow: 'visible'}]}
+            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
+          />
+          : null}
         <Text style={{marginTop: 20}}>
           {this.state.events.join('\n')}
         </Text>
@@ -165,7 +194,8 @@ exports.examples = [
     title: 'Image Loading Events',
     render: function() {
       return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
       );
     },
   },
@@ -381,37 +411,59 @@ exports.examples = [
       'rendered within the frame.',
     render: function() {
       return (
-        <View style={styles.horizontal}>
-          <View>
-            <Text style={[styles.resizeModeText]}>
-              Contain
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.contain}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Cover
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.cover}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Stretch
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.stretch}
-              source={fullImage}
-            />
-          </View>
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return (
+            <View key={index}>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Contain
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
+              </View>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Stretch
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.stretch}
+                    source={image}
+                  />
+                </View>
+                { Platform.OS === 'android' ?
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>
+                      Center
+                    </Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.center}
+                      source={image}
+                    />
+                  </View>
+                : null }
+              </View>
+            </View>
+          );
+        })}
         </View>
       );
     },
@@ -455,7 +507,7 @@ exports.examples = [
   {
     title: 'Image Size',
     render: function() {
-      return <ImageSizeExample source={fullImage} />; 
+      return <ImageSizeExample source={fullImage} />;
     },
     platform: 'ios',
   },

Examples/UIExplorer/LayoutEventsExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   LayoutAnimation,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 type Layout = {
   x: number;

Examples/UIExplorer/LayoutExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

Examples/UIExplorer/LinkingExample.js

@@ -13,14 +13,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Linking,
   StyleSheet,
   Text,
   TouchableNativeFeedback,
   View,
-} = React;
+} = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');
 
 var OpenURLButton = React.createClass({

Examples/UIExplorer/ListViewExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   ListView,
@@ -24,7 +25,7 @@ var {
   RecyclerViewBackedScrollView,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var UIExplorerPage = require('./UIExplorerPage');
 

Examples/UIExplorer/ListViewGridLayoutExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   ListView,
@@ -23,7 +24,7 @@ var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var THUMB_URLS = [
   require('./Thumbnails/like.png'),

Examples/UIExplorer/ListViewPagingExample.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   LayoutAnimation,
@@ -25,7 +26,7 @@ var {
   Text,
   TouchableOpacity,
   View,
-} = React;
+} = ReactNative;
 
 var NativeModules = require('NativeModules');
 var {

Examples/UIExplorer/MapViewExample.js

@@ -15,17 +15,18 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
+var { PropTypes } = React;
 var {
   Image,
   MapView,
-  PropTypes,
   StyleSheet,
   Text,
   TextInput,
   TouchableOpacity,
   View,
-} = React;
+} = ReactNative;
 
 var regionText = {
   latitude: '0',

Examples/UIExplorer/ModalExample.js

@@ -15,15 +15,16 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Modal,
   StyleSheet,
-  SwitchIOS,
+  Switch,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -96,7 +97,9 @@ var ModalExample = React.createClass({
         <Modal
           animated={this.state.animated}
           transparent={this.state.transparent}
-          visible={this.state.modalVisible}>
+          visible={this.state.modalVisible}
+          onRequestClose={() => {this._setModalVisible(false)}}
+          >
           <View style={[styles.container, modalBackgroundStyle]}>
             <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
               <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
@@ -111,12 +114,12 @@ var ModalExample = React.createClass({
 
         <View style={styles.row}>
           <Text style={styles.rowTitle}>Animated</Text>
-          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
+          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
         </View>
 
         <View style={styles.row}>
           <Text style={styles.rowTitle}>Transparent</Text>
-          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
+          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
         </View>
 
         <Button onPress={this._setModalVisible.bind(this, true)}>

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/BreadcrumbNavSample.js

@@ -13,7 +13,8 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   StyleSheet,
@@ -21,7 +22,7 @@ var {
   Text,
   TouchableHighlight,
   TouchableOpacity
-} = React;
+} = ReactNative;
 
 var _getRandomRoute = function() {
   return {

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/JumpingNavSample.js

@@ -13,7 +13,8 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   StyleSheet,
@@ -22,7 +23,7 @@ var {
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 var _getRandomRoute = function() {
   return {

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/LegacyNavigatorExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -13,14 +20,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   ScrollView,
   StyleSheet,
   Text,
   TouchableHighlight,
-} = React;
+} = ReactNative;
 
 var BreadcrumbNavSample = require('./BreadcrumbNavSample');
 var NavigationBarSample = require('./NavigationBarSample');
@@ -161,7 +169,7 @@ var TabBarExample = React.createClass({
       if (navigator) {
         var callback = (event) => {
           console.log(
-            `TabBarExample: event ${event.type}`,
+            `LegacyNavigator: event ${event.type}`,
             {
               route: JSON.stringify(event.data.route),
               target: event.target,

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/NavigationBarSample.js

@@ -14,7 +14,8 @@
 'use strict';
 
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   ScrollView,
@@ -22,7 +23,7 @@ var {
   Text,
   TouchableHighlight,
   TouchableOpacity,
-} = React;
+} = ReactNative;
 
 var Navigator = NavigationExperimental.LegacyNavigator;
 

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -13,20 +20,24 @@
 */
 'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+
+const {
   Animated,
   NavigationExperimental,
   StyleSheet,
   ScrollView,
-} = React;
-var NavigationExampleRow = require('./NavigationExampleRow');
-var {
+} = ReactNative;
+
+const  NavigationExampleRow = require('./NavigationExampleRow');
+
+const  {
   AnimatedView: NavigationAnimatedView,
   Card: NavigationCard,
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
   Header: NavigationHeader,
+  Reducer: NavigationReducer,
+  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
 const NavigationBasicReducer = NavigationReducer.StackReducer({
@@ -48,10 +59,11 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
 
 class NavigationAnimatedExample extends React.Component {
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderCard = this._renderCard.bind(this);
-    this._renderScene = this._renderScene.bind(this);
     this._renderHeader = this._renderHeader.bind(this);
+    this._renderNavigation = this._renderNavigation.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
   render() {
     return (
@@ -78,8 +90,8 @@ class NavigationAnimatedExample extends React.Component {
         navigationState={navigationState}
         style={styles.animatedView}
         renderOverlay={this._renderHeader}
-        setTiming={(pos, navState) => {
-          Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
+        applyAnimation={(pos, navState) => {
+          Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
         }}
         renderScene={this._renderCard}
       />
@@ -90,11 +102,19 @@ class NavigationAnimatedExample extends React.Component {
     return (
       <NavigationHeader
         {...props}
-        getTitle={state => state.key}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader.Title>
+        {props.scene.navigationState.key}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderCard(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationCard
@@ -134,7 +154,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT,
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js

@@ -13,12 +13,13 @@
 */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   NavigationExperimental,
   ScrollView,
   StyleSheet,
-} = React;
+} = ReactNative;
 const NavigationExampleRow = require('./NavigationExampleRow');
 const {
   RootContainer: NavigationRootContainer,

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -14,19 +21,22 @@
 'use strict';
 
 const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationRootContainer = require('NavigationRootContainer');
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 
 const {
   NavigationExperimental,
   StyleSheet,
   ScrollView,
-} = React;
+} = ReactNative;
 
-const NavigationCardStack = NavigationExperimental.CardStack;
-const NavigationStateUtils = NavigationExperimental.StateUtils;
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+  RootContainer: NavigationRootContainer,
+} = NavigationExperimental;
 
-function reduceNavigationState(initialState) {
+function createReducer(initialState) {
   return (currentState, action) => {
     switch (action.type) {
       case 'RootContainerInitialAction':
@@ -47,7 +57,7 @@ function reduceNavigationState(initialState) {
   };
 }
 
-const ExampleReducer = reduceNavigationState({
+const ExampleReducer = createReducer({
   index: 0,
   key: 'exmaple',
   children: [{key: 'First Route'}],
@@ -133,11 +143,6 @@ class NavigationCardStackExample extends React.Component {
     });
   }
 
-  _onNavigate(action) {
-    if (action && action.type === 'back') {
-      this._pop();
-    }
-  }
 }
 
 const styles = StyleSheet.create({

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -15,7 +22,8 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const NavigationExampleRow = require('./NavigationExampleRow');
 const NavigationExampleTabBar = require('./NavigationExampleTabBar');
 
@@ -24,10 +32,9 @@ const {
   ScrollView,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 const {
-  AnimatedView: NavigationAnimatedView,
   CardStack: NavigationCardStack,
   Container: NavigationContainer,
   Header: NavigationHeader,
@@ -140,7 +147,7 @@ const ExampleAppReducer = NavigationReducer.TabsReducer({
   ],
 });
 
-function stateTypeTitleMap(pageState) {
+function stateTypeTitleMap(pageState: any) {
   switch (pageState.type) {
     case 'ProfilePage':
       return 'Profile Page';
@@ -179,11 +186,19 @@ class ExampleTabScreen extends React.Component {
     return (
       <NavigationHeader
         {...props}
-        getTitle={state => stateTypeTitleMap(state)}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(props: NavigationSceneRendererProps) {
+    return (
+      <NavigationHeader.Title>
+        {stateTypeTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps) {
     const {onNavigate} = props;
     return (
@@ -251,21 +266,33 @@ class NavigationCompositionExample extends React.Component {
 }
 
 class ExampleMainView extends React.Component {
+  _renderScene: NavigationSceneRenderer;
+
+  componentWillMount() {
+    this._renderScene = this._renderScene.bind(this);
+  }
+
   render() {
     return (
       <NavigationView
         navigationState={this.props.navigationState}
         style={styles.tabsContent}
-        renderScene={(tabState, index) => (
-          <ExampleTabScreen
-            key={tabState.key}
-            navigationState={tabState}
-            onNavigate={this._handleNavigation.bind(this, tabState.key)}
-          />
-        )}
+        renderScene={this._renderScene}
       />
     );
   }
+
+  _renderScene(props: NavigationSceneRendererProps): ReactElement {
+    const {scene} = props;
+    return (
+      <ExampleTabScreen
+        key={'tab_screen' + scene.key}
+        navigationState={scene.navigationState}
+        onNavigate={this._handleNavigation.bind(this, scene.key)}
+      />
+    );
+  }
+
   _handleNavigation(tabKey, action) {
     if (ExampleExitAction.match(action)) {
       this.props.onExampleExit();
@@ -274,6 +301,7 @@ class ExampleMainView extends React.Component {
     this.props.onNavigate(action);
   }
 }
+
 ExampleMainView = NavigationContainer.create(ExampleMainView);
 
 const styles = StyleSheet.create({
@@ -284,7 +312,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT
   },
   tabContent: {
     flex: 1,

Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js

@@ -13,14 +13,15 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Text,
   PixelRatio,
   StyleSheet,
   View,
   TouchableHighlight,
-} = React;
+} = ReactNative;
 
 var NavigationExampleRow = React.createClass({
   render: function() {

Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.js

@@ -13,14 +13,15 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
-} = React;
+} = ReactNative;
 const {
   Container: NavigationContainer,
   Reducer: NavigationReducer,

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js

@@ -13,13 +13,14 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AsyncStorage,
   ScrollView,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 var NavigationExampleRow = require('./NavigationExampleRow');
 
 /*

Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.js

@@ -13,13 +13,14 @@
 */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   NavigationExperimental,
   ScrollView,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 const {
   Container: NavigationContainer,
   RootContainer: NavigationRootContainer,

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigationExperimental,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 const {
   Container: NavigationContainer,
   RootContainer: NavigationRootContainer,
@@ -32,7 +33,7 @@ const {
 type GameGrid = Array<Array<?string>>;
 
 const evenOddPlayerMap = ['O', 'X'];
-const rowLeterMap = ['a', 'b', 'c'];
+const rowLetterMap = ['a', 'b', 'c'];
 
 function parseGame(game: string): GameGrid {
   const gameTurns = game ? game.split('-') : [];
@@ -40,7 +41,7 @@ function parseGame(game: string): GameGrid {
   for (let i = 0; i < 3; i++) {
     const row = Array(3);
     for (let j = 0; j < 3; j++) {
-      const turnIndex = gameTurns.indexOf(rowLeterMap[i]+j);
+      const turnIndex = gameTurns.indexOf(rowLetterMap[i]+j);
       if (turnIndex === -1) {
         row[j] = null;
       } else {
@@ -53,7 +54,7 @@ function parseGame(game: string): GameGrid {
 }
 
 function playTurn(game: string, row: number, col: number): string {
-  const turn = rowLeterMap[row] + col;
+  const turn = rowLetterMap[row] + col;
   return game ? (game + '-' + turn) : turn;
 }
 

Examples/UIExplorer/Navigator/BreadcrumbNavSample.js

@@ -13,7 +13,8 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Navigator,
   StyleSheet,
@@ -21,7 +22,7 @@ var {
   Text,
   TouchableHighlight,
   TouchableOpacity
-} = React;
+} = ReactNative;
 
 var _getRandomRoute = function() {
   return {

Examples/UIExplorer/Navigator/JumpingNavSample.js

@@ -13,7 +13,8 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Navigator,
   StyleSheet,
@@ -22,7 +23,7 @@ var {
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 var _getRandomRoute = function() {
   return {

Examples/UIExplorer/Navigator/NavigationBarSample.js

@@ -14,7 +14,8 @@
 'use strict';
 
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Navigator,
   ScrollView,
@@ -22,7 +23,7 @@ var {
   Text,
   TouchableHighlight,
   TouchableOpacity,
-} = React;
+} = ReactNative;
 
 class NavButton extends React.Component {
   render() {

Examples/UIExplorer/Navigator/NavigatorExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Navigator,
   ScrollView,
   StyleSheet,
   Text,
   TouchableHighlight,
-} = React;
+} = ReactNative;
 var BreadcrumbNavSample = require('./BreadcrumbNavSample');
 var NavigationBarSample = require('./NavigationBarSample');
 var JumpingNavSample = require('./JumpingNavSample');

Examples/UIExplorer/NavigatorIOSColorsExample.js

@@ -13,14 +13,15 @@
 */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   NavigatorIOS,
   StatusBar,
   StyleSheet,
   Text,
   View
-} = React;
+} = ReactNative;
 
 var EmptyPage = React.createClass({
 

Examples/UIExplorer/NavigatorIOSExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const ViewExample = require('./ViewExample');
 const createExamplePage = require('./createExamplePage');
 const {
@@ -26,7 +27,7 @@ const {
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 const EmptyPage = React.createClass({
   render: function() {

Examples/UIExplorer/NetInfoExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   NetInfo,
   Text,
   View,
   TouchableWithoutFeedback,
-} = React;
+} = ReactNative;
 
 const ConnectionInfoSubscription = React.createClass({
   getInitialState() {

Examples/UIExplorer/PanResponderExample.js

@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -15,17 +22,16 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   PanResponder,
   StyleSheet,
   View,
   processColor,
-} = React;
+} = ReactNative;
 
 var CIRCLE_SIZE = 80;
-var CIRCLE_COLOR = 'blue';
-var CIRCLE_HIGHLIGHT_COLOR = 'green';
 
 var PanResponderExample = React.createClass({
 
@@ -54,13 +60,14 @@ var PanResponderExample = React.createClass({
     this._circleStyles = {
       style: {
         left: this._previousLeft,
-        top: this._previousTop
+        top: this._previousTop,
+        backgroundColor: 'green',
       }
     };
   },
 
   componentDidMount: function() {
-    this._updatePosition();
+    this._updateNativeStyles();
   },
 
   render: function() {
@@ -79,24 +86,16 @@ var PanResponderExample = React.createClass({
   },
 
   _highlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
   },
 
   _unHighlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'green';
+    this._updateNativeStyles();
   },
 
-  _updatePosition: function() {
+  _updateNativeStyles: function() {
     this.circle && this.circle.setNativeProps(this._circleStyles);
   },
 
@@ -116,7 +115,7 @@ var PanResponderExample = React.createClass({
   _handlePanResponderMove: function(e: Object, gestureState: Object) {
     this._circleStyles.style.left = this._previousLeft + gestureState.dx;
     this._circleStyles.style.top = this._previousTop + gestureState.dy;
-    this._updatePosition();
+    this._updateNativeStyles();
   },
   _handlePanResponderEnd: function(e: Object, gestureState: Object) {
     this._unHighlight();
@@ -130,7 +129,6 @@ var styles = StyleSheet.create({
     width: CIRCLE_SIZE,
     height: CIRCLE_SIZE,
     borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: CIRCLE_COLOR,
     position: 'absolute',
     left: 0,
     top: 0,

Examples/UIExplorer/PickerAndroidExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const StyleSheet = require('StyleSheet');
 const UIExplorerBlock = require('UIExplorerBlock');
 const UIExplorerPage = require('UIExplorerPage');
@@ -24,7 +25,7 @@ const {
   Picker,
   Text,
   TouchableWithoutFeedback,
-} = React;
+} = ReactNative;
 const Item = Picker.Item;
 
 const PickerExample = React.createClass({

Examples/UIExplorer/PickerIOSExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   PickerIOS,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var PickerItemIOS = PickerIOS.Item;
 

Examples/UIExplorer/PointerEventsExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var ExampleBox = React.createClass({
   getInitialState: function() {
@@ -182,7 +183,7 @@ var BoxOnlyExample = React.createClass({
 });
 
 type ExampleClass = {
-  Component: ReactClass<any, any, any>,
+  Component: ReactClass<any>,
   title: string,
   description: string,
 };

Examples/UIExplorer/ProgressViewIOSExample.js

@@ -15,12 +15,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ProgressViewIOS,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');
 
 var ProgressViewExample = React.createClass({

Examples/UIExplorer/PushNotificationIOSExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AlertIOS,
   PushNotificationIOS,
@@ -23,7 +24,7 @@ var {
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 var Button = React.createClass({
   render: function() {

Examples/UIExplorer/RCTRootViewIOSExample.js

@@ -16,12 +16,13 @@
 
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 const requireNativeComponent = require('requireNativeComponent');
 

Examples/UIExplorer/README.md

@@ -35,6 +35,21 @@ Open the UIExplorer app in your emulator.
 
 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
+
+Follow the same setup as running with gradle.
+
+Install Buck from [here](https://buckbuild.com/setup/install.html).
+
+Run the following commands from the react-native folder:
+
+    ./gradlew :ReactAndroid:packageReactNdkLibsForBuck
+    buck fetch uiexplorer
+    buck install -r uiexplorer
+    ./packager/packager.sh
+
+_Note: The native libs are still built using gradle. Full build with buck is coming soon(tm)._
+
 ## Built from source
 
 Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.

Examples/UIExplorer/RefreshControlExample.js

@@ -14,7 +14,8 @@
 */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   ScrollView,
   StyleSheet,
@@ -22,7 +23,7 @@ const {
   Text,
   TouchableWithoutFeedback,
   View,
-} = React;
+} = ReactNative;
 
 const styles = StyleSheet.create({
   row: {
@@ -93,6 +94,7 @@ const RefreshControlExample = React.createClass({
             onRefresh={this._onRefresh}
             tintColor="#ff0000"
             title="Loading..."
+            titleColor="#00ff00"
             colors={['#ff0000', '#00ff00', '#0000ff']}
             progressBackgroundColor="#ffff00"
           />

Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 class RootViewSizeFlexibilityExampleApp extends React.Component {
   state: any;

Examples/UIExplorer/ScrollViewExample.js

@@ -15,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ScrollView,
   StyleSheet,
@@ -23,7 +24,7 @@ var {
   TouchableOpacity,
   View,
   Image
-} = React;
+} = ReactNative;
 
 exports.displayName = (undefined: ?string);
 exports.title = '<ScrollView>';

Examples/UIExplorer/ScrollViewSimpleExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity
-} = React;
+} = ReactNative;
 
 var NUM_ITEMS = 20;
 

Examples/UIExplorer/SegmentedControlIOSExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   SegmentedControlIOS,
   Text,
   View,
   StyleSheet
-} = React;
+} = ReactNative;
 
 var BasicSegmentedControlExample = React.createClass({
   render() {

Examples/UIExplorer/SetPropertiesExampleApp.js

@@ -15,11 +15,12 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   Text,
   View,
-} = React;
+} = ReactNative;
 
 class SetPropertiesExampleApp extends React.Component {
 

Examples/UIExplorer/SliderExample.js

@@ -0,0 +1,170 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Slider,
+  Text,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+var SliderExample = React.createClass({
+  getDefaultProps() {
+    return {
+      value: 0,
+    }
+  },
+
+  getInitialState() {
+    return {
+      value: this.props.value,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value && +this.state.value.toFixed(3)}
+        </Text>
+        <Slider
+          {...this.props}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var SlidingCompleteExample = React.createClass({
+  getInitialState() {
+    return {
+      slideCompletionValue: 0,
+      slideCompletionCount: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <SliderExample
+          {...this.props}
+          onSlidingComplete={(value) => this.setState({
+              slideCompletionValue: value,
+              slideCompletionCount: this.state.slideCompletionCount + 1})} />
+        <Text>
+          Completions: {this.state.slideCompletionCount} Value: {this.state.slideCompletionValue}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<Slider>';
+exports.displayName = 'SliderExample';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'Default settings',
+    render(): ReactElement {
+      return <SliderExample />;
+    }
+  },
+  {
+    title: 'Initial value: 0.5',
+    render(): ReactElement {
+      return <SliderExample value={0.5} />;
+    }
+  },
+  {
+    title: 'minimumValue: -1, maximumValue: 2',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumValue={-1}
+          maximumValue={2}
+        />
+      );
+    }
+  },
+  {
+    title: 'step: 0.25',
+    render(): ReactElement {
+      return <SliderExample step={0.25} />;
+    }
+  },
+  {
+    title: 'onSlidingComplete',
+    render(): ReactElement {
+      return (
+        <SlidingCompleteExample />
+      );
+    }
+  },
+  {
+    title: 'Custom min/max track tint color',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom thumb image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
+    }
+  },
+  {
+    title: 'Custom track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
+];

Examples/UIExplorer/SliderIOSExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   SliderIOS,
   Text,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 var SliderExample = React.createClass({
   getInitialState() {

Examples/UIExplorer/SnapshotExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   Text,
   UIManager,
   View,
-} = React;
+} = ReactNative;
 
 var ScreenshotExample = React.createClass({
   getInitialState() {

Examples/UIExplorer/StatusBarExample.js

@@ -15,27 +15,15 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
+  StatusBar,
   StyleSheet,
-  View,
   Text,
   TouchableHighlight,
-  StatusBar,
-} = React;
-
-type BarStyle = 'default' | 'light-content';
-type ShowHideTransition = 'fade' | 'slide';
-
-type State = {
-  animated: boolean,
-  backgroundColor: string,
-  hidden?: boolean,
-  showHideTransition: ShowHideTransition,
-  translucent?: boolean,
-  barStyle?: BarStyle,
-  networkActivityIndicatorVisible?: boolean
-};
+  View,
+} = ReactNative;
 
 exports.framework = 'React';
 exports.title = '<StatusBar>';
@@ -57,242 +45,412 @@ const showHideTransitions = [
   'slide',
 ];
 
-function getValue(values: Array<any>, index: number): any {
+function getValue<T>(values: Array<T>, index: number): T {
   return values[index % values.length];
 }
 
-const StatusBarExample = React.createClass({
-  getInitialState(): State {
+const StatusBarHiddenExample = React.createClass({
+  getInitialState() {
     return {
       animated: true,
-      backgroundColor: getValue(colors, 0),
+      hidden: false,
       showHideTransition: getValue(showHideTransitions, 0),
     };
   },
 
-  _colorIndex: 0,
-  _barStyleIndex: 0,
   _showHideTransitionIndex: 0,
 
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  _onChangeHidden() {
+    this.setState({hidden: !this.state.hidden});
+  },
+
+  _onChangeTransition() {
+    this._showHideTransitionIndex++;
+    this.setState({
+      showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex),
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          hidden={this.state.hidden}
+          showHideTransition={this.state.showHideTransition}
+          animated={this.state.animated}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeHidden}>
+          <View style={styles.button}>
+            <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated (ios only): {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTransition}>
+          <View style={styles.button}>
+            <Text>
+              showHideTransition (ios only):
+              '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarStyleExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      barStyle: getValue(barStyles, this._barStyleIndex),
+    };
+  },
+
+  _barStyleIndex: 0,
+
+  _onChangeBarStyle() {
+    this._barStyleIndex++;
+    this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          animated={this.state.animated}
+          barStyle={this.state.barStyle}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBarStyle}>
+          <View style={styles.button}>
+            <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarNetworkActivityExample = React.createClass({
+  getInitialState() {
+    return {
+      networkActivityIndicatorVisible: false,
+    };
+  },
+
+  _onChangeNetworkIndicatorVisible() {
+    this.setState({
+      networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeNetworkIndicatorVisible}>
+          <View style={styles.button}>
+            <Text>
+              networkActivityIndicatorVisible:
+              {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarBackgroundColorExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      backgroundColor: getValue(colors, 0),
+    };
+  },
+
+  _colorIndex: 0,
+
+  _onChangeBackgroundColor() {
+    this._colorIndex++;
+    this.setState({backgroundColor: getValue(colors, this._colorIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
   render() {
     return (
       <View>
         <StatusBar
           backgroundColor={this.state.backgroundColor}
-          translucent={this.state.translucent}
-          hidden={this.state.hidden}
-          showHideTransition={this.state.showHideTransition}
           animated={this.state.animated}
-          barStyle={this.state.barStyle}
-          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
         />
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({animated: !this.state.animated})}>
-            <View style={styles.button}>
-              <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({hidden: !this.state.hidden})}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({
-              networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
-            })}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._showHideTransitionIndex++;
-              this.setState({
-                showHideTransition:
-                getValue(showHideTransitions, this._showHideTransitionIndex),
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>
-                showHideTransition:
-                '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              this.setState({backgroundColor: getValue(colors, this._colorIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this.setState({
-                translucent: !this.state.translucent,
-                backgroundColor: !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black',
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBackgroundColor}>
+          <View style={styles.button}>
+            <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   },
 });
 
-const StatusBarStaticExample = React.createClass({
-  _colorIndex: 0,
-  _barStyleIndex: 0,
-  _showHideTransitionIndex: 0,
 
+const StatusBarTranslucentExample = React.createClass({
   getInitialState() {
     return {
-      backgroundColor: getValue(colors, 0),
-      barStyle: getValue(barStyles, 0),
-      hidden: false,
-      networkActivityIndicatorVisible: false,
       translucent: false,
     };
   },
 
+  _onChangeTranslucent() {
+    this.setState({
+      translucent: !this.state.translucent,
+    });
+  },
+
   render() {
     return (
       <View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const hidden = !this.state.hidden;
-              StatusBar.setHidden(hidden, 'slide');
-              this.setState({hidden});
-            }}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              const barStyle = getValue(barStyles, this._barStyleIndex);
-              StatusBar.setBarStyle(barStyle, true);
-              this.setState({barStyle});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const networkActivityIndicatorVisible = !this.state.networkActivityIndicatorVisible;
-              StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
-              this.setState({networkActivityIndicatorVisible});
-            }}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              const backgroundColor = getValue(colors, this._colorIndex);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({backgroundColor});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const translucent = !this.state.translucent;
-              const backgroundColor = !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black';
-              StatusBar.setTranslucent(translucent);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({
-                translucent,
-                backgroundColor,
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
+        <StatusBar
+          translucent={this.state.translucent}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTranslucent}>
+          <View style={styles.button}>
+            <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   },
 });
 
-exports.examples = [{
-  title: 'StatusBar',
+const StatusBarStaticIOSExample = React.createClass({
   render() {
-    return <StatusBarExample />;
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true, 'slide');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true, 'slide')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false, 'fade');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false, 'fade')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('default', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('default', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('light-content', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('light-content', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(false)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
   },
+});
+
+const StatusBarStaticAndroidExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#ff00ff', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#ff00ff', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#00ff00', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#00ff00', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(true);
+            StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.4)', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(true) and setBackgroundColor('rgba(0, 0, 0, 0.4)', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(false);
+            StatusBar.setBackgroundColor('black', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(false) and setBackgroundColor('black', true)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const examples = [{
+  title: 'StatusBar hidden',
+  render() {
+    return <StatusBarHiddenExample />;
+  },
+}, {
+  title: 'StatusBar style',
+  render() {
+    return <StatusBarStyleExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar network activity indicator',
+  render() {
+    return <StatusBarNetworkActivityExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarBackgroundColorExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarTranslucentExample />;
+  },
+  platform: 'android',
 }, {
   title: 'StatusBar static API',
   render() {
-    return <StatusBarStaticExample />;
+    return <StatusBarStaticIOSExample />;
   },
+  platform: 'ios',
+}, {
+  title: 'StatusBar static API',
+  render() {
+    return <StatusBarStaticAndroidExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar dimensions',
+  render() {
+    return (
+      <View>
+        <Text>Height: {StatusBar.currentHeight} pts</Text>
+      </View>
+    );
+  },
+  platform: 'android',
 }];
 
+exports.examples = examples;
+
 var styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,

Examples/UIExplorer/StatusBarIOSExample.js

@@ -15,14 +15,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   View,
   Text,
   TouchableHighlight,
   StatusBarIOS,
-} = React;
+} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'StatusBarIOS';

Examples/UIExplorer/SwitchExample.js

@@ -15,12 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
+  Platform,
   Switch,
   Text,
   View
-} = React;
+} = ReactNative;
 
 var BasicSwitchExample = React.createClass({
   getInitialState() {
@@ -144,7 +146,7 @@ var examples = [
   }
 ];
 
-if (React.Platform.OS === 'ios') {
+if (Platform.OS === 'ios') {
   examples.push({
     title: 'Custom colors can be provided',
     render(): ReactElement { return <ColorSwitchExample />; }

Examples/UIExplorer/TabBarIOSExample.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   TabBarIOS,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 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==';
 

Examples/UIExplorer/TextExample.android.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
@@ -214,6 +215,23 @@ var TextExample = React.createClass({
             Move fast and be bold
           </Text>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Text Decoration">
+          <Text style={{textDecorationLine: 'underline'}}>
+            Solid underline
+          </Text>
+          <Text style={{textDecorationLine: 'none'}}>
+            None textDecoration
+          </Text>
+          <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
+            Solid line-through
+          </Text>
+          <Text style={{textDecorationLine: 'underline line-through'}}>
+            Both underline and line-through
+          </Text>
+          <Text>
+            Mixed text with <Text style={{textDecorationLine: 'underline'}}>underline</Text> and <Text style={{textDecorationLine: 'line-through'}}>line-through</Text> text nodes
+          </Text>
+        </UIExplorerBlock>
         <UIExplorerBlock title="Nested">
           <Text onPress={() => console.log('1st')}>
             (Normal text,

Examples/UIExplorer/TextExample.ios.js

@@ -15,13 +15,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var Entity = React.createClass({
   render: function() {