TabBarIOS: Remove PropTypes (#21315)

Summary:
Part of: react-native-community/discussions-and-proposals#29

This PR removes the prop types from the TabBarIOS files, and cleans up their flow types.
Pull Request resolved: #21315

Reviewed By: TheSavior

Differential Revision: D10031191

Pulled By: rsnara

fbshipit-source-id: 50dc26b858ea5b065a3934080af7e6b0e36c7f46

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -10,77 +10,67 @@
 
 '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,
+
+  /**
+   * Color of text on unselected tabs
+   */
+  unselectedTintColor?: ColorValue,
+
+  /**
+   * Color of the currently selected tab icon
+   */
+  tintColor?: ColorValue,
+
+  /**
+   * Color of unselected tab icons. Available since iOS 10.
+   */
+  unselectedItemTintColor?: ColorValue,
+
+  /**
+   * Background color of the tab bar
+   */
+  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?: ?('default' | 'black'),
+
+  /**
+   * A Boolean value that indicates whether the tab bar is translucent
+   */
+  translucent?: ?boolean,
+
+  /**
+   * Specifies tab bar item positioning. Available values are:
+   * - fill - distributes items across the entire width of the tab bar
+   * - center - centers item in the available tab bar space
+   * - auto (default) - distributes items dynamically according to the
+   * user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
+   * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
+   * it defaults to center.
+   */
+  itemPositioning?: ?('fill' | 'center' | 'auto'),
 |}>;
 
 class TabBarIOS extends React.Component<Props> {
   static Item = TabBarItemIOS;
 
-  static propTypes = {
-    ...DeprecatedViewPropTypes,
-    style: DeprecatedViewPropTypes.style,
-    /**
-     * Color of text on unselected tabs
-     */
-    unselectedTintColor: ColorPropType,
-    /**
-     * Color of the currently selected tab icon
-     */
-    tintColor: ColorPropType,
-    /**
-     * Color of unselected tab icons. Available since iOS 10.
-     */
-    unselectedItemTintColor: ColorPropType,
-    /**
-     * Background color of the tab bar
-     */
-    barTintColor: ColorPropType,
-    /**
-     * 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']),
-    /**
-     * A Boolean value that indicates whether the tab bar is translucent
-     */
-    translucent: PropTypes.bool,
-    /**
-     * Specifies tab bar item positioning. Available values are:
-     * - fill - distributes items across the entire width of the tab bar
-     * - center - centers item in the available tab bar space
-     * - auto (default) - distributes items dynamically according to the
-     * user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
-     * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
-     * it defaults to center.
-     */
-    itemPositioning: PropTypes.oneOf(['fill', 'center', 'auto']),
-  };
-
   render() {
     return (
       <RCTTabBar

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -10,89 +10,101 @@
 
 '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');
 const View = require('View');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-class TabBarItemIOS extends React.Component {
-  static propTypes = {
-    ...DeprecatedViewPropTypes,
-    /**
-     * Little red bubble that sits at the top right of the icon.
-     */
-    badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * Background color for the badge. Available since iOS 10.
-     */
-    badgeColor: ColorPropType,
-    /**
-     * 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',
-    ]),
-    /**
-     * A custom icon for the tab. It is ignored when a system icon is defined.
-     */
-    icon: Image.propTypes.source,
-    /**
-     * 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,
-    /**
-     * Callback when this tab is being selected, you should change the state of your
-     * component to set selected={true}.
-     */
-    onPress: PropTypes.func,
-    /**
-     * If set to true it renders the image as original,
-     * it defaults to being displayed as a template
-     */
-    renderAsOriginal: PropTypes.bool,
-    /**
-     * 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,
-    /**
-     * Text that appears under the icon. It is ignored when a system icon
-     * is defined.
-     */
-    title: PropTypes.string,
-    /**
-     *(Apple TV only)* When set to true, this view will be focusable
-     * and navigable using the Apple TV remote.
-     *
-     * @platform ios
-     */
-    isTVSelectable: PropTypes.bool,
-  };
+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?: ?(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: SyntheticEvent<null>) => 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 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});
     }