AndroidDrawerLayout (#23036)

Summary:
Changelog:
----------

[Android] [Changed] - As mentioned in #22990, I have moved native components required by DrawerLayoutAndroid.android.js into separate files and added Flow Typing.

Question
----------
I have two questions.

It is not included in the files mentioned by #22990 [comment](https://github.com/facebook/react-native/issues/22990#issue-399165354). Perhaps we should be adding knowledge of that type to the codegen since it is quite complicated, what do you think TheSavior?

The `Props` type include `renderNavigationView: () => React.Element<any>,` and `children?: React.Node,`. Therefore I added `const React = require('React');` to the file, is it ok?
Pull Request resolved: https://github.com/facebook/react-native/pull/23036

Differential Revision: D13710035

Pulled By: cpojer

fbshipit-source-id: 671423b76c3b443d85e4b63d05d6253dbd33b29c

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -23,7 +23,7 @@ const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
   .Constants;
 
 const dismissKeyboard = require('dismissKeyboard');
-const requireNativeComponent = require('requireNativeComponent');
+const AndroidDrawerLayoutNativeComponent = require('AndroidDrawerLayoutNativeComponent');
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
@@ -131,23 +131,10 @@ type Props = $ReadOnly<{|
   style?: ?ViewStyleProp,
 |}>;
 
-type NativeProps = $ReadOnly<{|
-  ...$Diff<
-    Props,
-    $ReadOnly<{onDrawerStateChanged?: ?(state: DrawerStates) => mixed}>,
-  >,
-  onDrawerStateChanged?: ?(state: DrawerStateEvent) => mixed,
-|}>;
-
 type State = {|
   statusBarBackgroundColor: ColorValue,
 |};
 
-// The View that contains both the actual drawer and the main view
-const AndroidDrawerLayout = ((requireNativeComponent(
-  'AndroidDrawerLayout',
-): any): Class<ReactNative.NativeComponent<NativeProps>>);
-
 /**
  * React component that wraps the platform `DrawerLayout` (Android only). The
  * Drawer (typically used for navigation) is rendered with `renderNavigationView`
@@ -185,9 +172,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     drawerBackgroundColor: 'white',
   };
 
-  _nativeRef = React.createRef<
-    Class<ReactNative.NativeComponent<NativeProps>>,
-  >();
+  _nativeRef = React.createRef<Class<ReactNative.NativeComponent<Props>>>();
 
   state = {statusBarBackgroundColor: null};
 
@@ -229,7 +214,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       </View>
     );
     return (
-      <AndroidDrawerLayout
+      <AndroidDrawerLayoutNativeComponent
         {...props}
         /* $FlowFixMe(>=0.87.0 site=react_native_android_fb) This comment
          * suppresses an error found when Flow v0.87 was deployed. To see the
@@ -245,7 +230,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
         onDrawerStateChanged={this._onDrawerStateChanged}>
         {childrenWrapper}
         {drawerViewWrapper}
-      </AndroidDrawerLayout>
+      </AndroidDrawerLayoutNativeComponent>
     );
   }