[0.37.0] Bump version numbers

[0.37.0-rc.4] Bump version numbers
CLI: Only use yarn if global CLI uses it
2025-11-01 09:14:26 +00:00 · 2016-11-08 00:19:54 +01:00 · 2016-11-05 19:41:24 +00:00 · 2016-11-05 19:40:43 +00:00 · 2016-11-03 21:05:36 +00:00 · 2016-11-03 21:04:25 +00:00
433 changed files with 6696 additions and 5942 deletions
@@ -9,3 +9,6 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
+
+[*.gradle]
+indent_size = 4
@@ -1,42 +1,21 @@
-## Hey there and thank you for using React Native!
+We use GitHub Issues for bugs.

-React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. Before opening a new issue, make sure to carefully read the following guidelines.
+If you have a non-bug question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native

- Is this something you can **debug and fix**? 
-  Send a pull request! Bug fixes and documentation fixes are welcome.
- Have a **usage** question?
-  We use GitHub Issues for bugs. Ask your usage question on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
- Have an idea for a **feature**? 
-  Post the feature request on Product Pains, which has a voting system to surface important issues: https://productpains.com/product/react-native/
+If you have a feature request, post it on Product Pains: https://productpains.com/product/react-native/

-GitHub issues should only be used for bugs. Make sure these boxes are checked before submitting your issue:
+--- Please use this template, and delete everything above this line before submitting your issue --- 

- [ ] You're using the latest release of React Native: https://github.com/facebook/react-native/releases
+### Description

- [ ] You've searched through existing issues: https://github.com/facebook/react-native/issues 
-      Chances are that your issue has been reported or resolved before.
+[FILL THIS OUT: Explain what you did, what you expected to happen, and what actually happens.]

- [ ] You have filled out the template below, or provided an equivalent amount of detail.
-      Issues without sufficient information will be labeled 'Needs more information' and will be closed until there is enough information.
+### Reproduction

-Describe your issue in as much detail as possible. Provide **screenshots** where appropriate. Provide a **minimal code snippet** / [rnplay](https://rnplay.org/) example that reproduces the bug, or include a list of detailed list of steps that reproduce the issue.
-
--- delete everything above this line before submitting your issue --- 
-
-### Issue Description
-
-[FILL THIS OUT]
-
-### Steps to Reproduce / Code Snippets
-
-[FILL THIS OUT]
-
-#### Expected Results
-
-[FILL THIS OUT]
+[FILL THIS OUT: Try to reproduce your bug on rnplay.org and provide a link. If you can't reproduce the bug on rnplay.org, provide a sample project.]

 ### Additional Information

 * React Native version: [FILL THIS OUT]
-* Platform(s) (iOS, Android, or both?): [FILL THIS OUT]
-* Operating System (macOS, Linux, or Windows?): [FILL THIS OUT]
+* Platform: [FILL THIS OUT: iOS, Android, or both?]
+* Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
@@ -10,12 +10,12 @@ install:
  # TODO npm 2 started stalling on Travis, t11852928
  - nvm install 5
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
-  - npm config set spin=false
-  - npm config set progress=false
-  - travis_wait npm install
+  - wget https://github.com/yarnpkg/yarn/releases/download/v0.16.0/yarn-0.16.0.js
+  - export yarn="node $(pwd)/yarn-0.16.0.js"
+  - $yarn install

 script:
-  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry travis_wait ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait ./scripts/objc-test-ios.sh; fi
  - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait ./scripts/objc-test-tvos.sh; fi
  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
@@ -24,7 +24,7 @@ script:
 env:
  matrix:
    - TEST_TYPE=e2e-objc
-    - TEST_TYPE=objc
+    - TEST_TYPE=objc-ios
    - TEST_TYPE=objc-tvos
    - TEST_TYPE=js

@@ -87,6 +87,7 @@
 		2D4BD8E61DA2E20D005AC8A8 /* TestBundle.js in Resources */ = {isa = PBXBuildFile; fileRef = 3DD981D51D33C6FB007DC7BE /* TestBundle.js */; };
 		2D4BD8E71DA2E20D005AC8A8 /* libOCMock.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14D6D7101B220EB3001FB087 /* libOCMock.a */; };
 		2D8C2E321DA40403000EE098 /* RCTMultipartStreamReaderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 001BFCE31D838343008E587E /* RCTMultipartStreamReaderTests.m */; };
+		2DD0EFF41DA853B200B0C975 /* libRCTPushNotification-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2DD0EFF31DA853B200B0C975 /* libRCTPushNotification-tvOS.a */; };
 		2DD323DC1DA2DDBF000FE1B8 /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
 		2DD323DD1DA2DDBF000FE1B8 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; };
 		2DD323DE1DA2DDBF000FE1B8 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
@@ -210,6 +211,13 @@
 			remoteGlobalIDString = 2DD3238F1DA2DD8A000FE1B8;
 			remoteInfo = "UIExplorer-tvOS";
 		};
+		2DD0EFF21DA853B200B0C975 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 14DC67E71AB71876001358AB /* RCTPushNotification.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2DD0EFE61DA8533A00B0C975;
+			remoteInfo = "RCTPushNotification-tvOS";
+		};
 		2DD323A61DA2DD8B000FE1B8 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
@@ -459,6 +467,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				2DD0EFF41DA853B200B0C975 /* libRCTPushNotification-tvOS.a in Frameworks */,
 				2DD323E31DA2DE3F000FE1B8 /* libRCTAnimation-tvOS.a in Frameworks */,
 				2DD323E41DA2DE3F000FE1B8 /* libRCTImage-tvOS.a in Frameworks */,
 				2DD323E51DA2DE3F000FE1B8 /* libRCTLinking-tvOS.a in Frameworks */,
@@ -700,6 +709,7 @@
 			isa = PBXGroup;
 			children = (
 				14DC67F11AB71876001358AB /* libRCTPushNotification.a */,
+				2DD0EFF31DA853B200B0C975 /* libRCTPushNotification-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -1121,6 +1131,13 @@
 			remoteRef = 14DC67F01AB71876001358AB /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		2DD0EFF31DA853B200B0C975 /* libRCTPushNotification-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTPushNotification-tvOS.a";
+			remoteRef = 2DD0EFF21DA853B200B0C975 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		2DD323B51DA2DD8B000FE1B8 /* libRCTAnimation-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -73,9 +73,11 @@
 }

 - (void)loadSourceForBridge:(RCTBridge *)bridge
-                  withBlock:(RCTSourceLoadBlock)loadCallback
+                 onProgress:(RCTSourceLoadProgressBlock)onProgress
+                 onComplete:(RCTSourceLoadBlock)loadCallback
 {
  [RCTJavaScriptLoader loadBundleAtURL:[self sourceURLForBridge:bridge]
+                            onProgress:onProgress
                            onComplete:loadCallback];
 }

@@ -1,79 +0,0 @@
-// Copyright 2004-present Facebook. All Rights Reserved.
-
-#import <UIKit/UIKit.h>
-#import <XCTest/XCTest.h>
-
-#import <OCMock/OCMock.h>
-
-@interface LayoutSubviewsOrderingTest : XCTestCase
-
-@end
-
-@implementation LayoutSubviewsOrderingTest
-
-/**
- * This test exists to insure that didLayoutSubviews is always called immediately after layoutSubviews for a VC:View
- * pair. In Catalyst we have multiple levels of ViewController containment, and we rely on this ordering
- * to insure that layoutGuides are set on RKViewControllers before Views further down in the hierarchy have
- * their layoutSubviews called (and need to use the aforementioned layoutGuides)
- */
- (void)testLayoutSubviewsOrdering
-{
-  // create some Views and ViewControllers
-  UIViewController *parentVC = [UIViewController new];
-  UIView *parentView = [UIView new];
-  UIViewController *childVC = [UIViewController new];
-  UIView *childView = [UIView new];
-
-  // The ordering we expect is:
-  //   parentView::layoutSubviews
-  //   parentVC::didLayoutSubviews
-  //   childView::layoutSubviews
-  //   childVC::didLayoutSubviews
-
-  id parentViewMock = [OCMockObject partialMockForObject:parentView];
-  id parentVCMock = [OCMockObject partialMockForObject:parentVC];
-  id childViewMock = [OCMockObject partialMockForObject:childView];
-  id childVCMock = [OCMockObject partialMockForObject:childVC];
-
-  __block int layoutOrderCount = 0;
-  [[[parentViewMock stub] andDo:^(NSInvocation *inv) {
-    if (layoutOrderCount < 4) {
-      layoutOrderCount++;
-      XCTAssertEqual(layoutOrderCount, 1, @"Expect parentView::layoutSubviews to be called first");
-    }
-  }] layoutSubviews];
-  [[[parentVCMock stub] andDo:^(NSInvocation *inv) {
-    if (layoutOrderCount < 4) {
-      layoutOrderCount++;
-      XCTAssertEqual(layoutOrderCount, 2, @"Expect parentVC::viewDidLayoutSubviews to be called 2nd");
-    }
-  }] viewDidLayoutSubviews];
-  [[[childViewMock stub] andDo:^(NSInvocation *inv) {
-    if (layoutOrderCount < 4) {
-      layoutOrderCount++;
-      XCTAssertEqual(layoutOrderCount, 3, @"Expect childView::layoutSubviews to be called 3rd");
-    }
-  }] layoutSubviews];
-  [[[childVCMock stub] andDo:^(NSInvocation *inv) {
-    if (layoutOrderCount < 4) {
-      layoutOrderCount++;
-      XCTAssertEqual(layoutOrderCount, 4, @"Expect childVC::viewDidLayoutSubviews to be called last");
-      [childVCMock stopMocking];
-    }
-  }] viewDidLayoutSubviews];
-
-  // setup View hierarchy and force layout
-  parentVC.view = parentView;
-  childVC.view = childView;
-  [parentVC addChildViewController:childVC];
-  [childVC didMoveToParentViewController:parentVC];
-  [parentView addSubview:childView];
-
-  [childViewMock setNeedsLayout];
-  [parentViewMock layoutIfNeeded];
-
-  XCTAssertEqual(layoutOrderCount, 4, @"Expect layoutSubviews/viewDidLayoutSubviews to be called");
-}
-
-@end
@@ -24,8 +24,12 @@

@implementation RCTFontTests

+// It can happen (particularly in tvOS simulator) that expected and result font objects
+// will be different objects, but the same font, so this macro now explicitly
+// checks that fontName (which includes the style) and pointSize are equal.
 #define RCTAssertEqualFonts(font1, font2) { \
-  XCTAssertEqualObjects(font1, font2); \
+  XCTAssertTrue([font1.fontName isEqualToString:font2.fontName]); \
+  XCTAssertEqual(font1.pointSize,font2.pointSize); \
 }

 - (void)testWeight
