TabBarIOS: Remove PropTypes (#21315)

Summary:
Part of: https://github.com/react-native-community/discussions-and-proposals/issues/29

This PR removes the prop types from the TabBarIOS files, and cleans up their flow types.
Pull Request resolved: https://github.com/facebook/react-native/pull/21315

Reviewed By: TheSavior

Differential Revision: D10031191

Pulled By: rsnara

fbshipit-source-id: 50dc26b858ea5b065a3934080af7e6b0e36c7f46

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -10,65 +10,52 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
-const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
-const PropTypes = require('prop-types');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const TabBarItemIOS = require('TabBarItemIOS');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
 import type {ViewProps} from 'ViewPropTypes';
+import type {ColorValue} from 'StyleSheetTypes';
 
 const RCTTabBar = requireNativeComponent('RCTTabBar');
 
 type Props = $ReadOnly<{|
   ...ViewProps,
-  style?: DangerouslyImpreciseStyleProp,
-  unselectedTintColor?: string,
-  tintColor?: string,
-  unselectedItemTintColor?: string,
-  barTintColor?: string,
-  barStyle?: 'default' | 'black',
-  translucent?: boolean,
-  itemPositioning?: 'fill' | 'center' | 'auto',
-  children: React.Node,
-|}>;
 
-class TabBarIOS extends React.Component<Props> {
-  static Item = TabBarItemIOS;
-
-  static propTypes = {
-    ...DeprecatedViewPropTypes,
-    style: DeprecatedViewPropTypes.style,
   /**
    * Color of text on unselected tabs
    */
-    unselectedTintColor: ColorPropType,
+  unselectedTintColor?: ColorValue,
+
   /**
    * Color of the currently selected tab icon
    */
-    tintColor: ColorPropType,
+  tintColor?: ColorValue,
+
   /**
    * Color of unselected tab icons. Available since iOS 10.
    */
-    unselectedItemTintColor: ColorPropType,
+  unselectedItemTintColor?: ColorValue,
+
   /**
    * Background color of the tab bar
    */
-    barTintColor: ColorPropType,
+  barTintColor?: ColorValue,
+
   /**
    * The style of the tab bar. Supported values are 'default', 'black'.
    * Use 'black' instead of setting `barTintColor` to black. This produces
    * a tab bar with the native iOS style with higher translucency.
    */
-    barStyle: PropTypes.oneOf(['default', 'black']),
+  barStyle?: ?('default' | 'black'),
+
   /**
    * A Boolean value that indicates whether the tab bar is translucent
    */
-    translucent: PropTypes.bool,
+  translucent?: ?boolean,
+
   /**
    * Specifies tab bar item positioning. Available values are:
    * - fill - distributes items across the entire width of the tab bar
@@ -78,8 +65,11 @@ class TabBarIOS extends React.Component<Props> {
    * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
    * it defaults to center.
    */
-    itemPositioning: PropTypes.oneOf(['fill', 'center', 'auto']),
-  };
+  itemPositioning?: ?('fill' | 'center' | 'auto'),
+|}>;
+
+class TabBarIOS extends React.Component<Props> {
+  static Item = TabBarItemIOS;
 
   render() {
     return (

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -10,10 +10,7 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
-const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const Image = require('Image');
-const PropTypes = require('prop-types');
 const React = require('React');
 const StaticContainer = require('StaticContainer.react');
 const StyleSheet = require('StyleSheet');
@@ -21,78 +18,93 @@ const View = require('View');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-class TabBarItemIOS extends React.Component {
-  static propTypes = {
-    ...DeprecatedViewPropTypes,
+import type {ViewProps} from 'ViewPropTypes';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ImageSource} from 'ImageSource';
+
+type Props = $ReadOnly<{|
+  ...ViewProps,
+
   /**
    * Little red bubble that sits at the top right of the icon.
    */
-    badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  badge?: ?(string | number),
+
   /**
    * Background color for the badge. Available since iOS 10.
    */
-    badgeColor: ColorPropType,
+  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: PropTypes.oneOf([
-      'bookmarks',
-      'contacts',
-      'downloads',
-      'favorites',
-      'featured',
-      'history',
-      'more',
-      'most-recent',
-      'most-viewed',
-      'recents',
-      'search',
-      'top-rated',
-    ]),
+  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: Image.propTypes.source,
+  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: Image.propTypes.source,
+  selectedIcon?: ?ImageSource,
+
   /**
    * Callback when this tab is being selected, you should change the state of your
    * component to set selected={true}.
    */
-    onPress: PropTypes.func,
+  onPress?: ?(event: SyntheticEvent<null>) => mixed,
+
   /**
    * If set to true it renders the image as original,
    * it defaults to being displayed as a template
    */
-    renderAsOriginal: PropTypes.bool,
+  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: PropTypes.bool,
-    /**
-     * React style object.
-     */
-    style: DeprecatedViewPropTypes.style,
+  selected?: ?boolean,
+
   /**
    * Text that appears under the icon. It is ignored when a system icon
    * is defined.
    */
-    title: PropTypes.string,
+  title?: ?string,
+
   /**
-     *(Apple TV only)* When set to true, this view will be focusable
+   * *(Apple TV only)* When set to true, this view will be focusable
    * and navigable using the Apple TV remote.
    *
    * @platform ios
    */
-    isTVSelectable: PropTypes.bool,
-  };
+  isTVSelectable?: ?boolean,
+|}>;
 
+type State = {|
+  hasBeenSelected: boolean,
+|};
+
+class TabBarItemIOS extends React.Component<Props, State> {
   state = {
     hasBeenSelected: false,
   };
@@ -103,7 +115,7 @@ class TabBarItemIOS extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: {selected?: boolean}) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.state.hasBeenSelected || nextProps.selected) {
       this.setState({hasBeenSelected: true});
     }