Files
react-native/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js
empyrical 93e6ae1c0a 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: https://github.com/facebook/react-native/pull/21588

Reviewed By: hramos

Differential Revision: D10338888

Pulled By: RSNara

fbshipit-source-id: c49807e97a0e2cf774971d9aa5a8426f15a3e48d
2018-10-12 13:49:39 -07:00

88 lines
1.9 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
const React = require('React');
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';
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,
/**
* 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 = (
props: Props,
forwardedRef?: ?React.Ref<typeof RCTProgressView>,
) => (
<RCTProgressView
{...props}
style={[styles.progressView, props.style]}
ref={forwardedRef}
/>
);
const styles = StyleSheet.create({
progressView: {
height: 2,
},
});
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);