Allocate unique reactTags for RN and Fabric (#12587)

Took this opportunity to remove some abstract overhead.

In Fabric it is extra simple since they no longer overlap with root tags.

Author: sebmarkbage

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

@@ -20,7 +20,6 @@ import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';
 import * as ReactNativeFrameScheduling from './ReactNativeFrameScheduling';
 import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';
 import ReactFiberReconciler from 'react-reconciler';
-import ReactNativeTagHandles from './ReactNativeTagHandles';
 
 import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
 import emptyObject from 'fbjs/lib/emptyObject';
@@ -30,6 +29,12 @@ import TextInputState from 'TextInputState';
 import FabricUIManager from 'FabricUIManager';
 import UIManager from 'UIManager';
 
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+// This means that they never overlap.
+let nextReactTag = 2;
+
 /**
  * This is used for refs on host components.
  */
@@ -133,7 +138,9 @@ const ReactFabricRenderer = ReactFiberReconciler({
     hostContext: {},
     internalInstanceHandle: Object,
   ): Instance {
-    const tag = ReactNativeTagHandles.allocateTag();
+    const tag = nextReactTag;
+    nextReactTag += 2;
+
     const viewConfig = ReactNativeViewConfigRegistry.get(type);
 
     if (__DEV__) {
@@ -171,7 +178,8 @@ const ReactFabricRenderer = ReactFiberReconciler({
     hostContext: {},
     internalInstanceHandle: Object,
   ): TextInstance {
-    const tag = ReactNativeTagHandles.allocateTag();
+    const tag = nextReactTag;
+    nextReactTag += 2;
 
     const node = FabricUIManager.createNode(
       tag, // reactTag

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

@@ -13,7 +13,6 @@ import {batchedUpdates} from 'events/ReactGenericBatching';
 import warning from 'fbjs/lib/warning';
 
 import {getInstanceFromNode} from './ReactNativeComponentTree';
-import ReactNativeTagHandles from './ReactNativeTagHandles';
 
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 
@@ -166,7 +165,7 @@ export function receiveTouches(
     let rootNodeID = null;
     const target = nativeEvent.target;
     if (target !== null && target !== undefined) {
-      if (target < ReactNativeTagHandles.tagsStartAt) {
+      if (target < 1) {
         if (__DEV__) {
           warning(
             false,

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

@@ -25,7 +25,6 @@ import {
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 import * as ReactNativeFrameScheduling from './ReactNativeFrameScheduling';
-import ReactNativeTagHandles from './ReactNativeTagHandles';
 
 type Container = number;
 export type Instance = {
@@ -36,6 +35,19 @@ export type Instance = {
 type Props = Object;
 type TextInstance = number;
 
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+let nextReactTag = 3;
+function allocateTag() {
+  let tag = nextReactTag;
+  if (tag % 10 === 1) {
+    tag += 2;
+  }
+  nextReactTag = tag + 2;
+  return tag;
+}
+
 function recursivelyUncacheFiberNode(node: Instance | TextInstance) {
   if (typeof node === 'number') {
     // Leaf node (eg text)
@@ -62,7 +74,7 @@ const NativeRenderer = ReactFiberReconciler({
     hostContext: {},
     internalInstanceHandle: Object,
   ): Instance {
-    const tag = ReactNativeTagHandles.allocateTag();
+    const tag = allocateTag();
     const viewConfig = ReactNativeViewConfigRegistry.get(type);
 
     if (__DEV__) {
@@ -101,7 +113,7 @@ const NativeRenderer = ReactFiberReconciler({
     hostContext: {},
     internalInstanceHandle: Object,
   ): TextInstance {
-    const tag = ReactNativeTagHandles.allocateTag();
+    const tag = allocateTag();
 
     UIManager.createView(
       tag, // reactTag

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

@@ -9,7 +9,6 @@
 
 // Mock of the Native Hooks
 
-const ReactNativeTagHandles = require('../ReactNativeTagHandles').default;
 const invariant = require('fbjs/lib/invariant');
 
 // Map of viewTag -> {children: [childTag], parent: ?parentTag}
@@ -18,7 +17,7 @@ let views = new Map();
 
 function autoCreateRoot(tag) {
   // Seriously, this is how we distinguish roots in RN.
-  if (!views.has(tag) && ReactNativeTagHandles.reactTagIsNativeTopRootID(tag)) {
+  if (!views.has(tag) && tag % 10 === 1) {
     roots.push(tag);
     views.set(tag, {
       children: [],

packages/react-native-renderer/src/__mocks__/UIManager.js

@@ -57,7 +57,7 @@ describe('ReactNative', () => {
     expect(UIManager.createView.mock.calls.length).toBe(1);
     expect(UIManager.setChildren.mock.calls.length).toBe(1);
     expect(UIManager.manageChildren).not.toBeCalled();
-    expect(UIManager.updateView).toBeCalledWith(2, 'View', {foo: 'bar'});
+    expect(UIManager.updateView).toBeCalledWith(3, 'View', {foo: 'bar'});
   });
 
   it('should not call UIManager.updateView after render for properties that have not changed', () => {