Upgrade to React 0.13

- [React Native] Move copyProperties and mergeHelpers to github dir | Ben Alpert
- [React Native] Update core modules for React 0.13 | Ben Alpert
- [React Native] Update React to v0.13.0-rc2 | Ben Alpert

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -65,7 +65,7 @@ var TouchableWithoutFeedback = React.createClass({
   render: function() {
     // Note(vjeux): use cloneWithProps once React has been upgraded
     var child = onlyChild(this.props.children);
-    Object.assign(child.props, {
+    return React.cloneElement(child, {
       accessible: true,
       testID: this.props.testID,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
@@ -75,7 +75,6 @@ var TouchableWithoutFeedback = React.createClass({
       onResponderRelease: this.touchableHandleResponderRelease,
       onResponderTerminate: this.touchableHandleResponderTerminate
     });
-    return child;
   }
 });
 

Libraries/ReactIOS/ReactIOS.js

@@ -7,16 +7,15 @@
 "use strict";
 
 var ReactChildren = require('ReactChildren');
+var ReactClass = require('ReactClass');
 var ReactComponent = require('ReactComponent');
-var ReactCompositeComponent = require('ReactCompositeComponent');
 var ReactContext = require('ReactContext');
 var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactElement = require('ReactElement');
 var ReactElementValidator = require('ReactElementValidator');
 var ReactInstanceHandles = require('ReactInstanceHandles');
 var ReactIOSDefaultInjection = require('ReactIOSDefaultInjection');
 var ReactIOSMount = require('ReactIOSMount');
-var ReactLegacyElement = require('ReactLegacyElement');
 var ReactPropTypes = require('ReactPropTypes');
 
 var deprecated = require('deprecated');
@@ -27,20 +26,14 @@ ReactIOSDefaultInjection.inject();
 
 var createElement = ReactElement.createElement;
 var createFactory = ReactElement.createFactory;
+var cloneElement = ReactElement.cloneElement;
 
 if (__DEV__) {
   createElement = ReactElementValidator.createElement;
   createFactory = ReactElementValidator.createFactory;
+  cloneElement = ReactElementValidator.cloneElement;
 }
 
-// TODO: Drop legacy elements once classes no longer export these factories
-createElement = ReactLegacyElement.wrapCreateElement(
-  createElement
-);
-createFactory = ReactLegacyElement.wrapCreateFactory(
-  createFactory
-);
-
 var resolveDefaultProps = function(element) {
   // Could be optimized, but not currently in heavy use.
   var defaultProps = element.type.defaultProps;
@@ -82,9 +75,10 @@ var ReactIOS = {
     only: onlyChild
   },
   PropTypes: ReactPropTypes,
-  createClass: ReactCompositeComponent.createClass,
+  createClass: ReactClass.createClass,
   createElement: createElement,
   createFactory: createFactory,
+  cloneElement: cloneElement,
   _augmentElement: augmentElement,
   render: render,
   unmountComponentAtNode: ReactIOSMount.unmountComponentAtNode,

Libraries/ReactIOS/ReactIOSComponentEnvironment.js

@@ -13,10 +13,9 @@ var ReactPerf = require('ReactPerf');
 
 var ReactIOSComponentEnvironment = {
 
-  /**
-   * Will need to supply something that implements this.
-   */
-  BackendIDOperations: ReactIOSDOMIDOperations,
+  processChildrenUpdates: ReactIOSDOMIDOperations.dangerouslyProcessChildrenUpdates,
+
+  replaceNodeWithMarkupByID: ReactIOSDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,
 
   /**
    * Nothing to do for UIKit bridge.
@@ -34,34 +33,6 @@ var ReactIOSComponentEnvironment = {
 
   },
 
-  /**
-   * @param {View} view View tree image.
-   * @param {number} containerViewID View to insert sub-view into.
-   */
-  mountImageIntoNode: ReactPerf.measure(
-    // FIXME(frantic): #4441289 Hack to avoid modifying react-tools
-    'ReactComponentBrowserEnvironment',
-    'mountImageIntoNode',
-    function(mountImage, containerID) {
-      // Since we now know that the `mountImage` has been mounted, we can
-      // mark it as such.
-      ReactIOSTagHandles.associateRootNodeIDWithMountedNodeHandle(
-        mountImage.rootNodeID,
-        mountImage.tag
-      );
-      var addChildTags = [mountImage.tag];
-      var addAtIndices = [0];
-      RKUIManager.manageChildren(
-        ReactIOSTagHandles.mostRecentMountedNodeHandleForRootNodeID(containerID),
-        null,         // moveFromIndices
-        null,         // moveToIndices
-        addChildTags,
-        addAtIndices,
-        null          // removeAtIndices
-      );
-    }
-  ),
-
   ReactReconcileTransaction: ReactIOSReconcileTransaction,
 };
 

Libraries/ReactIOS/ReactIOSComponentMixin.js

@@ -6,6 +6,7 @@
 'use strict';
 
 var ReactIOSTagHandles = require('ReactIOSTagHandles');
+var ReactInstanceMap = require('ReactInstanceMap');
 
 /**
  * ReactNative vs ReactWeb
@@ -55,11 +56,17 @@ var ReactIOSComponentMixin = {
    * `getNodeHandle`.
    */
   getNativeNode: function() {
-    return ReactIOSTagHandles.rootNodeIDToTag[this._rootNodeID];
+    // TODO (balpert): Wrap iOS native components in a composite wrapper, then
+    // ReactInstanceMap.get here will always succeed
+    return ReactIOSTagHandles.rootNodeIDToTag[
+      (ReactInstanceMap.get(this) || this)._rootNodeID
+    ];
   },
 
   getNodeHandle: function() {
-    return ReactIOSTagHandles.rootNodeIDToTag[this._rootNodeID];
+    return ReactIOSTagHandles.rootNodeIDToTag[
+      (ReactInstanceMap.get(this) || this)._rootNodeID
+    ];
   }
 };
 

Libraries/ReactIOS/ReactIOSDefaultInjection.js

@@ -15,20 +15,19 @@ var EventPluginUtils = require('EventPluginUtils');
 var IOSDefaultEventPluginOrder = require('IOSDefaultEventPluginOrder');
 var IOSNativeBridgeEventPlugin = require('IOSNativeBridgeEventPlugin');
 var NodeHandle = require('NodeHandle');
-var ReactComponent = require('ReactComponent');
-var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactClass = require('ReactClass');
+var ReactComponentEnvironment = require('ReactComponentEnvironment');
 var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
-var ReactElement = require('ReactElement');
 var ReactInstanceHandles = require('ReactInstanceHandles');
 var ReactIOSComponentEnvironment = require('ReactIOSComponentEnvironment');
 var ReactIOSComponentMixin = require('ReactIOSComponentMixin');
 var ReactIOSGlobalInteractionHandler = require('ReactIOSGlobalInteractionHandler');
 var ReactIOSGlobalResponderHandler = require('ReactIOSGlobalResponderHandler');
 var ReactIOSMount = require('ReactIOSMount');
-var ReactTextComponent = require('ReactTextComponent');
+var ReactIOSTextComponent = require('ReactIOSTextComponent');
+var ReactNativeComponent = require('ReactNativeComponent');
 var ReactUpdates = require('ReactUpdates');
 var ResponderEventPlugin = require('ResponderEventPlugin');
-var RKRawText = require('RKRawText');
 var UniversalWorkerNodeHandle = require('UniversalWorkerNodeHandle');
 
 // Just to ensure this gets packaged, since its only caller is from Native.
@@ -68,23 +67,17 @@ function inject() {
     ReactDefaultBatchingStrategy
   );
 
-  ReactComponent.injection.injectEnvironment(
+  ReactComponentEnvironment.injection.injectEnvironment(
     ReactIOSComponentEnvironment
   );
 
   EventPluginUtils.injection.injectMount(ReactIOSMount);
 
-  ReactCompositeComponent.injection.injectMixin(ReactIOSComponentMixin);
+  ReactClass.injection.injectMixin(ReactIOSComponentMixin);
 
-  ReactTextComponent.inject(function(initialText) {
-    // RKRawText is a class so we can't invoke it directly. Instead of using
-    // a factory, we use the internal fast path to create a descriptor.
-    // RKRawText is not quite a class yet, so we access the real class from
-    // the type property. TODO: Change this once factory wrappers are gone.
-    return new ReactElement(RKRawText.type, null, null, null, null, {
-      text: initialText
-    });
-  });
+  ReactNativeComponent.injection.injectTextComponentClass(
+    ReactIOSTextComponent
+  );
 
   NodeHandle.injection.injectImplementation(UniversalWorkerNodeHandle);
 }

Libraries/ReactIOS/ReactIOSMount.js

@@ -9,7 +9,10 @@ var RKUIManager = require('NativeModulesDeprecated').RKUIManager;
 
 var ReactIOSTagHandles = require('ReactIOSTagHandles');
 var ReactPerf = require('ReactPerf');
+var ReactReconciler = require('ReactReconciler');
+var ReactUpdates = require('ReactUpdates');
 
+var emptyObject = require('emptyObject');
 var instantiateReactComponent = require('instantiateReactComponent');
 var invariant = require('invariant');
 
@@ -19,6 +22,49 @@ function instanceNumberToChildRootID(rootNodeID, instanceNumber) {
   return rootNodeID + '[' + instanceNumber + ']';
 }
 
+/**
+ * Mounts this component and inserts it into the DOM.
+ *
+ * @param {ReactComponent} componentInstance The instance to mount.
+ * @param {number} rootID ID of the root node.
+ * @param {number} container container element to mount into.
+ * @param {ReactReconcileTransaction} transaction
+ */
+function mountComponentIntoNode(
+    componentInstance,
+    rootID,
+    container,
+    transaction) {
+  var markup = ReactReconciler.mountComponent(
+    componentInstance, rootID, transaction, emptyObject
+  );
+  componentInstance._isTopLevel = true;
+  ReactIOSMount._mountImageIntoNode(markup, container);
+}
+
+/**
+ * Batched mount.
+ *
+ * @param {ReactComponent} componentInstance The instance to mount.
+ * @param {number} rootID ID of the root node.
+ * @param {number} container container element to mount into.
+ */
+function batchedMountComponentIntoNode(
+    componentInstance,
+    rootID,
+    container) {
+  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
+  transaction.perform(
+    mountComponentIntoNode,
+    null,
+    componentInstance,
+    rootID,
+    container,
+    transaction
+  );
+  ReactUpdates.ReactReconcileTransaction.release(transaction);
+}
+
 /**
  * As soon as `ReactMount` is refactored to not rely on the DOM, we can share
  * code between the two. For now, we'll hard code the ID logic.
@@ -52,9 +98,47 @@ var ReactIOSMount = {
       ReactIOSMount.instanceCount++
     );
     ReactIOSMount._instancesByContainerID[topRootNodeID] = instance;
-    instance.mountComponentIntoNode(childRootNodeID, topRootNodeID);
+
+    // The initial render is synchronous but any updates that happen during
+    // rendering, in componentWillMount or componentDidMount, will be batched
+    // according to the current batching strategy.
+
+    ReactUpdates.batchedUpdates(
+      batchedMountComponentIntoNode,
+      instance,
+      childRootNodeID,
+      topRootNodeID
+    );
   },
 
+  /**
+   * @param {View} view View tree image.
+   * @param {number} containerViewID View to insert sub-view into.
+   */
+  _mountImageIntoNode: ReactPerf.measure(
+    // FIXME(frantic): #4441289 Hack to avoid modifying react-tools
+    'ReactComponentBrowserEnvironment',
+    'mountImageIntoNode',
+    function(mountImage, containerID) {
+      // Since we now know that the `mountImage` has been mounted, we can
+      // mark it as such.
+      ReactIOSTagHandles.associateRootNodeIDWithMountedNodeHandle(
+        mountImage.rootNodeID,
+        mountImage.tag
+      );
+      var addChildTags = [mountImage.tag];
+      var addAtIndices = [0];
+      RKUIManager.manageChildren(
+        ReactIOSTagHandles.mostRecentMountedNodeHandleForRootNodeID(containerID),
+        null,         // moveFromIndices
+        null,         // moveToIndices
+        addChildTags,
+        addAtIndices,
+        null          // removeAtIndices
+      );
+    }
+  ),
+
   /**
    * Standard unmounting of the component that is rendered into `containerID`,
    * but will also execute a command to remove the actual container view