Revert D8342904: [StrictMode] Fix more forwardRef displayNames

Differential Revision:
D8342904

Original commit changeset: b6e53da7305d

fbshipit-source-id: abf5fa6ccb16058f20cbb569ecfc790fad017133

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -70,10 +70,12 @@ type Props = $ReadOnly<{|
  * See http://facebook.github.io/react-native/docs/activityindicator.html
  */
 const ActivityIndicator = (
-  props: Props,
-  forwardedRef: ?React.Ref<'RCTActivityIndicatorView'>,
+  props: $ReadOnly<{|
+    ...Props,
+    forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
+  |}>,
 ) => {
-  const {onLayout, style, ...restProps} = props;
+  const {onLayout, style, forwardedRef, ...restProps} = props;
   let sizeStyle;
 
   switch (props.size) {
@@ -97,19 +99,16 @@ const ActivityIndicator = (
   };
 
   return (
-    <View
-      onLayout={onLayout}
-      style={StyleSheet.compose(
-        styles.container,
-        style,
-      )}>
+    <View onLayout={onLayout} style={[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(ActivityIndicator);
+const ActivityIndicatorWithRef = React.forwardRef((props: Props, ref) => {
+  return <ActivityIndicator {...props} forwardedRef={ref} />;
+});
 
 ActivityIndicatorWithRef.defaultProps = {
   animating: true,
@@ -117,6 +116,7 @@ ActivityIndicatorWithRef.defaultProps = {
   hidesWhenStopped: true,
   size: 'small',
 };
+ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
   container: {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -4,60 +4,41 @@
  * 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 RCTAndroidProgressBar = requireNativeComponent('AndroidProgressBar');
+const STYLE_ATTRIBUTES = [
+  'Horizontal',
+  'Normal',
+  'Small',
+  'Large',
+  'Inverse',
+  'SmallInverse',
+  'LargeInverse',
+];
 
-import type {NativeComponent} from 'ReactNative';
-import type {ViewProps} from 'ViewPropTypes';
+const indeterminateType = function(props, propName, componentName, ...rest) {
+  const checker = function() {
+    const indeterminate = props[propName];
+    const styleAttr = props.styleAttr;
+    if (!indeterminate && styleAttr !== 'Horizontal') {
+      return new Error(
+        'indeterminate=false is only valid for styleAttr=Horizontal',
+      );
+    }
+  };
 
-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,
-|}>;
+  return PropTypes.bool(props, propName, componentName, ...rest) || checker();
+};
 
 /**
  * React component that wraps the Android-only `ProgressBar`. This component is
@@ -82,20 +63,59 @@ type Props = $ReadOnly<{|
  * },
  * ```
  */
-const ProgressBarAndroid = (
-  props: Props,
-  forwardedRef: ?React.Ref<'RCTAndroidProgressBar'>,
-) => {
-  return <RCTAndroidProgressBar {...props} ref={forwardedRef} />;
-};
-ProgressBarAndroid.displayName = 'ProgressBarAndroid'; // TODO(T30332650) remove bug workaround
+class ProgressBarAndroid extends React.Component {
+  static propTypes = {
+    ...ViewPropTypes,
 
-ProgressBarAndroid.defaultProps = {
+    /**
+     * Style of the ProgressBar. One of:
+     *
+     * - Horizontal
+     * - Normal (default)
+     * - Small
+     * - Large
+     * - 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 = {
     styleAttr: 'Normal',
     indeterminate: true,
     animating: true,
   };
-// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
-const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
 
-module.exports = (ProgressBarAndroidToExport: Class<NativeComponent<Props>>);
+  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,7 +239,6 @@ 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);
@@ -251,9 +250,19 @@ SliderWithRef.defaultProps = {
   maximumValue: 1,
   step: 0,
 };
+SliderWithRef.displayName = 'Slider';
 
-const styles = StyleSheet.create({
-  slider: Platform.OS === 'ios' ? {height: 40} : {},
+let styles;
+if (Platform.OS === 'ios') {
+  styles = StyleSheet.create({
+    slider: {
+      height: 40,
+    },
   });
+} else {
+  styles = StyleSheet.create({
+    slider: {},
+  });
+}
 
 module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);