ToolbarAndroid (#23009)

Summary:
[Android] [Changed] - create standalone JS file for ToolbarAndroid, as part of #22990

I have a question.

`ToolbarAndroid` component use 2 types from other files.
They are not included files mentioned by https://github.com/facebook/react-native/issues/22990#issue-399165354.
One type `ColorValue` is very simple and I'll copy it.
But `ImageSource` type is a bit complicated I think it wolud be better to add to the codegen.
How do you think about it? TheSavior
Update: -> solved 👍

----------
- [x] yarn lint
- [x] yarn flow-check-android
- [x] yarn flow
- [x] yarn test
Pull Request resolved: https://github.com/facebook/react-native/pull/23009

Differential Revision: D13697524

Pulled By: TheSavior

fbshipit-source-id: 72ce43e1510be0986a3798d795f07ab176bd2a92

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -13,7 +13,7 @@
 const React = require('React');
 const UIManager = require('UIManager');
 
-const requireNativeComponent = require('requireNativeComponent');
+const ToolbarAndroidNativeComponent = require('ToolbarAndroidNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
 
 import type {SyntheticEvent} from 'CoreEventTypes';
@@ -58,8 +58,6 @@ import type {NativeComponent} from 'ReactNative';
  * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
  */
 
-const NativeToolbar = requireNativeComponent('ToolbarAndroid');
-
 type Action = $ReadOnly<{|
   title: string,
   icon?: ?ImageSource,
@@ -163,7 +161,7 @@ type ToolbarAndroidProps = $ReadOnly<{|
 
 type Props = $ReadOnly<{|
   ...ToolbarAndroidProps,
-  forwardedRef: ?React.Ref<typeof NativeToolbar>,
+  forwardedRef: ?React.Ref<typeof ToolbarAndroidNativeComponent>,
 |}>;
 
 class ToolbarAndroid extends React.Component<Props> {
@@ -227,7 +225,7 @@ class ToolbarAndroid extends React.Component<Props> {
     }
 
     return (
-      <NativeToolbar
+      <ToolbarAndroidNativeComponent
         onSelect={this._onSelect}
         {...nativeProps}
         ref={forwardedRef}
@@ -239,7 +237,7 @@ class ToolbarAndroid extends React.Component<Props> {
 const ToolbarAndroidToExport = React.forwardRef(
   (
     props: ToolbarAndroidProps,
-    forwardedRef: ?React.Ref<typeof NativeToolbar>,
+    forwardedRef: ?React.Ref<typeof ToolbarAndroidNativeComponent>,
   ) => {
     return <ToolbarAndroid {...props} forwardedRef={forwardedRef} />;
   },

Libraries/Components/ToolbarAndroid/ToolbarAndroidNativeComponent.js

@@ -0,0 +1,133 @@
+/**
+ * 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 {SyntheticEvent} from 'CoreEventTypes';
+import type {ImageSource} from 'ImageSource';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Action = $ReadOnly<{|
+  title: string,
+  icon?: ?ImageSource,
+  show?: 'always' | 'ifRoom' | 'never',
+  showWithText?: boolean,
+|}>;
+
+type ToolbarAndroidChangeEvent = SyntheticEvent<
+  $ReadOnly<{|
+    position: number,
+  |}>,
+>;
+
+type NativeProps = $ReadOnly<{|
+  onSelect: (event: ToolbarAndroidChangeEvent) => mixed,
+  nativeActions?: Array<Action>,
+|}>;
+
+type ColorValue = null | string;
+
+type ToolbarAndroidProps = $ReadOnly<{|
+  ...ViewProps,
+  ...NativeProps,
+  /**
+   * or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
+   * Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
+   * menu.
+   *
+   * This property takes an array of objects, where each object has the following keys:
+   *
+   * * `title`: **required**, the title of this action
+   * * `icon`: the icon for this action, e.g. `require('./some_icon.png')`
+   * * `show`: when to show this action as an icon or hide it in the overflow menu: `always`,
+   * `ifRoom` or `never`
+   * * `showWithText`: boolean, whether to show text alongside the icon or not
+   */
+  actions?: ?Array<Action>,
+  /**
+   * Sets the toolbar logo.
+   */
+  logo?: ?ImageSource,
+  /**
+   * Sets the navigation icon.
+   */
+  navIcon?: ?ImageSource,
+  /**
+   * Callback that is called when an action is selected. The only argument that is passed to the
+   * callback is the position of the action in the actions array.
+   */
+  onActionSelected?: ?(position: number) => void,
+  /**
+   * Callback called when the icon is selected.
+   */
+  onIconClicked?: ?() => void,
+  /**
+   * Sets the overflow icon.
+   */
+  overflowIcon?: ?ImageSource,
+  /**
+   * Sets the toolbar subtitle.
+   */
+  subtitle?: ?string,
+  /**
+   * Sets the toolbar subtitle color.
+   */
+  subtitleColor?: ?ColorValue,
+  /**
+   * Sets the toolbar title.
+   */
+  title?: ?Stringish,
+  /**
+   * Sets the toolbar title color.
+   */
+  titleColor?: ?ColorValue,
+  /**
+   * Sets the content inset for the toolbar starting edge.
+   *
+   * The content inset affects the valid area for Toolbar content other than
+   * the navigation button and menu. Insets define the minimum margin for
+   * these components and can be used to effectively align Toolbar content
+   * along well-known gridlines.
+   */
+  contentInsetStart?: ?number,
+  /**
+   * Sets the content inset for the toolbar ending edge.
+   *
+   * The content inset affects the valid area for Toolbar content other than
+   * the navigation button and menu. Insets define the minimum margin for
+   * these components and can be used to effectively align Toolbar content
+   * along well-known gridlines.
+   */
+  contentInsetEnd?: ?number,
+  /**
+   * Used to set the toolbar direction to RTL.
+   * In addition to this property you need to add
+   *
+   *   android:supportsRtl="true"
+   *
+   * to your application AndroidManifest.xml and then call
+   * `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity
+   * `onCreate` method.
+   */
+  rtl?: ?boolean,
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+|}>;
+
+type NativeToolbarAndroidProps = Class<NativeComponent<ToolbarAndroidProps>>;
+
+module.exports = ((requireNativeComponent(
+  'ToolbarAndroid',
+): any): NativeToolbarAndroidProps);