Adds a ReactNativeInspector API to ReactNativeRenderer

src/renderers/native/ReactNativeFiber.js

@@ -23,6 +23,7 @@ const ReactNativeInjection = require('ReactNativeInjection');
 const ReactNativeTagHandles = require('ReactNativeTagHandles');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
 const ReactPortal = require('ReactPortal');
+const ReactNativeFiberInspector = require('ReactNativeFiberInspector');
 const ReactVersion = require('ReactVersion');
 const UIManager = require('UIManager');
 
@@ -465,6 +466,7 @@ if (typeof injectInternals === 'function') {
   injectInternals({
     findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,
     findHostInstanceByFiber: NativeRenderer.findHostInstance,
+    getInspectorDataForViewTag: ReactNativeFiberInspector.getInspectorDataForViewTag,
     // This is an enum because we may add more (e.g. profiler build)
     bundleType: __DEV__ ? 1 : 0,
     version: ReactVersion,

src/renderers/native/ReactNativeFiberInspector.js

@@ -0,0 +1,101 @@
+/**
+ * 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 ReactNativeFiberInspector
+ * @flow
+ */
+'use strict';
+
+const ReactNativeComponentTree = require('ReactNativeComponentTree');
+const ReactFiberTreeReflection = require('ReactFiberTreeReflection');
+const getComponentName = require('getComponentName');
+
+import type {Fiber} from 'ReactFiber';
+
+if (__DEV__) {
+  var traverseOwnerTreeUp = function(hierarchy, instance: any) {
+    if (instance) {
+      hierarchy.unshift(instance);
+      traverseOwnerTreeUp(hierarchy, instance._debugOwner);
+    }
+  };
+
+  var getOwnerHierarchy = function(instance: any) {
+    var hierarchy = [];
+    traverseOwnerTreeUp(hierarchy, instance);
+    return hierarchy;
+  };
+
+  var lastNotNativeInstance = function(hierarchy) {
+    for (let i = hierarchy.length - 1; i > 1; i--) {
+      const instance = hierarchy[i];
+      if (!instance.viewConfig) {
+        return instance;
+      }
+    }
+    return hierarchy[0];
+  };
+
+  var getHostNode = function(fiber: Fiber, findNodeHandle) {
+    let hostNode;
+    // look for children first for the hostNode
+    // as composite fibers do not have a hostNode
+    while (fiber) {
+      hostNode = findNodeHandle(fiber.stateNode);
+      if (hostNode) {
+        return hostNode;
+      }
+      fiber = fiber.child;
+    }
+    return null;
+  };
+
+  var createHierarchy = function(fiberHierarchy) {
+    return fiberHierarchy.map(fiber => ({
+      name: getComponentName(fiber),
+      getInspectorData: findNodeHandle => ({
+        hostNode: getHostNode(fiber, findNodeHandle),
+        props: fiber.stateNode
+          ? getFiberCurrentPropsFromNode(fiber.stateNode)
+          : {},
+        source: fiber._debugSource,
+      }),
+    }));
+  };
+
+  const {
+    getClosestInstanceFromNode,
+    getFiberCurrentPropsFromNode,
+  } = ReactNativeComponentTree;
+
+  const {findCurrentFiberUsingSlowPath} = ReactFiberTreeReflection;
+
+  var getInspectorDataForViewTag = function(viewTag: number): Object {
+    const fiber = findCurrentFiberUsingSlowPath(
+      getClosestInstanceFromNode(viewTag),
+    );
+    const fiberHierarchy = getOwnerHierarchy(fiber);
+    const instance = lastNotNativeInstance(fiberHierarchy);
+    const hierarchy = createHierarchy(fiberHierarchy);
+    const props = getFiberCurrentPropsFromNode(instance.stateNode) || {};
+    const source = instance._debugSource;
+    const selection = fiberHierarchy.indexOf(instance);
+
+    return {
+      hierarchy,
+      instance,
+      props,
+      selection,
+      source,
+    };
+  };
+}
+
+module.exports = {
+  getInspectorDataForViewTag,
+};

src/renderers/native/ReactNativeStack.js

@@ -16,6 +16,7 @@ var ReactNativeInjection = require('ReactNativeInjection');
 var ReactNativeMount = require('ReactNativeMount');
 var ReactNativeStackInjection = require('ReactNativeStackInjection');
 var ReactUpdates = require('ReactUpdates');
+var ReactNativeStackInspector = require('ReactNativeStackInspector');
 
 var findNodeHandle = require('findNodeHandle');
 
@@ -81,6 +82,7 @@ if (
     },
     Mount: ReactNativeMount,
     Reconciler: require('ReactReconciler'),
+    getInspectorDataForViewTag: ReactNativeStackInspector.getInspectorDataForViewTag,
   });
 }
 

src/renderers/native/ReactNativeStackInspector.js

@@ -0,0 +1,75 @@
+/**
+ * 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 ReactNativeStackInspector
+ * @flow
+ */
+'use strict';
+
+const ReactNativeComponentTree = require('ReactNativeComponentTree');
+const getComponentName = require('getComponentName');
+
+if (__DEV__) {
+  var traverseOwnerTreeUp = function(hierarchy, instance) {
+    if (instance) {
+      hierarchy.unshift(instance);
+      traverseOwnerTreeUp(hierarchy, instance._currentElement._owner);
+    }
+  };
+
+  var getOwnerHierarchy = function(instance) {
+    var hierarchy = [];
+    traverseOwnerTreeUp(hierarchy, instance);
+    return hierarchy;
+  };
+
+  var lastNotNativeInstance = function(hierarchy) {
+    for (let i = hierarchy.length - 1; i > 1; i--) {
+      const instance = hierarchy[i];
+      if (!instance.viewConfig) {
+        return instance;
+      }
+    }
+    return hierarchy[0];
+  };
+
+  var createHierarchy = function(componentHierarchy) {
+    return componentHierarchy.map(component => ({
+      name: getComponentName(component),
+      getInspectorData: () => ({
+        hostNode: component.getHostNode(),
+        props: (component._instance || {}).props || {},
+        source: component._currentElement && component._currentElement._source,
+      }),
+    }));
+  };
+
+  var getInspectorDataForViewTag = function(viewTag: any): Object {
+    const component = ReactNativeComponentTree.getClosestInstanceFromNode(
+      viewTag,
+    );
+    const componentHierarchy = getOwnerHierarchy(component);
+    const instance = lastNotNativeInstance(componentHierarchy);
+    const hierarchy = createHierarchy(componentHierarchy);
+    const props = (instance._instance || {}).props || {};
+    const source = instance._currentElement && instance._currentElement._source;
+    const selection = componentHierarchy.indexOf(instance);
+
+    return {
+      hierarchy,
+      instance,
+      props,
+      selection,
+      source,
+    };
+  };
+}
+
+module.exports = {
+  getInspectorDataForViewTag,
+};