Change AndroidDrawerLayoutNativeComponent to use JS codegen for commands

Summary:
`codegenNativeCommands` returns an object with functions for each command that has the previous behavior inside the React Renderer, and the new Fabric logic inside of the Fabric React Native Renderer.

Changelog:
[Internal] - Change AndroidDrawerLayoutNativeComponent to use JS codegen for commands

Reviewed By: rickhanlonii

Differential Revision: D16529887

fbshipit-source-id: 24a5307944a7f62e18482d60d26052fea3be2051

Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -10,7 +10,9 @@
 
 'use strict';
 
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import * as React from 'react';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {
   WithDefault,
@@ -28,6 +30,11 @@ type DrawerSlideEvent = $ReadOnly<{|
   offset: Float,
 |}>;
 
+interface NativeCommands {
+  +openDrawer: (viewRef: React.Ref<'AndroidDrawerLayout'>) => void;
+  +closeDrawer: (viewRef: React.Ref<'AndroidDrawerLayout'>) => void;
+}
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
   /**
@@ -106,4 +113,8 @@ type NativeProps = $ReadOnly<{|
   statusBarBackgroundColor?: ?ColorValue,
 |}>;
 
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['openDrawer', 'closeDrawer'],
+});
+
 export default codegenNativeComponent<NativeProps>('AndroidDrawerLayout');

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -22,7 +22,9 @@ const nullthrows = require('nullthrows');
 const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
   .Constants;
 const dismissKeyboard = require('../../Utilities/dismissKeyboard');
-import AndroidDrawerLayoutNativeComponent from './AndroidDrawerLayoutNativeComponent';
+import AndroidDrawerLayoutNativeComponent, {
+  Commands,
+} from './AndroidDrawerLayoutNativeComponent';
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
@@ -163,7 +165,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     drawerBackgroundColor: 'white',
   };
 
-  _nativeRef = React.createRef<Class<ReactNative.NativeComponent<Props>>>();
+  _nativeRef = React.createRef();
 
   state = {statusBarBackgroundColor: null};
 
@@ -264,23 +266,14 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
    * Opens the drawer.
    */
   openDrawer() {
-    UIManager.dispatchViewManagerCommand(
-      this._getDrawerLayoutHandle(),
-      UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands.openDrawer,
-      null,
-    );
+    Commands.openDrawer(nullthrows(this._nativeRef.current));
   }
 
   /**
    * Closes the drawer.
    */
   closeDrawer() {
-    UIManager.dispatchViewManagerCommand(
-      this._getDrawerLayoutHandle(),
-      UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands
-        .closeDrawer,
-      null,
-    );
+    Commands.closeDrawer(nullthrows(this._nativeRef.current));
   }
 
   /**
@@ -318,9 +311,6 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
    *   </DrawerLayoutAndroid>
    * )
    */
-  _getDrawerLayoutHandle() {
-    return ReactNative.findNodeHandle(this._nativeRef.current);
-  }
 
   /**
    * Native methods