Merge pull request #8560 from bvaughn/react-native-fiber

ReactNative fiber renderer

Author: bvaughn

flow/react-native-host-hooks.js

@@ -29,16 +29,35 @@ declare module 'TextInputState' {
 declare module 'UIManager' {
   declare var customBubblingEventTypes : Object;
   declare var customDirectEventTypes : Object;
-  declare function createView() : void;
-  declare function manageChildren() : void;
+  declare function createView(
+    reactTag : number,
+    viewName : string,
+    rootTag : number,
+    props : ?Object,
+  ) : void;
+  declare function manageChildren(
+    containerTag : number,
+    moveFromIndices : Array<number>,
+    moveToIndices : Array<number>,
+    addChildReactTags : Array<number>,
+    addAtIndices : Array<number>,
+    removeAtIndices : Array<number>
+  ) : void;
   declare function measure() : void;
   declare function measureInWindow() : void;
   declare function measureLayout() : void;
   declare function removeRootView() : void;
   declare function removeSubviewsFromContainerWithID() : void;
   declare function replaceExistingNonRootView() : void;
-  declare function setChildren() : void;
-  declare function updateView() : void;
+  declare function setChildren(
+    containerTag : number,
+    reactTags : Array<number>,
+  ) : void;
+  declare function updateView(
+    reactTag : number,
+    viewName : string,
+    props : ?Object,
+  ) : void;
 }
 declare module 'View' {
   declare var exports : typeof ReactComponent;

src/renderers/native/NativeMethodsMixin.js

@@ -150,7 +150,7 @@ var NativeMethodsMixin = {
     );
 
     UIManager.updateView(
-      findNodeHandle(this),
+      (findNodeHandle(this) : any),
       this.viewConfig.uiViewClassName,
       updatePayload
     );

src/renderers/native/ReactNative.js

@@ -11,67 +11,5 @@
  */
 'use strict';
 
-// Require ReactNativeDefaultInjection first for its side effects of setting up
-// the JS environment
-var ReactNativeComponentTree = require('ReactNativeComponentTree');
-var ReactNativeInjection = require('ReactNativeInjection');
-var ReactNativeStackInjection = require('ReactNativeStackInjection');
-
-var ReactNativeMount = require('ReactNativeMount');
-var ReactUpdates = require('ReactUpdates');
-
-var findNodeHandle = require('findNodeHandle');
-
-ReactNativeInjection.inject();
-ReactNativeStackInjection.inject();
-
-var render = function(
-  element: ReactElement<any>,
-  mountInto: number,
-  callback?: ?(() => void)
-): ?ReactComponent<any, any, any> {
-  return ReactNativeMount.renderComponent(element, mountInto, callback);
-};
-
-var ReactNative = {
-  hasReactNativeInitialized: false,
-  findNodeHandle: findNodeHandle,
-  render: render,
-  unmountComponentAtNode: ReactNativeMount.unmountComponentAtNode,
-
-  /* eslint-disable camelcase */
-  unstable_batchedUpdates: ReactUpdates.batchedUpdates,
-  /* eslint-enable camelcase */
-
-  unmountComponentAtNodeAndRemoveContainer: ReactNativeMount.unmountComponentAtNodeAndRemoveContainer,
-};
-
-// Inject the runtime into a devtools global hook regardless of browser.
-// Allows for debugging when the hook is injected on the page.
-/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
-    ComponentTree: {
-      getClosestInstanceFromNode: function(node) {
-        return ReactNativeComponentTree.getClosestInstanceFromNode(node);
-      },
-      getNodeFromInstance: function(inst) {
-        // inst is an internal instance (but could be a composite)
-        while (inst._renderedComponent) {
-          inst = inst._renderedComponent;
-        }
-        if (inst) {
-          return ReactNativeComponentTree.getNodeFromInstance(inst);
-        } else {
-          return null;
-        }
-      },
-    },
-    Mount: ReactNativeMount,
-    Reconciler: require('ReactReconciler'),
-  });
-}
-
-module.exports = ReactNative;
+// TODO (bvaughn) Enable Fiber experiement via ReactNativeFeatureFlags
+module.exports = require('ReactNativeStack');

src/renderers/native/ReactNativeComponentTree.js

@@ -39,28 +39,40 @@ function precacheNode(inst, tag) {
   instanceCache[tag] = nativeInst;
 }
 
+function precacheFiberNode(hostInst, tag) {
+  instanceCache[tag] = hostInst;
+}
+
 function uncacheNode(inst) {
   var tag = inst._rootNodeID;
   if (tag) {
     delete instanceCache[tag];
   }
 }
 
+function uncacheFiberNode(tag) {
+  delete instanceCache[tag];
+}
+
 function getInstanceFromTag(tag) {
   return instanceCache[tag] || null;
 }
 
 function getTagFromInstance(inst) {
-  invariant(inst._rootNodeID, 'All native instances should have a tag.');
-  return inst._rootNodeID;
+  // TODO (bvaughn) Clean up once Stack is deprecated
+  var tag = inst._rootNodeID || inst.stateNode._nativeTag;
+  invariant(tag, 'All native instances should have a tag.');
+  return tag;
 }
 
 var ReactNativeComponentTree = {
   getClosestInstanceFromNode: getInstanceFromTag,
   getInstanceFromNode: getInstanceFromTag,
   getNodeFromInstance: getTagFromInstance,
-  precacheNode: precacheNode,
-  uncacheNode: uncacheNode,
+  precacheFiberNode,
+  precacheNode,
+  uncacheFiberNode,
+  uncacheNode,
 };
 
 module.exports = ReactNativeComponentTree;

src/renderers/native/ReactNativeFeatureFlags.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright 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 ReactNativeFeatureFlags
+ */
+
+'use strict';
+
+var ReactNativeFeatureFlags = {
+  useFiber: false,
+};
+
+module.exports = ReactNativeFeatureFlags;