diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js index f2a648797..fccb42983 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/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, - forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>, - |}>, + props: Props, + 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 ( - + ); }; - +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) => { - return ; -}); +const ActivityIndicatorWithRef = React.forwardRef(ActivityIndicator); ActivityIndicatorWithRef.defaultProps = { animating: true, @@ -116,7 +117,6 @@ ActivityIndicatorWithRef.defaultProps = { hidesWhenStopped: true, size: 'small', }; -ActivityIndicatorWithRef.displayName = 'ActivityIndicator'; const styles = StyleSheet.create({ container: { diff --git a/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js index 7ea083dd0..de3a0c704 100644 --- a/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js +++ b/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 = [ - 'Horizontal', - 'Normal', - 'Small', - 'Large', - 'Inverse', - 'SmallInverse', - 'LargeInverse', -]; +const RCTAndroidProgressBar = requireNativeComponent('AndroidProgressBar'); -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', - ); - } - }; +import type {NativeComponent} from 'ReactNative'; +import type {ViewProps} from 'ViewPropTypes'; - 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 { - static propTypes = { - ...ViewPropTypes, +const ProgressBarAndroid = ( + props: Props, + forwardedRef: ?React.Ref<'RCTAndroidProgressBar'>, +) => { + return ; +}; +ProgressBarAndroid.displayName = 'ProgressBarAndroid'; // TODO(T30332650) remove bug workaround - /** - * 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, - }; +ProgressBarAndroid.defaultProps = { + styleAttr: 'Normal', + indeterminate: true, + animating: true, +}; +// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. +const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid); - static defaultProps = { - styleAttr: 'Normal', - indeterminate: true, - animating: true, - }; - - render() { - const {forwardedRef, ...props} = this.props; - return ; - } -} - -const AndroidProgressBar = requireNativeComponent('AndroidProgressBar'); - -module.exports = React.forwardRef((props, ref) => ( - -)); +module.exports = (ProgressBarAndroidToExport: Class>); diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index d9efe0170..17bd7cef9 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/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; -if (Platform.OS === 'ios') { - styles = StyleSheet.create({ - slider: { - height: 40, - }, - }); -} else { - styles = StyleSheet.create({ - slider: {}, - }); -} +const styles = StyleSheet.create({ + slider: Platform.OS === 'ios' ? {height: 40} : {}, +}); module.exports = (SliderWithRef: Class>);