Fix more forwardRef displayNames

Reviewed By: TheSavior

Differential Revision: D8342904

fbshipit-source-id: b6e53da7305d71635528a42e80910f4a9db0455c

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -70,12 +70,10 @@ type Props = $ReadOnly<{|
  * See http://facebook.github.io/react-native/docs/activityindicator.html
  */
 const ActivityIndicator = (
-  props: $ReadOnly<{|
+  props: Props,
-    ...Props,
+  forwardedRef: ?React.Ref<'RCTActivityIndicatorView'>,
-    forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
-  |}>,
 ) => {
-  const {onLayout, style, forwardedRef, ...restProps} = props;
+  const {onLayout, style, ...restProps} = props;
   let sizeStyle;
 
   switch (props.size) {
@@ -99,16 +97,19 @@ const ActivityIndicator = (
   };
 
   return (
-    <View onLayout={onLayout} style={[styles.container, style]}>
+    <View
+      onLayout={onLayout}
+      style={StyleSheet.compose(
+        styles.container,
+        style,
+      )}>
       <RCTActivityIndicator {...nativeProps} />
     </View>
   );
 };
-
+ActivityIndicator.displayName = 'ActivityIndicator'; // TODO(T30332650) remove workaround for hermes bug
 // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
-const ActivityIndicatorWithRef = React.forwardRef((props: Props, ref) => {
+const ActivityIndicatorWithRef = React.forwardRef(ActivityIndicator);
-  return <ActivityIndicator {...props} forwardedRef={ref} />;
-});
 
 ActivityIndicatorWithRef.defaultProps = {
   animating: true,
@@ -116,7 +117,6 @@ ActivityIndicatorWithRef.defaultProps = {
   hidesWhenStopped: true,
   size: 'small',
 };
-ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
   container: {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -4,41 +4,60 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow
  * @format
  */
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
-const PropTypes = require('prop-types');
 const React = require('React');
-const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-const STYLE_ATTRIBUTES = [
+const RCTAndroidProgressBar = requireNativeComponent('AndroidProgressBar');
-  'Horizontal',
-  'Normal',
-  'Small',
-  'Large',
-  'Inverse',
-  'SmallInverse',
-  'LargeInverse',
-];
 
-const indeterminateType = function(props, propName, componentName, ...rest) {
+import type {NativeComponent} from 'ReactNative';
-  const checker = function() {
+import type {ViewProps} from 'ViewPropTypes';
-    const indeterminate = props[propName];
-    const styleAttr = props.styleAttr;
-    if (!indeterminate && styleAttr !== 'Horizontal') {
-      return new Error(
-        'indeterminate=false is only valid for styleAttr=Horizontal',
-      );
-    }
-  };
 
-  return PropTypes.bool(props, propName, componentName, ...rest) || checker();
+type Props = $ReadOnly<{|
-};
+  ...ViewProps,
+
+  /**
+   * Style of the ProgressBar and whether it shows indeterminate progress (e.g. spinner).
+   *
+   * `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
+   * `progress` value.
+   */
+  ...
+    | {|
+        styleAttr: 'Horizontal',
+        indeterminate: false,
+        progress: number,
+      |}
+    | {|
+        typeAttr:
+          | 'Horizontal'
+          | 'Normal'
+          | 'Small'
+          | 'Large'
+          | 'Inverse'
+          | 'SmallInverse'
+          | 'LargeInverse',
+        indeterminate: true,
+      |},
+  /**
+   * Whether to show the ProgressBar (true, the default) or hide it (false).
+   */
+  animating?: ?boolean,
+  /**
+   * Color of the progress bar.
+   */
+  color?: ?string,
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+|}>;
 
 /**
  * React component that wraps the Android-only `ProgressBar`. This component is
@@ -63,59 +82,20 @@ const indeterminateType = function(props, propName, componentName, ...rest) {
  * },
  * ```
  */
-class ProgressBarAndroid extends React.Component {
+const ProgressBarAndroid = (
-  static propTypes = {
+  props: Props,
-    ...ViewPropTypes,
+  forwardedRef: ?React.Ref<'RCTAndroidProgressBar'>,
+) => {
+  return <RCTAndroidProgressBar {...props} ref={forwardedRef} />;
+};
+ProgressBarAndroid.displayName = 'ProgressBarAndroid'; // TODO(T30332650) remove bug workaround
 
-    /**
+ProgressBarAndroid.defaultProps = {
-     * Style of the ProgressBar. One of:
+  styleAttr: 'Normal',
-     *
+  indeterminate: true,
-     * - Horizontal
+  animating: true,
-     * - Normal (default)
+};
-     * - Small
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
-     * - Large
+const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
-     * - Inverse
-     * - SmallInverse
-     * - LargeInverse
-     */
-    styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
-    /**
-     * Whether to show the ProgressBar (true, the default) or hide it (false).
-     */
-    animating: PropTypes.bool,
-    /**
-     * If the progress bar will show indeterminate progress. Note that this
-     * can only be false if styleAttr is Horizontal.
-     */
-    indeterminate: indeterminateType,
-    /**
-     * The progress value (between 0 and 1).
-     */
-    progress: PropTypes.number,
-    /**
-     * Color of the progress bar.
-     */
-    color: ColorPropType,
-    /**
-     * Used to locate this view in end-to-end tests.
-     */
-    testID: PropTypes.string,
-  };
 
-  static defaultProps = {
+module.exports = (ProgressBarAndroidToExport: Class<NativeComponent<Props>>);
-    styleAttr: 'Normal',
-    indeterminate: true,
-    animating: true,
-  };
-
-  render() {
-    const {forwardedRef, ...props} = this.props;
-    return <AndroidProgressBar {...props} ref={forwardedRef} />;
-  }
-}
-
-const AndroidProgressBar = requireNativeComponent('AndroidProgressBar');
-
-module.exports = React.forwardRef((props, ref) => (
-  <ProgressBarAndroid {...props} forwardedRef={ref} />
-));

Libraries/Components/Slider/Slider.js

@@ -239,6 +239,7 @@ const Slider = (
     />
   );
 };
+Slider.displayName = 'Slider'; // TODO(T30332650) remove bug workaround
 
 // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
 const SliderWithRef = React.forwardRef(Slider);
@@ -250,19 +251,9 @@ SliderWithRef.defaultProps = {
   maximumValue: 1,
   step: 0,
 };
-SliderWithRef.displayName = 'Slider';
 
-let styles;
+const styles = StyleSheet.create({
-if (Platform.OS === 'ios') {
+  slider: Platform.OS === 'ios' ? {height: 40} : {},
-  styles = StyleSheet.create({
+});
-    slider: {
-      height: 40,
-    },
-  });
-} else {
-  styles = StyleSheet.create({
-    slider: {},
-  });
-}
 
 module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);