Extracted definition and access to public instances to a separate module in Fabric

packages/react-native-renderer/src/NativeMethodsMixinUtils.js

@@ -45,26 +45,6 @@ export function mountSafeCallback_NOT_REALLY_SAFE(
   };
 }
 
-export function throwOnStylesProp(component: any, props: any) {
-  if (props.styles !== undefined) {
-    const owner = component._owner || null;
-    const name = component.constructor.displayName;
-    let msg =
-      '`styles` is not a supported property of `' +
-      name +
-      '`, did ' +
-      'you mean `style` (singular)?';
-    if (owner && owner.constructor && owner.constructor.displayName) {
-      msg +=
-        '\n\nCheck the `' +
-        owner.constructor.displayName +
-        '` parent ' +
-        ' component.';
-    }
-    throw new Error(msg);
-  }
-}
-
 export function warnForStyleProps(props: any, validAttributes: any) {
   if (__DEV__) {
     for (const key in validAttributes.style) {

packages/react-native-renderer/src/ReactFabric.js

@@ -28,6 +28,7 @@ import {
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
+import {getNativeTagFromPublicInstance} from './ReactFabricPublicInstanceUtils';
 
 // Modules provided by RN:
 import {
@@ -44,6 +45,7 @@ import {
 import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
+import type {PublicInstance} from './ReactFabricHostConfig';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -67,19 +69,23 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
       owner.stateNode._warnedAboutRefsInRender = true;
     }
   }
+
   if (componentOrHandle == null) {
     return null;
   }
-  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
-  if (componentOrHandle._nativeTag) {
-    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
-    return componentOrHandle;
+
+  // For compatibility with Paper
+  if (componentOrHandle._nativeTag != null) {
+    // $FlowExpectedError[incompatible-cast] For compatibility with Paper (when using Fabric)
+    return (componentOrHandle: PublicInstance);
   }
-  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
-  if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
-    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
-    return componentOrHandle.canonical;
+
+  // Fabric-specific
+  if (componentOrHandle.publicInstance != null) {
+    // $FlowExpectedError[incompatible-cast] For compatibility with Fabric (when using Paper)
+    return (componentOrHandle.publicInstance: PublicInstance);
   }
+
   let hostInstance;
   if (__DEV__) {
     hostInstance = findHostInstanceWithWarning(
@@ -111,19 +117,28 @@ function findNodeHandle(componentOrHandle: any): ?number {
       owner.stateNode._warnedAboutRefsInRender = true;
     }
   }
+
   if (componentOrHandle == null) {
     return null;
   }
+
   if (typeof componentOrHandle === 'number') {
     // Already a node handle
     return componentOrHandle;
   }
+
+  // For compatibility with Paper
   if (componentOrHandle._nativeTag) {
     return componentOrHandle._nativeTag;
   }
-  if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
-    return componentOrHandle.canonical._nativeTag;
+
+  if (componentOrHandle.internals != null) {
+    const nativeTag = componentOrHandle.internals.nativeTag;
+    if (nativeTag != null) {
+      return nativeTag;
+    }
   }
+
   let hostInstance;
   if (__DEV__) {
     hostInstance = findHostInstanceWithWarning(
@@ -138,7 +153,14 @@ function findNodeHandle(componentOrHandle: any): ?number {
     return hostInstance;
   }
 
-  return hostInstance._nativeTag;
+  // $FlowExpectedError[prop-missing] For compatibility with Paper (when using Fabric)
+  if (hostInstance._nativeTag != null) {
+    // $FlowExpectedError[incompatible-return]
+    return hostInstance._nativeTag;
+  }
+
+  // $FlowExpectedError[incompatible-call] For compatibility with Fabric (when using Paper)
+  return getNativeTagFromPublicInstance(hostInstance);
 }
 
 function dispatchCommand(handle: any, command: string, args: Array<any>) {
@@ -265,6 +287,7 @@ export {
 };
 
 injectIntoDevTools({
+  // $FlowExpectedError[incompatible-call] The type of `Instance` in `getClosestInstanceFromNode` does not match in Fabric and Paper, so it fails to typecheck here.
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,

packages/react-native-renderer/src/ReactFabricComponentTree.js

@@ -3,28 +3,53 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
  */
 
-function getInstanceFromInstance(instanceHandle) {
-  return instanceHandle;
+import type {
+  PublicInstance,
+  Instance,
+  Props,
+  TextInstance,
+} from './ReactFabricHostConfig';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {getPublicInstance} from './ReactFabricHostConfig';
+
+// `node` is typed incorrectly here. The proper type should be `PublicInstance`.
+// This is ok in DOM because they types are interchangeable, but in React Native
+// they aren't.
+function getInstanceFromNode(node: Instance | TextInstance): Fiber | null {
+  const instance: Instance = (node: $FlowFixMe); // In React Native, node is never a text instance
+
+  if (
+    instance.internals != null &&
+    instance.internals.internalInstanceHandle != null
+  ) {
+    return instance.internals.internalInstanceHandle;
+  }
+
+  // $FlowFixMe[incompatible-return] DevTools incorrectly passes a fiber in React Native.
+  return node;
 }
 
-function getTagFromInstance(inst) {
-  const nativeInstance = inst.stateNode.canonical;
+function getNodeFromInstance(fiber: Fiber): PublicInstance {
+  const publicInstance = getPublicInstance(fiber.stateNode);
 
-  if (!nativeInstance._nativeTag) {
-    throw new Error('All native instances should have a tag.');
+  if (publicInstance == null) {
+    throw new Error('Could not find host instance from fiber');
   }
 
-  return nativeInstance;
+  return publicInstance;
+}
+
+function getFiberCurrentPropsFromNode(instance: Instance): Props {
+  return instance && instance.internals && instance.internals.currentProps;
 }
 
 export {
-  getInstanceFromInstance as getClosestInstanceFromNode,
-  getInstanceFromInstance as getInstanceFromNode,
-  getTagFromInstance as getNodeFromInstance,
+  getInstanceFromNode,
+  getInstanceFromNode as getClosestInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
 };
-
-export function getFiberCurrentPropsFromNode(inst) {
-  return inst.canonical.currentProps;
-}

packages/react-native-renderer/src/ReactFabricEventEmitter.js

@@ -25,6 +25,7 @@ import {
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import accumulateInto from './legacy-events/accumulateInto';
 
+import {getPublicInstance} from './ReactFabricHostConfig';
 import getListener from './ReactNativeGetListener';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 
@@ -92,7 +93,8 @@ export function dispatchEvent(
     const stateNode = targetFiber.stateNode;
     // Guard against Fiber being unmounted
     if (stateNode != null) {
-      eventTarget = stateNode.canonical;
+      // $FlowExpectedError[incompatible-cast] public instances in Fabric do not implement `EventTarget` yet.
+      eventTarget = (getPublicInstance(stateNode): EventTarget);
     }
   }
 

packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js

@@ -7,42 +7,24 @@
  * @flow
  */
 
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
 const ReactFabricGlobalResponderHandler = {
   onChange: function (from: any, to: any, blockNativeResponder: boolean) {
-    const fromOrTo = from || to;
-    const fromOrToStateNode = fromOrTo && fromOrTo.stateNode;
-    const isFabric = !!(
-      fromOrToStateNode && fromOrToStateNode.canonical._internalInstanceHandle
-    );
-
-    if (isFabric) {
-      if (from) {
-        // equivalent to clearJSResponder
-        nativeFabricUIManager.setIsJSResponder(
-          from.stateNode.node,
-          false,
-          blockNativeResponder || false,
-        );
-      }
+    if (from) {
+      // equivalent to clearJSResponder
+      nativeFabricUIManager.setIsJSResponder(
+        from.stateNode.node,
+        false,
+        blockNativeResponder || false,
+      );
+    }
 
-      if (to) {
-        // equivalent to setJSResponder
-        nativeFabricUIManager.setIsJSResponder(
-          to.stateNode.node,
-          true,
-          blockNativeResponder || false,
-        );
-      }
-    } else {
-      if (to !== null) {
-        const tag = to.stateNode.canonical._nativeTag;
-        UIManager.setJSResponder(tag, blockNativeResponder);
-      } else {
-        UIManager.clearJSResponder();
-      }
+    if (to) {
+      // equivalent to setJSResponder
+      nativeFabricUIManager.setIsJSResponder(
+        to.stateNode.node,
+        true,
+        blockNativeResponder || false,
+      );
     }
   },
 };