Adds new, fiber-based renderer for native dubbed ReactNativeFiber.

Existing native renderer has been renamed to ReactNativeStack and a new flags file ReactNativeFeatureFlags has been added to switch between the 2 renderers.

Author: Brian Vaughn

flow/react-native-host-hooks.js

@@ -18,7 +18,7 @@ declare module 'deepFreezeAndThrowOnMutationInDev' {
   declare function exports<T>(obj : T) : T;
 }
 declare module 'flattenStyle' { }
-declare module 'InitializeJavaScriptAppEngine' { }
+declare module 'InitializeCore' { }
 declare module 'RCTEventEmitter' {
   declare function register() : void;
 }

gulpfile.js

@@ -145,7 +145,7 @@ var moduleMapReactNative = Object.assign(
     deepDiffer: 'react-native/lib/deepDiffer',
     deepFreezeAndThrowOnMutationInDev: 'react-native/lib/deepFreezeAndThrowOnMutationInDev',
     flattenStyle: 'react-native/lib/flattenStyle',
-    InitializeJavaScriptAppEngine: 'react-native/lib/InitializeJavaScriptAppEngine',
+    InitializeCore: 'react-native/lib/InitializeCore',
     RCTEventEmitter: 'react-native/lib/RCTEventEmitter',
     TextInputState: 'react-native/lib/TextInputState',
     UIManager: 'react-native/lib/UIManager',

src/renderers/native/ReactNative.js

@@ -11,67 +11,8 @@
  */
 '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');
+const ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 
-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;
+module.exports = ReactNativeFeatureFlags.useFiber
+  ? require('ReactNativeFiber')
+  : require('ReactNativeStack');

src/renderers/native/ReactNativeComponentTree.js

@@ -39,28 +39,41 @@ function precacheNode(inst, tag) {
   instanceCache[tag] = nativeInst;
 }
 
+function precacheFiberNode(hostInst, tag) {
+  instanceCache[tag] = hostInst;
+}
+
 function uncacheNode(inst) {
-  var tag = inst._rootNodeID;
+  // TODO (bvaughn) Clean up once Stack is deprecated
+  var tag = inst._rootNodeID || inst.stateNode._nativeTag;
   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;