@@ -68,6 +68,6 @@ exports.description = 'Interface to show iOS\' accessibility samples';
 exports.examples = [
  {
    title: 'Accessibility elements',
-    render(): ReactElement<any> { return <AccessibilityIOSExample />; }
+    render(): React.Element<any> { return <AccessibilityIOSExample />; }
  },
 ];
@@ -197,27 +197,27 @@ exports.description = 'Interface to show iOS\' action sheets';
 exports.examples = [
  {
    title: 'Show Action Sheet',
-    render(): ReactElement<any> { return <ActionSheetExample />; }
+    render(): React.Element<any> { return <ActionSheetExample />; }
  },
  {
    title: 'Show Action Sheet with tinted buttons',
-    render(): ReactElement<any> { return <ActionSheetTintExample />; }
+    render(): React.Element<any> { return <ActionSheetTintExample />; }
  },
  {
    title: 'Show Share Action Sheet',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <ShareActionSheetExample url="https://code.facebook.com" />;
    }
  },
  {
    title: 'Share Local Image',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <ShareActionSheetExample url="bunny.png" />;
    }
  },
  {
    title: 'Share Screenshot',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <ShareScreenshotExample />;
    }
  }
@@ -38,7 +38,7 @@ exports.description = 'Example of using the ad support API.';
 exports.examples = [
  {
    title: 'Ad Support IOS',
-    render: function(): ReactElement<any> {
+    render: function(): React.Element<any> {
      return <AdSupportIOSExample />;
    },
  }
@@ -45,7 +45,7 @@ exports.examples = [{
 },
 {
  title: 'Prompt Options',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <PromptOptions />;
  }
 },
@@ -89,7 +89,7 @@ class Circle extends React.Component {
    });
  }

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

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    var circles = this.state.keys.map((key, idx) => {
      if (key === this.state.activeKey) {
        return <Circle key={key + 'd'} dummy={true} />;
@@ -27,7 +27,6 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
-  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -96,7 +95,7 @@ class AnExBobble extends React.Component {
    });
  }

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <View style={styles.bobbleContainer}>
        {this.state.bobbles.map((_, i) => {
@@ -27,7 +27,6 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
-  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -52,7 +52,7 @@ class AnExSet extends React.Component {
      openColor: randColor(),
    };
  }
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    var backgroundColor = this.props.openVal ?
      this.props.openVal.interpolate({
        inputRange: [0, 1],
@@ -27,10 +27,8 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
-  Image,
  PanResponder,
  StyleSheet,
-  View,
 } = ReactNative;

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

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <Animated.View
        {...this.state.tiltPanResponder.panHandlers}
@@ -95,16 +95,16 @@ exports.examples = [
  {
    title: 'Subscribed AppState:',
    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; }
+    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={true} />; }
  },
  {
    title: 'Previous states:',
-    render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; }
+    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={false} />; }
  },
  {
    platform: 'ios',
    title: 'Memory Warnings',
    description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
-    render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
+    render(): React.Element<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
  },
 ];
@@ -120,6 +120,6 @@ exports.description = 'Asynchronous local disk storage.';
 exports.examples = [
  {
    title: 'Basics - getItem, setItem, removeItem',
-    render(): ReactElement<any> { return <BasicStorageExample />; }
+    render(): React.Element<any> { return <BasicStorageExample />; }
  },
 ];
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Alert,
+  Button,
+  View,
+} = ReactNative;
+
+const onButtonPress = () => {
+  Alert.alert('Button has been pressed!');
+};
+
+exports.displayName = 'ButtonExample';
+exports.framework = 'React';
+exports.title = '<Button>';
+exports.description = 'Simple React Native button component.';
+
+exports.examples = [
+  {
+    title: 'Simple Button',
+    description: 'The title and onPress handler are required. It is ' +
+      'recommended to set accessibilityLabel to help make your app usable by ' +
+      'everyone.',
+    render: function() {
+      return (
+        <Button
+          onPress={onButtonPress}
+          title="Press Me"
+          accessibilityLabel="See an informative alert"
+        />
+      );
+    },
+  },
+  {
+    title: 'Adjusted color',
+    description: 'Adjusts the color in a way that looks standard on each ' +
+      'platform. On iOS, the color prop controls the color of the text. On ' +
+      'Android, the color adjusts the background color of the button.',
+    render: function() {
+      return (
+        <Button
+          onPress={onButtonPress}
+          title="Press Purple"
+          color="#841584"
+          accessibilityLabel="Learn more about purple"
+        />
+      );
+    },
+  },
+  {
+    title: 'Fit to text layout',
+    description: 'This layout strategy lets the title define the width of ' +
+      'the button',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Button
+            onPress={onButtonPress}
+            title="This looks great!"
+            accessibilityLabel="This sounds great!"
+          />
+          <Button
+            onPress={onButtonPress}
+            title="Ok!"
+            color="#841584"
+            accessibilityLabel="Ok, Great!"
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Disabled Button',
+    description: 'All interactions for the component are disabled.',
+    render: function() {
+      return (
+        <Button
+          disabled
+          onPress={onButtonPress}
+          title="I Am Disabled"
+          accessibilityLabel="See an informative alert"
+        />
+      );
+    },
+  },
+];
@@ -35,7 +35,7 @@ const {
  TouchableOpacity
 } = ReactNative;

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

 const CameraRollView = require('./CameraRollView');

@@ -143,6 +143,6 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
 exports.examples = [
  {
    title: 'Photos',
-    render(): ReactElement<any> { return <CameraRollExample />; }
+    render(): React.Element<any> { return <CameraRollExample />; }
  }
 ];
@@ -135,7 +135,7 @@ exports.description = 'Select dates and times using the native UIDatePicker.';
 exports.examples = [
 {
  title: '<DatePickerIOS>',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <DatePickerExample />;
  },
 }];
@@ -23,16 +23,18 @@
 */
 'use strict';

+import type React from 'react';
+
 export type Example = {
  title: string,
-  render: () => ?ReactElement<any>,
+  render: () => ?React.Element<any>,
  description?: string,
-  platform?: string;
+  platform?: string,
 };

 export type ExampleModule = {
-  title: string;
-  description: string;
-  examples: Array<Example>;
-  external?: bool;
+  title: string,
+  description: string,
+  examples: Array<Example>,
+  external?: bool,
 };
@@ -39,7 +39,7 @@ exports.description = 'Examples of using the Geolocation API.';
 exports.examples = [
  {
    title: 'navigator.geolocation',
-    render: function(): ReactElement<any> {
+    render: function(): React.Element<any> {
      return <GeolocationExample />;
    },
  }
@@ -28,13 +28,11 @@ var {
  CameraRoll,
  Image,
  ImageEditor,
-  NativeModules,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
-  UIManager,
  View,
 } = ReactNative;

@@ -161,12 +161,12 @@ exports.title = 'Layout Animation';
 exports.description = 'Layout animation';
 exports.examples = [{
  title: 'Add and remove views',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <AddRemoveExample />;
  },
 }, {
  title: 'Cross fade views',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <CrossFadeExample />;
  },
 }];
@@ -170,7 +170,7 @@ exports.description = 'Examples that show how Layout events can be used to ' +
 exports.examples = [
 {
  title: 'LayoutEventExample',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <LayoutEventExample />;
  },
 }];
@@ -142,7 +142,7 @@ class ListViewPagingExample extends React.Component {
    };
  }

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

