[0.26.3] Bump version numbers

Summary:
Reuses the original property descriptor when overwriting / polyfilling globals to ensure enumerability and writability are the same
Closes https://github.com/facebook/react-native/pull/7704

Differential Revision: D3338119

Pulled By: davidaurelio

fbshipit-source-id: ab456324a3346cd3ec8b2c3e3a2378408c92087c

.buckconfig

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

.flowconfig

@@ -15,8 +15,6 @@
 # Ignore react and fbjs where there are overlaps, but don't ignore
 # anything that react-native relies on
 .*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/fetch.js
-.*/node_modules/fbjs/lib/ExecutionEnvironment.js
 .*/node_modules/fbjs/lib/ErrorUtils.js
 
 # Flow has a built-in definition for the 'react' module which we prefer to use
@@ -81,15 +79,15 @@ esproposal.class_instance_fields=enable
 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\)$' -> 'RelativeImageStub'
+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\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-^0.22.0
+0.24.0

.travis.yml

@@ -1,14 +1,14 @@
 language: objective-c
 
-osx_image: xcode7.2
+osx_image: xcode7.3
 
 install:
-  - brew reinstall nvm
   - mkdir -p /Users/travis/build/facebook/.nvm
   - export NVM_DIR="/Users/travis/build/facebook/.nvm"
+  - brew install nvm
   - source $(brew --prefix nvm)/nvm.sh
   # testing with npm@2 for diversity, Circle tests with npm@3
-  - nvm install 4.4.0
+  - nvm install 4.4.3
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm config set progress=false
@@ -16,16 +16,15 @@ install:
 
 script:
   - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
-  - if [[ "$TEST_TYPE" = e2e-objc ]]; then travis_retry ./scripts/e2e-test.sh --ios; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
-  - if [[ "$TEST_TYPE" = js ]]; then travis_retry ./scripts/e2e-test.sh --packager; fi
 
 env:
   matrix:
+    - TEST_TYPE=e2e-objc
     - TEST_TYPE=objc
     - TEST_TYPE=js
-    - TEST_TYPE=e2e-objc
 
 branches:
   only:

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -267,7 +267,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -285,7 +288,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};

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');
@@ -44,9 +45,6 @@ var MovieCell = React.createClass({
           onShowUnderlay={this.props.onHighlight}
           onHideUnderlay={this.props.onUnhighlight}>
           <View style={styles.row}>
-            {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
-              * omit a property or set it to undefined if it's inside a shape,
-              * even if it isn't required */}
             <Image
               source={getImageSource(this.props.movie, 'det')}
               style={styles.cellImage}

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');
@@ -33,9 +34,6 @@ var MovieScreen = React.createClass({
     return (
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <View style={styles.mainSection}>
-          {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
-            * omit a property or set it to undefined if it's inside a shape,
-            * even if it isn't required */}
           <Image
             source={getImageSource(this.props.movie, 'det')}
             style={styles.detailsImage}

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -357,7 +357,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
@@ -376,7 +379,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";

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/__tests__/getImageSource-test.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-jest.dontMock('../getImageSource');
+jest.unmock('../getImageSource');
 
 var getImageSource = require('../getImageSource');
 

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/TicTacToe.xcodeproj/project.pbxproj

@@ -327,7 +327,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -345,7 +348,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};

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,12 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
   View
-} = React;
+} = ReactNative;
 
 var styles = StyleSheet.create({
   box: {

Examples/UIExplorer/BoxShadowExample.js

@@ -13,12 +13,13 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+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');

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/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

@@ -22,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(),
     };
   },
@@ -57,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>
@@ -172,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}}/>
       );
     },
   },
@@ -425,16 +448,18 @@ exports.examples = [
                     source={image}
                   />
                 </View>
-                <View style={styles.leftMargin}>
-                  <Text style={[styles.resizeModeText]}>
-                    Center
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.center}
-                    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>
           );

Examples/UIExplorer/LayoutAnimationExample.js

