ProgressViewIOS: Remove PropTypes and NativeMethodsMixin, convert to …

…functional component (#21588)

Summary:
This PR converts `ProgressViewIOS` from a `createReactClass` component to a functional component, and removes the remaining proptypes. Its use of `NativeMethodsMixin` has been ported to a `forwardRef` to the native component.
Pull Request resolved: #21588

Reviewed By: hramos

Differential Revision: D10338888

Pulled By: RSNara

fbshipit-source-id: c49807e97a0e2cf774971d9aa5a8426f15a3e48d

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -10,89 +10,78 @@
 
 'use strict';
 
-const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
-const Image = require('Image');
-const NativeMethodsMixin = require('NativeMethodsMixin');
-const PropTypes = require('prop-types');
 const React = require('React');
-const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 
 const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
+import type {NativeComponent} from 'ReactNative';
 import type {ImageSource} from 'ImageSource';
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 
-const RCTProgressView = requireNativeComponent('RCTProgressView');
-
 type Props = $ReadOnly<{|
   ...ViewProps,
+
+  /**
+   * The progress bar style.
+   */
   progressViewStyle?: ?('default' | 'bar'),
+
+  /**
+   * The progress value (between 0 and 1).
+   */
   progress?: ?number,
+
+  /**
+   * The tint color of the progress bar itself.
+   */
   progressTintColor?: ?ColorValue,
-  trackTintColor?: ?string,
+
+  /**
+   * The tint color of the progress bar track.
+   */
+  trackTintColor?: ?ColorValue,
+
+  /**
+   * A stretchable image to display as the progress bar.
+   */
   progressImage?: ?ImageSource,
+
+  /**
+   * A stretchable image to display behind the progress bar.
+   */
   trackImage?: ?ImageSource,
 |}>;
 
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+  'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-const ProgressViewIOS = createReactClass({
-  displayName: 'ProgressViewIOS',
-  mixins: [NativeMethodsMixin],
-
-  propTypes: {
-    ...DeprecatedViewPropTypes,
-    /**
-     * The progress bar style.
-     */
-    progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
-    /**
-     * The progress value (between 0 and 1).
-     */
-    progress: PropTypes.number,
-
-    /**
-     * The tint color of the progress bar itself.
-     */
-    progressTintColor: PropTypes.string,
-
-    /**
-     * The tint color of the progress bar track.
-     */
-    trackTintColor: PropTypes.string,
-
-    /**
-     * A stretchable image to display as the progress bar.
-     */
-    progressImage: Image.propTypes.source,
-
-    /**
-     * A stretchable image to display behind the progress bar.
-     */
-    trackImage: Image.propTypes.source,
-  },
-
-  render: function() {
-    return (
-      <RCTProgressView
-        {...this.props}
-        style={[styles.progressView, this.props.style]}
-      />
-    );
-  },
-});
+const ProgressViewIOS = (
+  props: Props,
+  forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+  <RCTProgressView
+    {...props}
+    style={[styles.progressView, props.style]}
+    ref={forwardedRef}
+  />
+);
 
 const styles = StyleSheet.create({
   progressView: {
     height: 2,
   },
 });
 
-module.exports = ((ProgressViewIOS: any): Class<
-  ReactNative.NativeComponent<Props>,
->);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
+
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);