@@ -320,7 +320,7 @@ exports.examples = [
    },
  },
  {
-    title: 'Scale interpolation',
+    title: 'Scale interpolation with clamping',
    description: 'description',
    render: function() {
      return (
@@ -335,8 +335,9 @@ exports.examples = [
                  transform: [
                    {
                      scale: anim.interpolate({
-                        inputRange: [0, 1],
+                        inputRange: [0, 0.5],
                        outputRange: [1, 1.4],
+                        extrapolateRight: 'clamp',
                      })
                    }
                  ],
@@ -166,7 +166,7 @@ function createAppNavigationContainer(ComponentClass) {
      };
    }

-    render(): ReactElement {
+    render(): React.Element {
      const navigate = this.context[key] || this.props.navigate;
      return <ComponentClass {...this.props} navigate={navigate} />;
    }
@@ -191,7 +191,7 @@ class YourApplication extends Component {
    this._navigate = this._navigate.bind(this);
  }

-  render(): ReactElement {
+  render(): React.Element {
    // User your own navigator (see next step).
    return (
      <YourNavigator
@@ -255,7 +255,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
  }

  // Now use the `NavigationCardStack` to render the scenes.
-  render(): ReactElement {
+  render(): React.Element {
    const {appNavigationState} = this.props;
    const {tabs} = appNavigationState;
    const tabKey = tabs.routes[tabs.index].key;
@@ -281,7 +281,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
  // Render the header.
  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
  // as type `NavigationSceneRendererProps`.
-  _renderHeader(sceneProps: Object): ReactElement {
+  _renderHeader(sceneProps: Object): React.Element {
    return (
      <YourHeader
        {...sceneProps}
@@ -292,7 +292,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
  // Render a scene for route.
  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
  // as type `NavigationSceneRendererProps`.
-  _renderScene(sceneProps: Object): ReactElement {
+  _renderScene(sceneProps: Object): React.Element {
    return (
      <YourScene
        {...sceneProps}
@@ -319,7 +319,7 @@ const YourHeader = createAppNavigationContainer(class extends Component {
    this._renderTitleComponent = this._renderTitleComponent.bind(this);
  }

-  render(): ReactElement {
+  render(): React.Element {
    return (
      <NavigationHeader
        {...this.props}
@@ -333,7 +333,7 @@ const YourHeader = createAppNavigationContainer(class extends Component {
    this.props.navigate({type: 'pop'});
  }

-  _renderTitleComponent(props: Object): ReactElement {
+  _renderTitleComponent(props: Object): React.Element {
    return (
      <NavigationHeader.Title>
        {props.scene.route.key}
@@ -357,7 +357,7 @@ const YourScene = createAppNavigationContainer(class extends Component {
    this._pushRoute = this._pushRoute.bind(this);
  }

-  render(): ReactElement {
+  render(): React.Element {
    return (
      <ScrollView>
        <NavigationExampleRow
@@ -403,7 +403,7 @@ const YourTabs = createAppNavigationContainer(class extends Component {
    super(props, context);
  }

-  render(): ReactElement {
+  render(): React.Element {
    return (
      <View style={styles.tabs}>
        {this.props.navigationState.routes.map(this._renderTab, this)}
@@ -411,7 +411,7 @@ const YourTabs = createAppNavigationContainer(class extends Component {
    );
  }

-  _renderTab(route: Object, index: number): ReactElement {
+  _renderTab(route: Object, index: number): React.Element {
    return (
      <YourTab
        key={route.key}
@@ -437,7 +437,7 @@ const YourTab = createAppNavigationContainer(class extends Component {
    this._onPress = this._onPress.bind(this);
  }

-  render(): ReactElement {
+  render(): React.Element {
    const style = [styles.tabText];
    if (this.props.selected) {
      style.push(styles.tabSelected);
@@ -60,7 +60,7 @@ class YourApplication extends React.Component {
  }

  // User your own navigator (see Step 2).
-  render(): ReactElement {
+  render(): React.Element {
    return (
      <YourNavigator
        navigationState={this.state.navigationState}
@@ -134,7 +134,7 @@ class YourNavigator extends React.Component {
  }

  // Now use the `NavigationCardStack` to render the scenes.
-  render(): ReactElement {
+  render(): React.Element {
    return (
      <NavigationCardStack
        onNavigateBack={this._onPopRoute}
@@ -149,7 +149,7 @@ class YourNavigator extends React.Component {
  // Render a scene for route.
  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
  // as type `NavigationSceneRendererProps`.
-  _renderScene(sceneProps: Object): ReactElement {
+  _renderScene(sceneProps: Object): React.Element {
    return (
      <YourScene
        route={sceneProps.scene.route}
@@ -60,7 +60,7 @@ class YourApplication extends React.Component {
  }

  // User your own navigator (see Step 2).
-  render(): ReactElement {
+  render(): React.Element {
    return (
      <YourNavigator
        navigationState={this.state.navigationState}
@@ -134,7 +134,7 @@ class YourNavigator extends React.Component {
  }

  // Now use the `NavigationCardStack` to render the scenes.
-  render(): ReactElement {
+  render(): React.Element {
    return (
      <NavigationCardStack
        onNavigateBack={this._onPopRoute}
@@ -148,7 +148,7 @@ class YourNavigator extends React.Component {
  // Render a scene for route.
  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
  // as type `NavigationSceneRendererProps`.
-  _renderScene(sceneProps: Object): ReactElement {
+  _renderScene(sceneProps: Object): React.Element {
    return (
      <YourScene
        route={sceneProps.scene.route}
@@ -84,7 +84,7 @@ class Example extends Component {
    this.state = reducer();
  }

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <ExampleNavigator
        navigationState={this.state}
@@ -128,7 +128,7 @@ class ExampleNavigator extends Component {
    navigate: PropTypes.func.isRequired,
  };

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <NavigationTransitioner
        navigationState={this.props.navigationState}
@@ -140,7 +140,7 @@ class ExampleNavigator extends Component {

  _render(
    transitionProps: NavigationTransitionProps,
-  ): Array<ReactElement<any>> {
+  ): Array<React.Element<any>> {
    return transitionProps.scenes.map((scene) => {
      const sceneProps = {
        ...transitionProps,
@@ -152,7 +152,7 @@ class ExampleNavigator extends Component {

  _renderScene(
    sceneProps: NavigationSceneRendererProps,
-  ): ReactElement<any> {
+  ): React.Element<any> {
    return (
      <ExampleScene
        {...sceneProps}
@@ -181,7 +181,7 @@ class ExampleScene extends Component {
    navigate: PropTypes.func.isRequired,
  };

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    const {scene, navigate} = this.props;
    return (
      <Animated.View
@@ -95,7 +95,7 @@ class Example extends Component {
    this.state = reducer();
  }

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <View style={styles.example}>
        <ExampleNavigator
@@ -154,7 +154,7 @@ class ExampleNavigator extends Component {
    this._renderScene = this._renderScene.bind(this);
  }

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <NavigationTransitioner
        navigationState={this.props.navigationState}
@@ -165,7 +165,7 @@ class ExampleNavigator extends Component {

  _render(
    transitionProps: NavigationTransitionProps,
-  ): ReactElement<any> {
+  ): React.Element<any> {
    const scenes = transitionProps.scenes.map((scene) => {
      const sceneProps = {
        ...transitionProps,
@@ -182,7 +182,7 @@ class ExampleNavigator extends Component {

  _renderScene(
    sceneProps: NavigationSceneRendererProps,
-  ): ReactElement<any> {
+  ): React.Element<any> {
    return (
      <ExampleScene
        {...sceneProps}
@@ -203,7 +203,7 @@ class ExampleScene extends Component {
    navigate: PropTypes.func.isRequired,
  };

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    const {scene, navigate} = this.props;

    const panHandlers = NavigationPagerPanResponder.forHorizontal({
@@ -175,22 +175,22 @@ exports.examples = [
  {
    title: 'NetInfo.isConnected',
    description: 'Asynchronously load and observe connectivity',
-    render(): ReactElement<any> { return <IsConnected />; }
+    render(): React.Element<any> { return <IsConnected />; }
  },
  {
    title: 'NetInfo.update',
    description: 'Asynchronously load and observe connectionInfo',
-    render(): ReactElement<any> { return <ConnectionInfoCurrent />; }
+    render(): React.Element<any> { return <ConnectionInfoCurrent />; }
  },
  {
    title: 'NetInfo.updateHistory',
    description: 'Observed updates to connectionInfo',
-    render(): ReactElement<any> { return <ConnectionInfoSubscription />; }
+    render(): React.Element<any> { return <ConnectionInfoSubscription />; }
  },
  {
    platform: 'android',
    title: 'NetInfo.isConnectionExpensive (Android)',
    description: 'Asynchronously check isConnectionExpensive',
-    render(): ReactElement<any> { return <IsConnectionExpensive />; }
+    render(): React.Element<any> { return <IsConnectionExpensive />; }
  },
 ];
@@ -28,7 +28,6 @@ var {
  PanResponder,
  StyleSheet,
  View,
-  processColor,
 } = ReactNative;

 var CIRCLE_SIZE = 80;
@@ -31,7 +31,6 @@ const UIExplorerPage = require('UIExplorerPage');
 const {
  Picker,
  Text,
-  TouchableWithoutFeedback,
 } = ReactNative;

 const Item = Picker.Item;
@@ -122,8 +122,6 @@ class PickerStyleExample extends React.Component {
  };

  render() {
-    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
-    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
      <PickerIOS
        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
@@ -147,13 +145,13 @@ exports.description = 'Render lists of selectable options with UIPickerView.';
 exports.examples = [
 {
  title: '<PickerIOS>',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <PickerExample />;
  },
 },
 {
  title: '<PickerIOS> with custom styling',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <PickerStyleExample />;
  },
 }];
@@ -193,7 +193,7 @@ exports.description = 'Apple PushNotification and badge value';
 exports.examples = [
 {
  title: 'Badge Number',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <View>
        <Button
@@ -210,13 +210,13 @@ exports.examples = [
 },
 {
  title: 'Push Notifications',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <NotificationExample />;
  }
 },
 {
  title: 'Notifications Permissions',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <NotificationPermissionExample />;
  }
 }];
@@ -90,7 +90,7 @@ exports.description = 'Examples that show useful methods when embedding React Na
 exports.examples = [
 {
  title: 'Updating app properties in runtime',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <AppPropertiesUpdateExample/>
    );
@@ -98,7 +98,7 @@ exports.examples = [
 },
 {
  title: 'RCTRootView\'s size flexibility',
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <RootViewSizeFlexibilityExample/>
    );
@@ -47,8 +47,6 @@ const {
 const UIExplorerPage = require('./UIExplorerPage');
 const UIExplorerBlock = require('./UIExplorerBlock');

-const AnimatedImage = Animated.createAnimatedComponent(Image);
-
 type State = {
  toggleStatus: any,
  pan: Object,
@@ -116,7 +114,7 @@ function AnimationBlock(props) {
  return (
    <View style={styles.block}>
      <TouchableWithoutFeedback onPress={props.onPress}>
-        <AnimatedImage
+        <Animated.Image
          style={[styles.img, props.imgStyle]}
          source={require('./Thumbnails/poke.png')}
        />
@@ -150,26 +150,26 @@ exports.description = 'Native segmented control';
 exports.examples = [
  {
    title: 'Segmented controls can have values',
-    render(): ReactElement<any> { return <BasicSegmentedControlExample />; }
+    render(): React.Element<any> { return <BasicSegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can have a pre-selected value',
-    render(): ReactElement<any> { return <PreSelectedSegmentedControlExample />; }
+    render(): React.Element<any> { return <PreSelectedSegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can be momentary',
-    render(): ReactElement<any> { return <MomentarySegmentedControlExample />; }
+    render(): React.Element<any> { return <MomentarySegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can be disabled',
-    render(): ReactElement<any> { return <DisabledSegmentedControlExample />; }
+    render(): React.Element<any> { return <DisabledSegmentedControlExample />; }
  },
  {
    title: 'Custom colors can be provided',
-    render(): ReactElement<any> { return <ColorSegmentedControlExample />; }
+    render(): React.Element<any> { return <ColorSegmentedControlExample />; }
  },
  {
    title: 'Change events can be detected',
-    render(): ReactElement<any> { return <EventSegmentedControlExample />; }
+    render(): React.Element<any> { return <EventSegmentedControlExample />; }
  }
 ];
@@ -95,19 +95,19 @@ exports.description = 'Slider input for numeric values';
 exports.examples = [
  {
    title: 'Default settings',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <SliderExample />;
    }
  },
  {
    title: 'Initial value: 0.5',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <SliderExample value={0.5} />;
    }
  },
  {
    title: 'minimumValue: -1, maximumValue: 2',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <SliderExample
          minimumValue={-1}
@@ -118,13 +118,13 @@ exports.examples = [
  },
  {
    title: 'step: 0.25',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <SliderExample step={0.25} />;
    }
  },
  {
    title: 'onSlidingComplete',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <SlidingCompleteExample />
      );
@@ -133,7 +133,7 @@ exports.examples = [
  {
    title: 'Custom min/max track tint color',
    platform: 'ios',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <SliderExample
          minimumTrackTintColor={'red'}
@@ -145,21 +145,21 @@ exports.examples = [
  {
    title: 'Custom thumb image',
    platform: 'ios',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
    }
  },
  {
    title: 'Custom track image',
    platform: 'ios',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return <SliderExample trackImage={require('./slider.png')} />;
    }
  },
  {
    title: 'Custom min/max track image',
    platform: 'ios',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <SliderExample
          minimumTrackImage={require('./slider-left.png')}
@@ -74,6 +74,6 @@ exports.description = 'API to capture images from the screen.';
 exports.examples = [
  {
    title: 'Take screenshot',
-    render(): ReactElement<any> { return <ScreenshotExample />; }
+    render(): React.Element<any> { return <ScreenshotExample />; }
  },
 ];
@@ -134,26 +134,26 @@ class EventSwitchExample extends React.Component {
 var examples = [
  {
    title: 'Switches can be set to true or false',
-    render(): ReactElement<any> { return <BasicSwitchExample />; }
+    render(): React.Element<any> { return <BasicSwitchExample />; }
  },
  {
    title: 'Switches can be disabled',
-    render(): ReactElement<any> { return <DisabledSwitchExample />; }
+    render(): React.Element<any> { return <DisabledSwitchExample />; }
  },
  {
    title: 'Change events can be detected',
-    render(): ReactElement<any> { return <EventSwitchExample />; }
+    render(): React.Element<any> { return <EventSwitchExample />; }
  },
  {
    title: 'Switches are controlled components',
-    render(): ReactElement<any> { return <Switch />; }
+    render(): React.Element<any> { return <Switch />; }
  }
 ];

 if (Platform.OS === 'ios') {
  examples.push({
    title: 'Custom colors can be provided',
-    render(): ReactElement<any> { return <ColorSwitchExample />; }
+    render(): React.Element<any> { return <ColorSwitchExample />; }
  });
 }

@@ -433,7 +433,7 @@ exports.examples = [
  },
 }, {
  title: 'Toggling Attributes',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <AttributeToggler />;
  },
 }, {
@@ -575,15 +575,7 @@ exports.examples = [
  },
 }, {
  title: 'Dynamic Font Size Adjustment',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <AdjustingFontSize />;
  },
 }];
-
-var styles = StyleSheet.create({
-  backgroundColorText: {
-    margin: 5,
-    marginBottom: 0,
-    backgroundColor: 'rgba(100, 100, 100, 0.3)'
-  },
-});
@@ -455,11 +455,11 @@ exports.examples = [
  },
  {
    title: 'Blur on submit',
-    render: function(): ReactElement { return <BlurOnSubmitExample />; },
+    render: function(): React.Element { return <BlurOnSubmitExample />; },
  },
  {
    title: 'Event handling',
-    render: function(): ReactElement { return <TextEventsExample />; },
+    render: function(): React.Element { return <TextEventsExample />; },
  },
  {
    title: 'Colors and text inputs',
@@ -708,7 +708,7 @@ exports.examples = [
  },
  {
    title: 'Toggle Default Padding',
-    render: function(): ReactElement { return <ToggleDefaultPaddingExample />; },
+    render: function(): React.Element { return <ToggleDefaultPaddingExample />; },
  },
  {
    title: 'Text selection & cursor placement',
@@ -627,7 +627,7 @@ exports.examples = [
  },
  {
    title: 'Event handling',
-    render: function(): ReactElement<any> { return <TextEventsExample />; },
+    render: function(): React.Element<any> { return <TextEventsExample />; },
  },
  {
    title: 'Colored input text',
@@ -725,7 +725,7 @@ exports.examples = [
  },
  {
    title: 'Blur on submit',
-    render: function(): ReactElement<any> { return <BlurOnSubmitExample />; },
+    render: function(): React.Element<any> { return <BlurOnSubmitExample />; },
  },
  {
    title: 'Multiline blur on submit',
@@ -832,5 +832,41 @@ exports.examples = [
        </View>
      );
    }
-  }
+  },
+  {
+    title: 'TextInput maxLength',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="maxLength: 5">
+            <TextInput
+              maxLength={5}
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="maxLength: 5 with placeholder">
+            <TextInput
+              maxLength={5}
+              placeholder="ZIP code entry"
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="maxLength: 5 with default value already set">
+            <TextInput
+              maxLength={5}
+              defaultValue="94025"
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="maxLength: 5 with very long default value already set">
+            <TextInput
+              maxLength={5}
+              defaultValue="9402512345"
+              style={styles.default}
+            />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
 ];
@@ -242,25 +242,13 @@ exports.examples = [
    title: 'this.setInterval(fn, t)',
    description: 'Execute function fn every t milliseconds until cancelled ' +
      'or component is unmounted.',
-    render: function(): ReactElement<any> {
+    render: function(): React.Element<any> {
      class IntervalExample extends React.Component {
        state = {
          showTimer: true,
        };

        render() {
-          if (this.state.showTimer) {
-            var timer = [
-              <TimerTester ref="interval" dt={25} type="setInterval" />,
-              <UIExplorerButton onPress={() => this.refs.interval.clear() }>
-                Clear interval
-              </UIExplorerButton>
-            ];
-            var toggleText = 'Unmount timer';
-          } else {
-            var timer = null;
-            var toggleText = 'Mount new timer';
-          }
          return (
            <View>
              {this.state.showTimer && this._renderTimer()}
@@ -32,7 +32,7 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

-var SwitchAndroid = require('SwitchAndroid');
+var Switch = require('Switch');
 var ToolbarAndroid = require('ToolbarAndroid');

 class ToolbarAndroidExample extends React.Component {
@@ -67,7 +67,7 @@ class ToolbarAndroidExample extends React.Component {
            logo={require('image!launcher_icon')}
            style={styles.toolbar}>
            <View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
-              <SwitchAndroid
+              <Switch
                value={this.state.toolbarSwitch}
                onValueChange={(value) => this.setState({'toolbarSwitch': value})} />
              <Text>{'\'Tis but a switch'}</Text>
@@ -25,13 +25,12 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  PixelRatio,
+  Animated,
  Image,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
-  UIManager,
  Platform,
  TouchableNativeFeedback,
  View,
@@ -76,16 +75,40 @@ exports.examples = [
      </View>
    );
  },
+ }, {
+  title: 'TouchableNativeFeedback with Animated child',
+  description: 'TouchableNativeFeedback can have an AnimatedComponent as a' +
+    'direct child.',
+  platform: 'android',
+  render: function() {
+    const mScale = new Animated.Value(1);
+    Animated.timing(mScale, {toValue: 0.3, duration: 1000}).start();
+    const style = {
+      backgroundColor: 'rgb(180, 64, 119)',
+      width: 200,
+      height: 100,
+      transform: [{scale: mScale}]
+    };
+    return (
+      <View>
+        <View style={styles.row}>
+          <TouchableNativeFeedback>
+            <Animated.View style={style}/>
+          </TouchableNativeFeedback>
+        </View>
+      </View>
+    );
+  },
 }, {
  title: '<Text onPress={fn}> with highlight',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <TextOnPressBox />;
  },
 }, {
  title: 'Touchable feedback events',
  description: '<Touchable*> components accept onPress, onPressIn, ' +
    'onPressOut, and onLongPress as props.',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <TouchableFeedbackEvents />;
  },
 }, {
@@ -93,13 +116,13 @@ exports.examples = [
  description: '<Touchable*> components also accept delayPressIn, ' +
    'delayPressOut, and delayLongPress as props. These props impact the ' +
    'timing of feedback events.',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <TouchableDelayEvents />;
  },
 }, {
  title: '3D Touch / Force Touch',
  description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
-  render: function(): ReactElement<any> {
+  render: function(): React.Element<any> {
    return <ForceTouchExample />;
  },
  platform: 'ios',
@@ -107,14 +130,14 @@ exports.examples = [
   title: 'Touchable Hit Slop',
   description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
     'without changing the view bounds.',
-   render: function(): ReactElement<any> {
+   render: function(): React.Element<any> {
     return <TouchableHitSlop />;
   },
- }, {
+}, {
   title: 'Disabled Touchable*',
   description: '<Touchable*> components accept disabled prop which prevents ' +
     'any interaction with component',
-   render: function(): ReactElement<any> {
+   render: function(): React.Element<any> {
     return <TouchableDisabled />;
   },
 }];
@@ -213,7 +213,7 @@ exports.examples = [
  {
    title: 'Perspective',
    description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
-    render(): ReactElement<any> { return <Flip />; }
+    render(): React.Element<any> { return <Flip />; }
  },
  {
    title: 'Translate, Rotate, Scale',
@@ -46,6 +46,6 @@ exports.description = 'Transparent view receiving touch events';
 exports.examples = [
  {
    title: 'TransparentHitTestExample',
-    render(): ReactElement<any> { return <TransparentHitTestExample />; }
+    render(): React.Element<any> { return <TransparentHitTestExample />; }
  }
 ];
@@ -145,7 +145,7 @@ class UIExplorerApp extends React.Component {
    );
  }

-  _renderHeader(props: NavigationSceneRendererProps): ReactElement<any> {
+  _renderHeader(props: NavigationSceneRendererProps): React.Element<any> {
    return (
      <NavigationHeader
        {...props}
@@ -155,7 +155,7 @@ class UIExplorerApp extends React.Component {
    );
  }

-  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement<any> {
+  _renderTitleComponent(props: NavigationSceneRendererProps): React.Element<any> {
    return (
      <NavigationHeader.Title>
        {UIExplorerStateTitleMap(props.scene.route)}
@@ -163,7 +163,7 @@ class UIExplorerApp extends React.Component {
    );
  }

-  _renderScene(props: NavigationSceneRendererProps): ?ReactElement<any> {
+  _renderScene(props: NavigationSceneRendererProps): ?React.Element<any> {
    const state = props.scene.route;
    if (state.key === 'AppList') {
      return (
@@ -29,8 +29,6 @@ const {
 const UIExplorerBlock = require('./UIExplorerBlock');
 const UIExplorerPage = require('./UIExplorerPage');

-const invariant = require('fbjs/lib/invariant');
-
 class UIExplorerExampleContainer extends React.Component {
  renderExample(example, i) {
    // Filter platform-specific examples
@@ -51,7 +49,7 @@ class UIExplorerExampleContainer extends React.Component {
    );
  }

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    if (!this.props.module.examples) {
      return <this.props.module />;
    }
@@ -63,7 +63,7 @@ type Props = {
 class UIExplorerExampleList extends React.Component {
  props: Props

-  render(): ?ReactElement<any> {
+  render(): ?React.Element<any> {
    const filterText = this.props.persister.state.filter;
    const filterRegex = new RegExp(String(filterText), 'i');
    const filter = (example) => filterRegex.test(example.module.title);
@@ -90,7 +90,7 @@ class UIExplorerExampleList extends React.Component {
    );
  }

-  _renderTitleRow(): ?ReactElement<any> {
+  _renderTitleRow(): ?React.Element<any> {
    if (!this.props.displayTitleRow) {
      return null;
    }
@@ -106,7 +106,7 @@ class UIExplorerExampleList extends React.Component {
    );
  }

-  _renderTextInput(): ?ReactElement<any> {
+  _renderTextInput(): ?React.Element<any> {
    if (this.props.disableSearch) {
      return null;
    }
@@ -129,7 +129,7 @@ class UIExplorerExampleList extends React.Component {
    );
  }

-  _renderSectionHeader(data: any, section: string): ?ReactElement<any> {
+  _renderSectionHeader(data: any, section: string): ?React.Element<any> {
    return (
      <Text style={styles.sectionHeader}>
        {section.toUpperCase()}
@@ -137,7 +137,7 @@ class UIExplorerExampleList extends React.Component {
    );
  }

-  _renderExampleRow(example: {key: string, module: Object}): ?ReactElement<any> {
+  _renderExampleRow(example: {key: string, module: Object}): ?React.Element<any> {
    return this._renderRow(
      example.module.title,
      example.module.description,
@@ -146,7 +146,7 @@ class UIExplorerExampleList extends React.Component {
    );
  }

-  _renderRow(title: string, description: string, key: ?string, handler: ?Function): ?ReactElement<any> {
+  _renderRow(title: string, description: string, key: ?string, handler: ?Function): ?React.Element<any> {
    return (
      <View key={key || title}>
        <TouchableHighlight onPress={handler}>
@@ -32,6 +32,10 @@ const ComponentExamples: Array<UIExplorerExample> = [
    key: 'ActivityIndicatorExample',
    module: require('./ActivityIndicatorExample'),
  },
+  {
+    key: 'ButtonExample',
+    module: require('./ButtonExample'),
+  },
  {
    key: 'ImageExample',
    module: require('./ImageExample'),
@@ -32,6 +32,10 @@ const ComponentExamples: Array<UIExplorerExample> = [
    key: 'ActivityIndicatorExample',
    module: require('./ActivityIndicatorExample'),
  },
+  {
+    key: 'ButtonExample',
+    module: require('./ButtonExample'),
+  },
  {
    key: 'DatePickerIOSExample',
    module: require('./DatePickerIOSExample'),
@@ -22,7 +22,6 @@
 */
 'use strict';

-const React = require('react');
 const ReactNative = require('react-native');
 const UIExplorerActions = require('./UIExplorerActions');
 // $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
@@ -50,7 +50,7 @@ const WS_STATES = [
 ];

 class Button extends React.Component {
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    const label = <Text style={styles.buttonLabel}>{this.props.label}</Text>;
    if (this.props.disabled) {
      return (
@@ -70,7 +70,7 @@ class Button extends React.Component {
 }

 class Row extends React.Component {
-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return (
      <View style={styles.row}>
        <Text>{this.props.label}</Text>
@@ -169,7 +169,7 @@ class WebSocketExample extends React.Component<any, any, State> {
    this.setState({outgoingMessage: ''});
  };

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    const socketState = WS_STATES[this.state.socketState || -1];
    const canConnect =
      !this.state.socket ||
@@ -217,6 +217,53 @@ class ScaledWebView extends React.Component {
  }
 }

+class MessagingTest extends React.Component {
+  webview = null
+
+  state = {
+    messagesReceivedFromWebView: 0,
+    message: '',
+  }
+
+  onMessage = e => this.setState({
+    messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
+    message: e.nativeEvent.data,
+  })
+
+  postMessage = () => {
+    if (this.webview) {
+      this.webview.postMessage('"Hello" from React Native!');
+    }
+  }
+
+  render(): ReactElement<any> {
+    const {messagesReceivedFromWebView, message} = this.state;
+
+    return (
+      <View style={[styles.container, { height: 200 }]}>
+        <View style={styles.container}>
+          <Text>Messages received from web view: {messagesReceivedFromWebView}</Text>
+          <Text>{message || '(No message)'}</Text>
+          <View style={styles.buttons}>
+            <Button text="Send Message to Web View" enabled onPress={this.postMessage} />
+          </View>
+        </View>
+        <View style={styles.container}>
+          <WebView
+            ref={webview => { this.webview = webview; }}
+            style={{
+              backgroundColor: BGWASH,
+              height: 100,
+            }}
+            source={require('./messagingtest.html')}
+            onMessage={this.onMessage}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
 var styles = StyleSheet.create({
  container: {
    flex: 1,
@@ -337,15 +384,15 @@ exports.description = 'Base component to display web content';
 exports.examples = [
  {
    title: 'Simple Browser',
-    render(): ReactElement<any> { return <WebViewExample />; }
+    render(): React.Element<any> { return <WebViewExample />; }
  },
  {
    title: 'Scale Page to Fit',
-    render(): ReactElement<any> { return <ScaledWebView/>; }
+    render(): React.Element<any> { return <ScaledWebView/>; }
  },
  {
    title: 'Bundled HTML',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <WebView
          style={{
@@ -360,7 +407,7 @@ exports.examples = [
  },
  {
    title: 'Static HTML',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <WebView
          style={{
@@ -375,7 +422,7 @@ exports.examples = [
  },
  {
    title: 'POST Test',
-    render(): ReactElement<any> {
+    render(): React.Element<any> {
      return (
        <WebView
          style={{
@@ -391,5 +438,9 @@ exports.examples = [
        />
      );
    }
+  },
+  {
+    title: 'Mesaging Test',
+    render(): ReactElement<any> { return <MessagingTest />; }
  }
 ];
@@ -27,7 +27,7 @@ const React = require('react');

 const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');

-import type { Example, ExampleModule } from 'ExampleTypes';
+import type { ExampleModule } from 'ExampleTypes';

 var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
  : ReactClass<any> {
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Messaging Test</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+  </head>
+  <body>
+    <p>Messages recieved from React Native: 0</p>
+    <p>(No messages)</p>
+    <button type="button">
+      Send message to React Native
+    </button>
+  </body>
+  <script>
+    var messagesReceivedFromReactNative = 0;
+    document.addEventListener('message', function(e) {
+      messagesReceivedFromReactNative += 1;
+      document.getElementsByTagName('p')[0].innerHTML =
+        'Messages recieved from React Native: ' + messagesReceivedFromReactNative;
+      document.getElementsByTagName('p')[1].innerHTML = e.data;
+    });
+
+    document.getElementsByTagName('button')[0].addEventListener('click', function() {
+      window.postMessage('"Hello" from the web view');
+    });
+  </script>
+</html>
@@ -65,7 +65,7 @@ class PromiseTest extends React.Component {
    }
  };

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    return <View />;
  }
 }
@@ -24,7 +24,7 @@ type Buttons = Array<{
 }>;

 type Options = {
-  cancelable?: ?boolean;
+  cancelable?: ?boolean,
 };

 /**
@@ -76,7 +76,7 @@ class Alert {
  ): void {
    if (Platform.OS === 'ios') {
      if (typeof type !== 'undefined') {
-        console.warn('Alert.alert() with a 4th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
+        console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
        AlertIOS.alert(title, message, buttons, type);
        return;
      }
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @providesModule RCTAlertManager
+*/
+'use strict';
+
+var DialogManager = require('NativeModules').DialogManagerAndroid;
+
+function emptyCallback() {}
+
+module.exports = {
+  alertWithArgs: function(args, callback) {
+    // TODO(5998984): Polyfill it correctly with DialogManagerAndroid
+    DialogManager.showAlert(
+        args,
+        emptyCallback,
+        callback || emptyCallback);
+  },
+};
@@ -11,6 +11,7 @@
 */
 'use strict';

+
 var AnimatedImplementation = require('AnimatedImplementation');
 var Image = require('Image');
 var Text = require('Text');
@@ -1715,6 +1715,12 @@ function createAnimatedComponent(Component: any): any {
      var callback = () => {
        if (this._component.setNativeProps) {
          if (!this._propsAnimated.__isNative) {
+            if (this._component.viewConfig == null) {
+              var ctor = this._component.constructor;
+              var componentName = ctor.displayName || ctor.name || '<Unknown Component>';
+              throw new Error(componentName + ' "viewConfig" is not defined.');
+            }
+
            this._component.setNativeProps(
              this._propsAnimated.__getAnimatedValue()
            );
@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule AppStateIOS
- * @flow
- */
-'use strict';
-
-const AppState = require('AppState');
-
-console.warn('AppStateIOS is deprecated. Use AppState instead');
-
-module.exports = AppState;
@@ -58,6 +58,9 @@ function genModule(config: ?ModuleConfig, moduleID: number): ?{name: string, mod
  return { name: moduleName, module };
 }

+// export this method as a global so we can call it from native
+global.__fbGenNativeModule = genModule;
+
 function loadModule(name: string, moduleID: number): ?Object {
  invariant(global.nativeRequireModuleConfig,
    'Can\'t lazily create module without nativeRequireModuleConfig');
@@ -115,27 +118,31 @@ function createErrorFromErrorData(errorData: {message: string}): Error {
  return Object.assign(error, extraErrorInfo);
 }

-const bridgeConfig = global.__fbBatchedBridgeConfig;
-invariant(bridgeConfig, '__fbBatchedBridgeConfig is not set, cannot invoke native modules');
+let NativeModules : {[moduleName: string]: Object} = {};
+if (global.nativeModuleProxy) {
+  NativeModules = global.nativeModuleProxy;
+} else {
+  const bridgeConfig = global.__fbBatchedBridgeConfig;
+  invariant(bridgeConfig, '__fbBatchedBridgeConfig is not set, cannot invoke native modules');

-const NativeModules : {[moduleName: string]: Object} = {};
-(bridgeConfig.remoteModuleConfig || []).forEach((config: ModuleConfig, moduleID: number) => {
-  // Initially this config will only contain the module name when running in JSC. The actual
-  // configuration of the module will be lazily loaded.
-  const info = genModule(config, moduleID);
-  if (!info) {
-    return;
-  }
+  (bridgeConfig.remoteModuleConfig || []).forEach((config: ModuleConfig, moduleID: number) => {
+    // Initially this config will only contain the module name when running in JSC. The actual
+    // configuration of the module will be lazily loaded.
+    const info = genModule(config, moduleID);
+    if (!info) {
+      return;
+    }

-  if (info.module) {
-    NativeModules[info.name] = info.module;
-  }
-  // If there's no module config, define a lazy getter
-  else {
-    defineLazyObjectProperty(NativeModules, info.name, {
-      get: () => loadModule(info.name, moduleID)
-    });
-  }
-});
+    if (info.module) {
+      NativeModules[info.name] = info.module;
+    }
+    // If there's no module config, define a lazy getter
+    else {
+      defineLazyObjectProperty(NativeModules, info.name, {
+        get: () => loadModule(info.name, moduleID)
+      });
+    }
+  });
+}

 module.exports = NativeModules;
@@ -11,7 +11,7 @@
 */
 'use strict';

-var ReactPropTypes = require('react/lib/ReactPropTypes');
+var ReactPropTypes = require('React').PropTypes
 var RCTCameraRollManager = require('NativeModules').CameraRollManager;

 var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
@@ -111,7 +111,7 @@ var getPhotosReturnChecker = createStrictShapeTypeChecker({
 /**
 * `CameraRoll` provides access to the local camera roll / gallery.
 * Before using this you must link the `RCTCameraRoll` library.
- * You can refer to (Linking)[https://facebook.github.io/react-native/docs/linking-libraries-ios.html] for help.
+ * You can refer to [Linking](https://facebook.github.io/react-native/docs/linking-libraries-ios.html) for help.
 */
 class CameraRoll {

@@ -209,7 +209,9 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
          }];
        }
      }];
-    } else {
+    } 
+  
+    if (!group) {
      // Sometimes the enumeration continues even if we set stop above, so we guard against resolving the promise
      // multiple times here.
      if (!resolvedPromise) {
@@ -14,13 +14,14 @@
 const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
 const Platform = require('Platform');
-const PropTypes = require('react/lib/ReactPropTypes');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');

 const requireNativeComponent = require('requireNativeComponent');

+const PropTypes = React.PropTypes;
+
 const GRAY = '#999999';

 type IndicatorSize = number | 'small' | 'large';
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule ActivityIndicatorIOS
- */
-'use strict';
-
-var React = require('React');
-var View = require('View');
-
-class ActivityIndicatorIOS extends React.Component {
-  render(): ReactElement {
-    return <View {...this.props} />;
-  }
-}
-
-module.exports = ActivityIndicatorIOS;
@@ -1,63 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule ActivityIndicatorIOS
- */
-'use strict';
-
-var ActivityIndicator = require('ActivityIndicator');
-var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
-var PropTypes = require('react/lib/ReactPropTypes');
-var React = require('React');
-var View = require('View');
-
-/**
- * Deprecated, use ActivityIndicator instead.
- */
-var ActivityIndicatorIOS = React.createClass({
-  mixins: [NativeMethodsMixin],
-
-  propTypes: {
-    ...View.propTypes,
-    /**
-     * Whether to show the indicator (true, the default) or hide it (false).
-     */
-    animating: PropTypes.bool,
-    /**
-     * The foreground color of the spinner (default is gray).
-     */
-    color: PropTypes.string,
-    /**
-     * Whether the indicator should hide when not animating (true by default).
-     */
-    hidesWhenStopped: PropTypes.bool,
-    /**
-     * Size of the indicator. Small has a height of 20, large has a height of 36.
-     */
-    size: PropTypes.oneOf([
-      'small',
-      'large',
-    ]),
-    /**
-     * Invoked on mount and layout changes with
-     *
-     *   {nativeEvent: { layout: {x, y, width, height}}}.
-     */
-    onLayout: PropTypes.func,
-  },
-
-  componentDidMount: function() {
-    console.warn('ActivityIndicatorIOS is deprecated. Use ActivityIndicator instead.');
-  },
-
-  render: function() {
-    return <ActivityIndicator {...this.props} />;
-  }
-});
-
-module.exports = ActivityIndicatorIOS;
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Button
+ * @flow
+ */
+'use strict';
+
+const ColorPropType = require('ColorPropType');
+const Platform = require('Platform');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableNativeFeedback = require('TouchableNativeFeedback');
+const TouchableOpacity = require('TouchableOpacity');
+const View = require('View');
+
+const invariant = require('fbjs/lib/invariant');
+
+/**
+ * A basic button component that should render nicely on any platform. Supports
+ * a minimal level of customization.
+ *
+ * <center><img src="img/buttonExample.png"></img></center>
+ *
+ * If this button doesn't look right for your app, you can build your own
+ * button using [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html)
+ * or [TouchableNativeFeedback](https://facebook.github.io/react-native/docs/touchablenativefeedback.html).
+ * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
+ * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
+ *
+ * Example usage:
+ *
+ * ```
+ * <Button
+ *   onPress={onPressLearnMore}
+ *   title="Learn More"
+ *   color="#841584"
+ *   accessibilityLabel="Learn more about this purple button"
+ * />
+ * ```
+ *
+ */
+
+class Button extends React.Component {
+
+  props: {
+    title: string,
+    onPress: () => any,
+    color?: ?string,
+    accessibilityLabel?: ?string,
+    disabled?: ?boolean,
+  };
+
+  static propTypes = {
+    /**
+     * Text to display inside the button
+     */
+    title: React.PropTypes.string.isRequired,
+    /**
+     * Text to display for blindness accessibility features
+     */
+    accessibilityLabel: React.PropTypes.string,
+    /**
+     * Color of the text (iOS), or background color of the button (Android)
+     */
+    color: ColorPropType,
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled: React.PropTypes.bool,
+    /**
+     * Handler to be called when the user taps the button
+     */
+    onPress: React.PropTypes.func.isRequired,
+  };
+
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      onPress,
+      title,
+      disabled,
+    } = this.props;
+    const buttonStyles = [styles.button];
+    const textStyles = [styles.text];
+    const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+    if (color && Platform.OS === 'ios') {
+      textStyles.push({color: color});
+    } else if (color) {
+      buttonStyles.push({backgroundColor: color});
+    }
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+    }
+    invariant(
+      typeof title === 'string',
+      'The title prop of a Button must be a string',
+    );
+    const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title;
+    return (
+      <Touchable
+        accessibilityComponentType="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityTraits={['button']}
+        disabled={disabled}
+        onPress={onPress}>
+        <View style={buttonStyles}>
+          <Text style={textStyles}>{formattedTitle}</Text>
+        </View>
+      </Touchable>
+    );
+  }
+}
+
+// Material design blue from https://material.google.com/style/color.html#color-color-palette
+let defaultBlue = '#2196F3';
+if (Platform.OS === 'ios') {
+  // Measured default tintColor from iOS 10
+  defaultBlue = '#0C42FD';
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    ios: {},
+    android: {
+      elevation: 4,
+      backgroundColor: defaultBlue,
+      borderRadius: 2,
+    },
+  }),
+  text: Platform.select({
+    ios: {
+      color: defaultBlue,
+      textAlign: 'center',
+      padding: 8,
+      fontSize: 18,
+    },
+    android: {
+      textAlign: 'center',
+      color: 'white',
+      padding: 8,
+      fontWeight: '500',
+    },
+  }),
+  buttonDisabled: Platform.select({
+    ios: {},
+    android: {
+      elevation: 0,
+      backgroundColor: '#dfdfdf',
+    }
+  }),
+  textDisabled: Platform.select({
+    ios: {
+      color: '#cdcdcd',
+    },
+    android: {
+      color: '#a1a1a1',
+    }
+  }),
+});
+
+module.exports = Button;
@@ -12,7 +12,6 @@
 'use strict';

 const Clipboard = require('NativeModules').Clipboard;
-const deprecatedCallback = require('deprecatedCallback');

 /**
 * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
@@ -27,12 +26,7 @@ module.exports = {
   * ```
   */
  getString(): Promise<string> {
-    return deprecatedCallback(
-      Clipboard.getString(),
-      Array.prototype.slice.call(arguments),
-      'success-first',
-      'Clipboard.getString(callback) is deprecated. Use the returned Promise instead'
-    );
+    return Clipboard.getString();
  },
  /**
   * Set content of string type. You can use following code to set clipboard content
@@ -14,13 +14,14 @@
 'use strict';

 const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
-const PropTypes = require('react/lib/ReactPropTypes');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');

 const requireNativeComponent = require('requireNativeComponent');

+const PropTypes = React.PropTypes;
+
 type DefaultProps = {
  mode: 'date' | 'time' | 'datetime',
 };
@@ -11,8 +11,6 @@
 */
 'use strict';

-var warning = require('fbjs/lib/warning');
-
 const DatePickerAndroid = {
  async open(options: Object): Promise<Object> {
    return Promise.reject({
@@ -14,8 +14,7 @@ var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
 var Platform = require('Platform');
 var React = require('React');
-var ReactNative = require('react/lib/ReactNative');
-var ReactPropTypes = require('react/lib/ReactPropTypes');
+var ReactNative = require('ReactNative');
 var StatusBar = require('StatusBar');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
@@ -26,6 +25,8 @@ var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');

+var ReactPropTypes = React.PropTypes;
+
 var RK_DRAWER_REF = 'drawerlayout';
 var INNERVIEW_REF = 'innerView';

@@ -1,142 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule IntentAndroid
- * @flow
- */
-'use strict';
-
-var Linking = require('Linking');
-var invariant = require('fbjs/lib/invariant');
-
-/**
- * NOTE: `IntentAndroid` is being deprecated. Use `Linking` instead.
- *
- * `IntentAndroid` gives you a general interface to handle external links.
- *
- * ### Basic Usage
- *
- * #### Handling deep links
- *
- * If your app was launched from an external url registered to your app you can
- * access and handle it from any component you want with
- *
- * ```
- * componentDidMount() {
- *   var url = IntentAndroid.getInitialURL(url => {
- *     if (url) {
- *       console.log('Initial url is: ' + url);
- *     }
- *   });
- * }
- * ```
- *
- * Example to add support for deep linking inside your React Native app.
- * More Info: [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
- *
- * Edit in `android/app/src/main/AndroidManifest.xml`
- *
- * ```
- *  <intent-filter>
- *    <action android:name="android.intent.action.VIEW" />
- *    <category android:name="android.intent.category.DEFAULT" />
- *    <category android:name="android.intent.category.BROWSABLE" />
- *
- *    <!-- Accepts URIs that begin with "http://www.facebook.com/react -->
- *    <data android:scheme="http"
- *       android:host="www.facebook.com"
- *       android:pathPrefix="/react" />
- *    <!-- note that the leading "/" is required for pathPrefix-->
- *
- *    <!-- Accepts URIs that begin with "facebook://react -->
- *    <!-- <data android:scheme="facebook" android:host="react" /> -->
- *  </intent-filter>
- * ```
- *
- * #### Opening external links
- *
- * To start the corresponding activity for a link (web URL, email, contact etc.), call
- *
- * ```
- * IntentAndroid.openURL(url)
- * ```
- *
- * If you want to check if any installed app can handle a given URL beforehand you can call
- * ```
- * IntentAndroid.canOpenURL(url, (supported) => {
- *   if (!supported) {
- *     console.log('Can\'t handle url: ' + url);
- *   } else {
- *     IntentAndroid.openURL(url);
- *   }
- * });
- * ```
- */
-class IntentAndroid {
-
-  /**
-   * Starts a corresponding external activity for the given URL.
-   *
-   * For example, if the URL is "https://www.facebook.com", the system browser will be opened,
-   * or the "choose application" dialog will be shown.
-   *
-   * You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact,
-   * or any other URL that can be opened with {@code Intent.ACTION_VIEW}.
-   *
-   * NOTE: This method will fail if the system doesn't know how to open the specified URL.
-   * If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.
-   *
-   * NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
-   *
-   * @deprecated
-   */
-  static openURL(url: string) {
-    console.warn('"IntentAndroid.openURL" is deprecated. Use the promise based "Linking.openURL" instead.');
-    Linking.openURL(url);
-  }
-
-  /**
-   * Determine whether or not an installed app can handle a given URL.
-   *
-   * You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact,
-   * or any other URL that can be opened with {@code Intent.ACTION_VIEW}.
-   *
-   * NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
-   *
-   * @param URL the URL to open
-   *
-   * @deprecated
-   */
-  static canOpenURL(url: string, callback: Function) {
-    console.warn('"IntentAndroid.canOpenURL" is deprecated. Use the promise based "Linking.canOpenURL" instead.');
-    invariant(
-      typeof callback === 'function',
-      'A valid callback function is required'
-    );
-    Linking.canOpenURL(url).then(callback);
-  }
-
-  /**
-   * If the app launch was triggered by an app link with {@code Intent.ACTION_VIEW},
-   * it will give the link url, otherwise it will give `null`
-   *
-   * Refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
-   *
-   * @deprecated
-   */
-  static getInitialURL(callback: Function) {
-    console.warn('"IntentAndroid.getInitialURL" is deprecated. Use the promise based "Linking.getInitialURL" instead.');
-    invariant(
-      typeof callback === 'function',
-      'A valid callback function is required'
-    );
-    Linking.getInitialURL().then(callback);
-  }
-}
-
-module.exports = IntentAndroid;
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule IntentAndroid
- */
-'use strict';
-
-module.exports = {
-  openURL: function(url) {
-    console.error('IntentAndroid is not supported on iOS');
-  },
-};
@@ -11,20 +11,41 @@
 */
 'use strict';

+const invariant = require('fbjs/lib/invariant');
 const NativeEventEmitter = require('NativeEventEmitter');
 const KeyboardObserver = require('NativeModules').KeyboardObserver;
 const dismissKeyboard = require('dismissKeyboard');
 const KeyboardEventEmitter = new NativeEventEmitter(KeyboardObserver);

+type KeyboardEventName =
+  | 'keyboardWillShow'
+  | 'keyboardDidShow'
+  | 'keyboardWillHide'
+  | 'keyboardDidHide'
+  | 'keyboardWillChangeFrame'
+  | 'keyboardDidChangeFrame';
+
+type KeyboardEventData = {
+  endCoordinates: {
+    width: number,
+    height: number,
+    screenX: number,
+    screenY: number,
+  },
+};
+
+type KeyboardEventListener = (e: KeyboardEventData) => void;
+
 // The following object exists for documentation purposes
 // Actual work happens in
 // https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js
+
 /**
- * `Keyboard` component to control keyboard events.
+ * `Keyboard` module to control keyboard events.
 *
 * ### Usage
 *
- * The Keyboard component allows you to listen for native events and react to them, as
+ * The Keyboard module allows you to listen for native events and react to them, as
 * well as make changes to the keyboard, like dismissing it.
 *
 *```
@@ -60,16 +81,17 @@ const KeyboardEventEmitter = new NativeEventEmitter(KeyboardObserver);
 * }
 *```
 */
-module.exports = {

+let Keyboard = {
  /**
   * The `addListener` function connects a JavaScript function to an identified native
   * keyboard notification event.
   *
   * This function then returns the reference to the listener.
   *
-   * @param {string} nativeEvent The `nativeEvent` is the string that identifies the event you're listening for.  This
+   * @param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.  This
   *can be any of the following:
+   *
   * - `keyboardWillShow`
   * - `keyboardDidShow`
   * - `keyboardWillHide`
@@ -77,10 +99,20 @@ module.exports = {
   * - `keyboardWillChangeFrame`
   * - `keyboardDidChangeFrame`
   *
-   * @param {function} jsFunction function to be called when the event fires.
+   * @param {function} callback function to be called when the event fires.
   */
-  addListener (nativeEvent: string, jsFunction: Function) {
-    return KeyboardEventEmitter.addListener(nativeEvent, jsFunction);
+  addListener(eventName: KeyboardEventName, callback: KeyboardEventListener) {
+    invariant(false, 'Dummy method used for documentation');
+  },
+
+  /**
+   * Removes a specific listener.
+   *
+   * @param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.
+   * @param {function} callback function to be called when the event fires.
+   */
+  removeListener(eventName: KeyboardEventName, callback: Function) {
+    invariant(false, 'Dummy method used for documentation');
  },

  /**
@@ -88,24 +120,21 @@ module.exports = {
   *
   * @param {string} eventType The native event string listeners are watching which will be removed.
   */
-  removeAllListeners (eventType: string) {
-    KeyboardEventEmitter.removeAllListeners(eventType);
-  },
-
-  /**
-   * Removes a specific subscription.
-   *
-   * @param {EmitterSubscription} subscription The subscription emitter to be removed.
-   */
-  removeSubscription (subscription: Object) {
-    KeyboardEventEmitter.removeSubscription(subscription);
+  removeAllListeners(eventName: KeyboardEventName) {
+    invariant(false, 'Dummy method used for documentation');
  },

  /**
   * Dismisses the active keyboard and removes focus.
   */
-  dismiss () {
-    dismissKeyboard();
+  dismiss() {
+    invariant(false, 'Dummy method used for documentation');
  }
-
 };
+
+// Throw away the dummy object and reassign it to original module
+Keyboard = KeyboardEventEmitter;
+Keyboard.dismiss = dismissKeyboard;
+
+module.exports = Keyboard;
+
@@ -14,11 +14,12 @@
 const Keyboard = require('Keyboard');
 const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
-const PropTypes = require('react/lib/ReactPropTypes');
 const React = require('React');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');

+const PropTypes = React.PropTypes;
+
 import type EmitterSubscription from 'EmitterSubscription';

 type Rect = {
@@ -148,7 +149,7 @@ const KeyboardAvoidingView = React.createClass({
    this.subscriptions.forEach((sub) => sub.remove());
  },

-  render(): ReactElement<any> {
+  render(): React.Element<any> {
    const {behavior, children, style, ...props} = this.props;

    switch (behavior) {
@@ -34,7 +34,7 @@ var LazyRenderer = React.createClass({
    });
  },

-  render: function(): ?ReactElement {
+  render: function(): ?React.Element {
    return this.state._lazyRender ? null : this.props.render();
  },
 });
@@ -15,7 +15,6 @@ const ColorPropType = require('ColorPropType');
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const Image = require('Image');
 const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
-const Platform = require('Platform');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
@@ -16,7 +16,7 @@ var Image = require('Image');
 var NavigationContext = require('NavigationContext');
 var RCTNavigatorManager = require('NativeModules').NavigatorManager;
 var React = require('React');
-var ReactNative = require('react/lib/ReactNative');
+var ReactNative = require('ReactNative');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
@@ -165,13 +165,7 @@ type Event = Object;
 *     navigator: PropTypes.object.isRequired,
 *   }
 *
- *   constructor(props, context) {
- *     super(props, context);
- *     this._onForward = this._onForward.bind(this);
- *     this._onBack = this._onBack.bind(this);
- *   }
- *
- *   _onForward() {
+ *   _onForward = () => {
 *     this.props.navigator.push({
 *       title: 'Scene ' + nextIndex,
 *     });
@@ -836,6 +830,9 @@ var NavigatorIOS = React.createClass({
  },

  _handleNavigationComplete: function(e: Event) {
+    // Don't propagate to other NavigatorIOS instances this is nested in:
+    e.stopPropagation();
+
    if (this._toFocusOnNavigationComplete) {
      this._getFocusEmitter().emit('focus', this._toFocusOnNavigationComplete);
      this._toFocusOnNavigationComplete = null;
@@ -17,7 +17,6 @@ var PickerIOS = require('PickerIOS');
 var PickerAndroid = require('PickerAndroid');
 var Platform = require('Platform');
 var React = require('React');
-var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
 var UnimplementedView = require('UnimplementedView');
@@ -14,8 +14,6 @@

 var ColorPropType = require('ColorPropType');
 var React = require('React');
-var ReactChildren = require('react/lib/ReactChildren');
-var ReactPropTypes = require('react/lib/ReactPropTypes');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
@@ -24,8 +22,9 @@ var ViewStylePropTypes = require('ViewStylePropTypes');
 var processColor = require('processColor');
 var requireNativeComponent = require('requireNativeComponent');

+var ReactPropTypes = React.PropTypes;
+
 var REF_PICKER = 'picker';
-var MODE_DIALOG = 'dialog';
 var MODE_DROPDOWN = 'dropdown';

 var pickerStyleType = StyleSheetPropType({
@@ -79,7 +78,7 @@ class PickerAndroid extends React.Component {
  // Translate prop and children into stuff that the native picker understands.
  _stateFromProps = (props) => {
    var selectedIndex = 0;
-    const items = ReactChildren.map(props.children, (child, index) => {
+    const items = React.Children.map(props.children, (child, index) => {
      if (child.props.value === props.selectedValue) {
        selectedIndex = index;
      }
@@ -14,7 +14,6 @@

 var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
 var React = require('React');
-var ReactChildren = require('react/lib/ReactChildren');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
@@ -45,7 +44,7 @@ var PickerIOS = React.createClass({
  _stateFromProps: function(props) {
    var selectedIndex = 0;
    var items = [];
-    ReactChildren.toArray(props.children).forEach(function (child, index) {
+    React.Children.toArray(props.children).forEach(function (child, index) {
      if (child.props.value === props.selectedValue) {
        selectedIndex = index;
      }
@@ -12,12 +12,13 @@

 var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
 var React = require('React');
-var ReactPropTypes = require('react/lib/ReactPropTypes');
 var View = require('View');
 var ColorPropType = require('ColorPropType');

 var requireNativeComponent = require('requireNativeComponent');

+var ReactPropTypes = React.PropTypes;
+
 var STYLE_ATTRIBUTES = [
  'Horizontal',
  'Normal',
@@ -25,7 +26,7 @@ var STYLE_ATTRIBUTES = [
  'Large',
  'Inverse',
  'SmallInverse',
-  'LargeInverse'
+  'LargeInverse',
 ];

 var indeterminateType = function(props, propName, componentName) {
@@ -13,13 +13,14 @@

 var Image = require('Image');
 var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
-var PropTypes = require('react/lib/ReactPropTypes');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
 var View = require('View');

 var requireNativeComponent = require('requireNativeComponent');

+var PropTypes = React.PropTypes;
+
 /**
 * Use `ProgressViewIOS` to render a UIProgressView on iOS.
 */
@@ -14,7 +14,7 @@
 var Dimensions = require('Dimensions');
 var Platform = require('Platform');
 var Keyboard = require('Keyboard');
-var ReactNative = require('react/lib/ReactNative');
+var ReactNative = require('ReactNative');
 var Subscribable = require('Subscribable');
 var TextInputState = require('TextInputState');
 var UIManager = require('UIManager');
--- a/Show More
+++ b/Show More