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/AndroidDrawerLayoutNativeComponent.js

@@ -0,0 +1,121 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {NativeComponent} from 'ReactNative';
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewStyleProp} from 'StyleSheet';
+import type React from 'React';
+
+type ColorValue = null | string;
+
+type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
+
+type DrawerStateEvent = SyntheticEvent<
+  $ReadOnly<{|
+    drawerState: number,
+  |}>,
+>;
+
+type DrawerSlideEvent = SyntheticEvent<
+  $ReadOnly<{|
+    offset: number,
+  |}>,
+>;
+
+type NativeProps = $ReadOnly<{|
+  /**
+   * Determines whether the keyboard gets dismissed in response to a drag.
+   *   - 'none' (the default), drags do not dismiss the keyboard.
+   *   - 'on-drag', the keyboard is dismissed when a drag begins.
+   */
+  keyboardDismissMode?: ?('none' | 'on-drag'),
+
+  /**
+   * Specifies the background color of the drawer. The default value is white.
+   * If you want to set the opacity of the drawer, use rgba. Example:
+   *
+   * ```
+   * return (
+   *   <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
+   *   </DrawerLayoutAndroid>
+   * );
+   * ```
+   */
+  drawerBackgroundColor: ColorValue,
+
+  /**
+   * Specifies the side of the screen from which the drawer will slide in.
+   */
+  drawerPosition: ?number,
+
+  /**
+   * Specifies the width of the drawer, more precisely the width of the view that be pulled in
+   * from the edge of the window.
+   */
+  drawerWidth?: ?number,
+
+  /**
+   * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+   * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+   * - locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+   * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
+   * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+   */
+  drawerLockMode?: ?('unlocked' | 'locked-closed' | 'locked-open'),
+
+  /**
+   * Function called whenever there is an interaction with the navigation view.
+   */
+  onDrawerSlide?: ?(event: DrawerSlideEvent) => mixed,
+
+  /**
+   * Function called when the drawer state has changed. The drawer can be in 3 states:
+   * - Idle, meaning there is no interaction with the navigation view happening at the time
+   * - Dragging, meaning there is currently an interaction with the navigation view
+   * - Settling, meaning that there was an interaction with the navigation view, and the
+   * navigation view is now finishing its closing or opening animation
+   */
+  onDrawerStateChanged?: ?(state: DrawerStateEvent) => mixed,
+
+  /**
+   * Function called whenever the navigation view has been opened.
+   */
+  onDrawerOpen?: ?() => mixed,
+
+  /**
+   * Function called whenever the navigation view has been closed.
+   */
+  onDrawerClose?: ?() => mixed,
+
+  /**
+   * The navigation view that will be rendered to the side of the screen and can be pulled in.
+   */
+  renderNavigationView: () => React.Element<any>,
+
+  /**
+   * Make the drawer take the entire screen and draw the background of the
+   * status bar to allow it to open over the status bar. It will only have an
+   * effect on API 21+.
+   */
+  statusBarBackgroundColor?: ?ColorValue,
+
+  children?: React.Node,
+  style?: ?ViewStyleProp,
+|}>;
+
+type AndroidDrawerLayoutNativeType = Class<NativeComponent<NativeProps>>;
+
+module.exports = ((requireNativeComponent(
+  'AndroidDrawerLayout',
+): any): AndroidDrawerLayoutNativeType);

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>
     );
   }