Create RootTagContext and provide it in AppContainer

Summary:
We should remove all usages of React's legacy context API because it'll be removed from React at some point, it prevents some performance optimizations in updates and can cause conflicts between different context providers (like mixins).

This creates a new Context for `rootTag` (this granularity is intentional) so users that are consuming it via the legacy context API can start migrating away from it.

I didn't create a more generic context (like ReactRootContext, ReactApplicationContext) because having a more granular context makes it easier to track and remove it if we want to, and prevents re-rendering when users only care about certain values.

Reviewed By: rickhanlonii, cpojer

Differential Revision: D14941918

fbshipit-source-id: 7ceea62727d10a591367b7ed7c447309b286758d

Libraries/ReactNative/AppContainer.js

@@ -15,6 +15,7 @@ const PropTypes = require('prop-types');
 const RCTDeviceEventEmitter = require('../EventEmitter/RCTDeviceEventEmitter');
 const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative');
+const RootTagContext = require('./RootTagContext');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
 
@@ -112,11 +113,13 @@ class AppContainer extends React.Component<Props, State> {
       innerView = <Wrapper>{innerView}</Wrapper>;
     }
     return (
-      <View style={styles.appContainer} pointerEvents="box-none">
-        {innerView}
-        {yellowBox}
-        {this.state.inspector}
-      </View>
+      <RootTagContext.Provider value={this.props.rootTag}>
+        <View style={styles.appContainer} pointerEvents="box-none">
+          {innerView}
+          {yellowBox}
+          {this.state.inspector}
+        </View>
+      </RootTagContext.Provider>
     );
   }
 }

Libraries/ReactNative/RootTagContext.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+'use strict';
+
+const React = require('react');
+
+module.exports = React.createContext<number>(0);

Libraries/react-native/react-native-implementation.js

@@ -322,6 +322,9 @@ module.exports = {
   get requireNativeComponent() {
     return require('../ReactNative/requireNativeComponent');
   },
+  get unstable_RootTagContext() {
+    return require('../ReactNative/RootTagContext');
+  },
 
   // Prop Types
   get ColorPropType() {