Update commands transform to use helper

Summary:
This uses a new helper called `dispatchCommand` that now exists on the renderer. This was added to the renderer here: facebook/react#16085

In Paper it calls UIManager.dispatchViewManagerCommand and in Fabric it calls the c++ Fabric UIManager

Reviewed By: rickhanlonii

Differential Revision: D16578708

fbshipit-source-id: 30f9468a7fd48afb506c0ee49a460b949bc863a1

Author: elicwhite

packages/babel-plugin-inline-view-configs/__tests__/__snapshots__/index-test.js.snap

@@ -23,12 +23,8 @@ type ModuleProps = $ReadOnly<{| ...ViewProps,
 const registerGeneratedViewConfig = require('registerGeneratedViewConfig');
 
 const {
-  UIManager
-} = require(\\"react-native\\");
-
-const {
-  findNodeHandle
-} = require(\\"react-native\\");
+  dispatchCommand
+} = require(\\"react-native/Libraries/Renderer/shims/ReactNative\\");
 
 const ModuleViewConfig = {
   uiViewClassName: 'RCTModule',
@@ -57,11 +53,11 @@ export const __INTERNAL_VIEW_CONFIG = ModuleViewConfig;
 export default nativeComponentName;
 export const Commands = {
   hotspotUpdate(ref, x, y) {
-    UIManager.dispatchViewManagerCommand(findNodeHandle(ref), UIManager.getViewManagerConfig(\\"RCTModule\\").Commands.hotspotUpdate, [x, y]);
+    dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
   },
 
   scrollTo(ref, y, animated) {
-    UIManager.dispatchViewManagerCommand(findNodeHandle(ref), UIManager.getViewManagerConfig(\\"RCTModule\\").Commands.scrollTo, [y, animated]);
+    dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
   }
 
 };"

packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js

@@ -277,28 +277,24 @@ function buildCommands(
     return null;
   }
 
-  imports.add(UIMANAGER_IMPORT);
-  imports.add('const {findNodeHandle} = require("react-native")');
+  imports.add(
+    'const {dispatchCommand} = require("react-native/Libraries/Renderer/shims/ReactNative");',
+  );
 
   const properties = commands.map(command => {
     const commandName = command.name;
     const params = command.typeAnnotation.params;
 
-    const componentNameLiteral = j.literal(componentName);
+    const commandNameLiteral = j.literal(commandName);
     const commandNameIdentifier = j.identifier(commandName);
     const arrayParams = j.arrayExpression(
       params.map(param => {
         return j.identifier(param.name);
       }),
     );
 
-    const expression = j.template.expression`
-      UIManager.dispatchViewManagerCommand(
-        findNodeHandle(ref),
-        UIManager.getViewManagerConfig(${componentNameLiteral}).Commands.${commandNameIdentifier},
-        ${arrayParams}
-      )
-      `;
+    const expression = j.template
+      .expression`dispatchCommand(ref, ${commandNameLiteral}, ${arrayParams})`;
 
     const functionParams = params.map(param => {
       return j.identifier(param.name);

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -127,8 +127,7 @@ Map {
 'use strict';
 
 const registerGeneratedViewConfig = require('registerGeneratedViewConfig');
-const {UIManager} = require(\\"react-native\\")
-const {findNodeHandle} = require(\\"react-native\\")
+const {dispatchCommand} = require(\\"react-native/Libraries/Renderer/shims/ReactNative\\");
 
 const CommandNativeComponentViewConfig = {
   uiViewClassName: 'CommandNativeComponent',
@@ -145,19 +144,11 @@ export default nativeComponentName;
 
 export const Commands = {
     flashScrollIndicators(ref) {
-        UIManager.dispatchViewManagerCommand(
-          findNodeHandle(ref),
-          UIManager.getViewManagerConfig(\\"CommandNativeComponent\\").Commands.flashScrollIndicators,
-          []
-        );
+        dispatchCommand(ref, \\"flashScrollIndicators\\", []);
     },
 
     allTypes(ref, x, message, animated) {
-        UIManager.dispatchViewManagerCommand(
-          findNodeHandle(ref),
-          UIManager.getViewManagerConfig(\\"CommandNativeComponent\\").Commands.allTypes,
-          [x, message, animated]
-        );
+        dispatchCommand(ref, \\"allTypes\\", [x, message, animated]);
     }
 };
 ",
@@ -179,8 +170,7 @@ Map {
 'use strict';
 
 const registerGeneratedViewConfig = require('registerGeneratedViewConfig');
-const {UIManager} = require(\\"react-native\\")
-const {findNodeHandle} = require(\\"react-native\\")
+const {dispatchCommand} = require(\\"react-native/Libraries/Renderer/shims/ReactNative\\");
 
 const CommandNativeComponentViewConfig = {
   uiViewClassName: 'CommandNativeComponent',
@@ -200,11 +190,7 @@ export default nativeComponentName;
 
 export const Commands = {
     hotspotUpdate(ref, x, y) {
-        UIManager.dispatchViewManagerCommand(
-          findNodeHandle(ref),
-          UIManager.getViewManagerConfig(\\"CommandNativeComponent\\").Commands.hotspotUpdate,
-          [x, y]
-        );
+        dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
     }
 };
 ",