RCTTabBarItem (#23004)

Summary:
This pull request is part of https://github.com/facebook/react-native/issues/22990.

Changelog:
----------

[iOS] [Changed] - Split RCTTabBarItem into RCTTabBarItemNativeComponent.
Pull Request resolved: https://github.com/facebook/react-native/pull/23004

Reviewed By: TheSavior

Differential Revision: D13690820

Pulled By: rickhanlonii

fbshipit-source-id: 522e55ee74a797a3930edf6821c6d8f72511cd2b

Libraries/Components/TabBarIOS/RCTTabBarItemNativeComponent.js

@@ -0,0 +1,104 @@
+/**
+ * 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
+ * @noflow
+ */
+
+'use strict';
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+
+type TabBarItemEvent = SyntheticEvent<null>;
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * Little red bubble that sits at the top right of the icon.
+   */
+  badge?: ?(string | number),
+
+  /**
+   * Background color for the badge. Available since iOS 10.
+   */
+  badgeColor?: ColorValue,
+
+  /**
+   * Items comes with a few predefined system icons. Note that if you are
+   * using them, the title and selectedIcon will be overridden with the
+   * system ones.
+   */
+  systemIcon?: ?(
+    | 'bookmarks'
+    | 'contacts'
+    | 'downloads'
+    | 'favorites'
+    | 'featured'
+    | 'history'
+    | 'more'
+    | 'most-recent'
+    | 'most-viewed'
+    | 'recents'
+    | 'search'
+    | 'top-rated'
+  ),
+
+  /**
+   * A custom icon for the tab. It is ignored when a system icon is defined.
+   */
+  icon?: ?ImageSource,
+
+  /**
+   * A custom icon when the tab is selected. It is ignored when a system
+   * icon is defined. If left empty, the icon will be tinted in blue.
+   */
+  selectedIcon?: ?ImageSource,
+
+  /**
+   * Callback when this tab is being selected, you should change the state of your
+   * component to set selected={true}.
+   */
+  onPress?: ?(event: TabBarItemEvent) => mixed,
+
+  /**
+   * If set to true it renders the image as original,
+   * it defaults to being displayed as a template
+   */
+  renderAsOriginal?: ?boolean,
+
+  /**
+   * It specifies whether the children are visible or not. If you see a
+   * blank content, you probably forgot to add a selected one.
+   */
+  selected?: ?boolean,
+
+  /**
+   * Text that appears under the icon. It is ignored when a system icon
+   * is defined.
+   */
+  title?: ?string,
+
+  /**
+   * *(Apple TV only)* When set to true, this view will be focusable
+   * and navigable using the Apple TV remote.
+   *
+   * @platform ios
+   */
+  isTVSelectable?: ?boolean,
+|}>;
+
+type RCTTabBarItemNativeType = Class<NativeComponent<NativeProps>>;
+
+module.exports = ((requireNativeComponent(
+  'RCTTabBarItem',
+): any): RCTTabBarItemNativeType);

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -14,8 +14,7 @@ const React = require('React');
 const StaticContainer = require('StaticContainer.react');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-
-const requireNativeComponent = require('requireNativeComponent');
+const RCTTabBarItemNativeComponent = require('RCTTabBarItemNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 import type {ColorValue} from 'StyleSheetTypes';
@@ -150,9 +149,9 @@ class TabBarItemIOS extends React.Component<Props, State> {
     }
 
     return (
-      <RCTTabBarItem {...props} style={[styles.tab, style]}>
+      <RCTTabBarItemNativeComponent {...props} style={[styles.tab, style]}>
         {tabContents}
-      </RCTTabBarItem>
+      </RCTTabBarItemNativeComponent>
     );
   }
 }
@@ -167,6 +166,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const RCTTabBarItem = requireNativeComponent('RCTTabBarItem');
-
 module.exports = TabBarItemIOS;