@@ -0,0 +1,171 @@
+/**
+ * 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';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} = ReactNative;
+
+const AddRemoveExample = React.createClass({
+
+  getInitialState() {
+    return {
+      views: [],
+    };
+  },
+
+  componentWillUpdate() {
+    LayoutAnimation.easeInEaseOut();
+  },
+
+  _onPressAddView() {
+    this.setState((state) => ({views: [...state.views, {}]}));
+  },
+
+  _onPressRemoveView() {
+    this.setState((state) => ({views: state.views.slice(0, -1)}));
+  },
+
+  render() {
+    const views = this.state.views.map((view, i) =>
+      <View key={i} style={styles.view}>
+        <Text>{i}</Text>
+      </View>
+    );
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressAddView}>
+          <View style={styles.button}>
+            <Text>Add view</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressRemoveView}>
+          <View style={styles.button}>
+            <Text>Remove view</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {views}
+        </View>
+      </View>
+    );
+  },
+});
+
+const GreenSquare = () =>
+  <View style={styles.greenSquare}>
+    <Text>Green square</Text>
+  </View>;
+
+const BlueSquare = () =>
+  <View style={styles.blueSquare}>
+    <Text>Blue square</Text>
+  </View>;
+
+const CrossFadeExample = React.createClass({
+
+  getInitialState() {
+    return {
+      toggled: false,
+    };
+  },
+
+  _onPressToggle() {
+    LayoutAnimation.easeInEaseOut();
+    this.setState((state) => ({toggled: !state.toggled}));
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressToggle}>
+          <View style={styles.button}>
+            <Text>Toggle</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {
+            this.state.toggled ?
+            <GreenSquare /> :
+            <BlueSquare />
+          }
+        </View>
+      </View>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  button: {
+    borderRadius: 5,
+    backgroundColor: '#eeeeee',
+    padding: 10,
+    marginBottom: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  viewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  view: {
+    height: 54,
+    width: 54,
+    backgroundColor: 'red',
+    margin: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  greenSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'green',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blueSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'blue',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+exports.title = 'Layout Animation';
+exports.description = 'Layout animation';
+exports.examples = [{
+  title: 'Add and remove views',
+  render(): ReactElement {
+    return <AddRemoveExample />;
+  },
+}, {
+  title: 'Cross fade views',
+  render(): ReactElement {
+    return <CrossFadeExample />;
+  },
+}];

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,7 +15,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Modal,
   StyleSheet,
@@ -23,7 +24,7 @@ var {
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -65,7 +66,7 @@ var Button = React.createClass({
 var ModalExample = React.createClass({
   getInitialState() {
     return {
-      animated: true,
+      animationType: 'none',
       modalVisible: false,
       transparent: false,
     };
@@ -75,8 +76,8 @@ var ModalExample = React.createClass({
     this.setState({modalVisible: visible});
   },
 
-  _toggleAnimated() {
-    this.setState({animated: !this.state.animated});
+  _setAnimationType(type) {
+    this.setState({animationType: type});
   },
 
   _toggleTransparent() {
@@ -90,18 +91,21 @@ var ModalExample = React.createClass({
     var innerContainerTransparentStyle = this.state.transparent
       ? {backgroundColor: '#fff', padding: 20}
       : null;
+    var activeButtonStyle = {
+      backgroundColor: '#ddd'
+    };
 
     return (
       <View>
         <Modal
-          animated={this.state.animated}
+          animationType={this.state.animationType}
           transparent={this.state.transparent}
           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>
+              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
               <Button
                 onPress={this._setModalVisible.bind(this, false)}
                 style={styles.modalButton}>
@@ -110,10 +114,17 @@ var ModalExample = React.createClass({
             </View>
           </View>
         </Modal>
-
         <View style={styles.row}>
-          <Text style={styles.rowTitle}>Animated</Text>
-          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
+          <Text style={styles.rowTitle}>Animation Type</Text>
+          <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
+            none
+          </Button>
+          <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
+            slide
+          </Button>
+          <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
+            fade
+          </Button>
         </View>
 
         <View style={styles.row}>

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

@@ -20,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');

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

@@ -20,14 +20,15 @@
 */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 
 const {
   Animated,
   NavigationExperimental,
   StyleSheet,
   ScrollView,
-} = React;
+} = ReactNative;
 
 const  NavigationExampleRow = require('./NavigationExampleRow');
 

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

@@ -21,13 +21,14 @@
 'use strict';
 
 const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 
 const {
   NavigationExperimental,
   StyleSheet,
   ScrollView,
-} = React;
+} = ReactNative;
 
 const {
   CardStack: NavigationCardStack,
@@ -142,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

@@ -22,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');
 
@@ -31,7 +32,7 @@ const {
   ScrollView,
   StyleSheet,
   View,
-} = React;
+} = ReactNative;
 
 const {
   CardStack: NavigationCardStack,

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,

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/PickerExample.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() {

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() {
@@ -42,11 +43,17 @@ var Button = React.createClass({
 
 class NotificationExample extends React.Component {
   componentWillMount() {
+    // Add listener for push notifications
     PushNotificationIOS.addEventListener('notification', this._onNotification);
+    // Add listener for local notifications
+    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);
   }
 
   componentWillUnmount() {
+    // Remove listener for push notifications
     PushNotificationIOS.removeEventListener('notification', this._onNotification);
+    // Remove listener for local notifications
+    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
   }
 
   render() {
@@ -56,6 +63,11 @@ class NotificationExample extends React.Component {
           onPress={this._sendNotification}
           label="Send fake notification"
         />
+
+        <Button
+          onPress={this._sendLocalNotification}
+          label="Send fake local notification"
+        />
       </View>
     );
   }
@@ -71,9 +83,31 @@ class NotificationExample extends React.Component {
     });
   }
 
+  _sendLocalNotification() {
+    require('RCTDeviceEventEmitter').emit('localNotificationReceived', {
+      aps: {
+        alert: 'Sample local notification',
+        badge: '+1',
+        sound: 'default',
+        category: 'REACT_NATIVE'
+      },
+    });
+  }
+
   _onNotification(notification) {
     AlertIOS.alert(
-      'Notification Received',
+      'Push Notification Received',
+      'Alert message: ' + notification.getMessage(),
+      [{
+        text: 'Dismiss',
+        onPress: null,
+      }]
+    );
+  }
+
+  _onLocalNotification(notification){
+    AlertIOS.alert(
+      'Local Notification Received',
       'Alert message: ' + notification.getMessage(),
       [{
         text: 'Dismiss',

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,14 +15,15 @@
  */
 'use strict';
 
-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
   StatusBar,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 exports.framework = 'React';
 exports.title = '<StatusBar>';

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==';
 
@@ -53,6 +54,7 @@ var TabBarExample = React.createClass({
   render: function() {
     return (
       <TabBarIOS
+        unselectedTintColor="yellow"
         tintColor="white"
         barTintColor="darkslateblue">
         <TabBarIOS.Item
@@ -80,6 +82,7 @@ var TabBarExample = React.createClass({
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./flux.png')}
+          renderAsOriginal
           title="More"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {

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,