diff --git a/.flowconfig b/.flowconfig index aa31aad50e1813..70641207371e86 100644 --- a/.flowconfig +++ b/.flowconfig @@ -42,14 +42,16 @@ module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|we suppress_type=$FlowIssue suppress_type=$FlowFixMe +suppress_type=$FlowFixMeProps +suppress_type=$FlowFixMeState suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-2]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-2]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError unsafe.enable_getters_and_setters=true [version] -^0.52.0 +^0.53.0 diff --git a/IntegrationTests/AccessibilityManagerTest.js b/IntegrationTests/AccessibilityManagerTest.js index 8f82374baa18e6..dfa9e9a19f289d 100644 --- a/IntegrationTests/AccessibilityManagerTest.js +++ b/IntegrationTests/AccessibilityManagerTest.js @@ -21,7 +21,7 @@ const { } = ReactNative.NativeModules; -class AccessibilityManagerTest extends React.Component { +class AccessibilityManagerTest extends React.Component<{}> { componentDidMount() { AccessibilityManager.setAccessibilityContentSizeMultipliers({ 'extraSmall': 1.0, @@ -42,7 +42,7 @@ class AccessibilityManagerTest extends React.Component { }); } - render(): React.Element { + render(): React.Node { return ; } } diff --git a/IntegrationTests/AppEventsTest.js b/IntegrationTests/AppEventsTest.js index 95f5026bb3d397..62299ec337858d 100644 --- a/IntegrationTests/AppEventsTest.js +++ b/IntegrationTests/AppEventsTest.js @@ -32,7 +32,7 @@ type State = { elapsed?: string, }; -class AppEventsTest extends React.Component { +class AppEventsTest extends React.Component<{}, State> { state: State = {sent: 'none', received: 'none'}; componentDidMount() { diff --git a/IntegrationTests/AsyncStorageTest.js b/IntegrationTests/AsyncStorageTest.js index d87517c37388f1..31df5026bef187 100644 --- a/IntegrationTests/AsyncStorageTest.js +++ b/IntegrationTests/AsyncStorageTest.js @@ -168,7 +168,7 @@ function testOptimizedMultiGet() { } -class AsyncStorageTest extends React.Component { +class AsyncStorageTest extends React.Component<{}, $FlowFixMeState> { state = { messages: 'Initializing...', done: false, diff --git a/IntegrationTests/ImageCachePolicyTest.js b/IntegrationTests/ImageCachePolicyTest.js index 3b3cb7222f9c43..4d621dfc546c34 100644 --- a/IntegrationTests/ImageCachePolicyTest.js +++ b/IntegrationTests/ImageCachePolicyTest.js @@ -41,7 +41,7 @@ type State = { 'force-cache'?: boolean, } -class ImageCachePolicyTest extends React.Component { +class ImageCachePolicyTest extends React.Component { state = {} shouldComponentUpdate(nextProps: Props, nextState: State) { diff --git a/IntegrationTests/ImageSnapshotTest.js b/IntegrationTests/ImageSnapshotTest.js index a861b3b92507b0..ccb232796927ca 100644 --- a/IntegrationTests/ImageSnapshotTest.js +++ b/IntegrationTests/ImageSnapshotTest.js @@ -19,7 +19,7 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -class ImageSnapshotTest extends React.Component { +class ImageSnapshotTest extends React.Component<{}> { componentDidMount() { if (!TestModule.verifySnapshot) { throw new Error('TestModule.verifySnapshot not defined.'); diff --git a/IntegrationTests/IntegrationTestHarnessTest.js b/IntegrationTests/IntegrationTestHarnessTest.js index 5d01dc38024490..1b5895f9ef3504 100644 --- a/IntegrationTests/IntegrationTestHarnessTest.js +++ b/IntegrationTests/IntegrationTestHarnessTest.js @@ -21,12 +21,10 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -class IntegrationTestHarnessTest extends React.Component { - props: { - shouldThrow?: boolean, - waitOneFrame?: boolean, - }; - +class IntegrationTestHarnessTest extends React.Component<{ + shouldThrow?: boolean, + waitOneFrame?: boolean, +}, $FlowFixMeState> { static propTypes = { shouldThrow: PropTypes.bool, waitOneFrame: PropTypes.bool, diff --git a/IntegrationTests/IntegrationTestsApp.js b/IntegrationTests/IntegrationTestsApp.js index e371b9c819f88c..9e053942122f79 100644 --- a/IntegrationTests/IntegrationTestsApp.js +++ b/IntegrationTests/IntegrationTestsApp.js @@ -48,7 +48,7 @@ require('LoggingTestModule'); type Test = any; -class IntegrationTestsApp extends React.Component { +class IntegrationTestsApp extends React.Component<{}, $FlowFixMeState> { state = { test: (null: ?Test), }; @@ -57,6 +57,10 @@ class IntegrationTestsApp extends React.Component { if (this.state.test) { return ( + {/* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */} ); diff --git a/IntegrationTests/PromiseTest.js b/IntegrationTests/PromiseTest.js index d19d8413e823d2..9cf8651e3a3511 100644 --- a/IntegrationTests/PromiseTest.js +++ b/IntegrationTests/PromiseTest.js @@ -16,7 +16,7 @@ var ReactNative = require('react-native'); var { View } = ReactNative; var { TestModule } = ReactNative.NativeModules; -class PromiseTest extends React.Component { +class PromiseTest extends React.Component<{}> { shouldResolve = false; shouldReject = false; shouldSucceedAsync = false; @@ -66,7 +66,7 @@ class PromiseTest extends React.Component { } }; - render(): React.Element { + render(): React.Node { return ; } } diff --git a/IntegrationTests/SimpleSnapshotTest.js b/IntegrationTests/SimpleSnapshotTest.js index 787c1bfa32e071..70158b63fd12f2 100644 --- a/IntegrationTests/SimpleSnapshotTest.js +++ b/IntegrationTests/SimpleSnapshotTest.js @@ -21,7 +21,7 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -class SimpleSnapshotTest extends React.Component { +class SimpleSnapshotTest extends React.Component<{}> { componentDidMount() { if (!TestModule.verifySnapshot) { throw new Error('TestModule.verifySnapshot not defined.'); diff --git a/IntegrationTests/SyncMethodTest.js b/IntegrationTests/SyncMethodTest.js index b07c8ab17cb90f..76bb70a81f41d7 100644 --- a/IntegrationTests/SyncMethodTest.js +++ b/IntegrationTests/SyncMethodTest.js @@ -21,7 +21,7 @@ const { } = ReactNative.NativeModules; -class SyncMethodTest extends React.Component { +class SyncMethodTest extends React.Component<{}> { componentDidMount() { if (RNTesterTestModule.echoString('test string value') !== 'test string value') { throw new Error('Something wrong with sync method export'); @@ -32,7 +32,7 @@ class SyncMethodTest extends React.Component { TestModule.markTestCompleted(); } - render(): React.Element { + render(): React.Node { return ; } } diff --git a/IntegrationTests/WebSocketTest.js b/IntegrationTests/WebSocketTest.js index 9472adfba052f2..78d00701b53683 100644 --- a/IntegrationTests/WebSocketTest.js +++ b/IntegrationTests/WebSocketTest.js @@ -42,7 +42,7 @@ type State = { testExpectedResponse: string; }; -class WebSocketTest extends React.Component { +class WebSocketTest extends React.Component<{}, State> { state: State = { url: DEFAULT_WS_URL, fetchStatus: null, @@ -158,7 +158,7 @@ class WebSocketTest extends React.Component { }); } - render(): React.Element { + render(): React.Node { return ; } } diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js index 7415c285add00d..2dcc01251d52dc 100644 --- a/Libraries/Animated/src/AnimatedImplementation.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -1753,7 +1753,7 @@ class AnimatedProps extends Animated { } function createAnimatedComponent(Component: any): any { - class AnimatedComponent extends React.Component { + class AnimatedComponent extends React.Component { _component: any; _prevComponent: any; _propsAnimated: AnimatedProps; diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index 6e50e3920a6e07..25d473f08209d6 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -48,17 +48,14 @@ const invariant = require('fbjs/lib/invariant'); * */ -class Button extends React.Component { - - props: { - title: string, - onPress: () => any, - color?: ?string, - accessibilityLabel?: ?string, - disabled?: ?boolean, - testID?: ?string, - }; - +class Button extends React.Component<{ + title: string, + onPress: () => any, + color?: ?string, + accessibilityLabel?: ?string, + disabled?: ?boolean, + testID?: ?string, +}> { static propTypes = { /** * Text to display inside the button diff --git a/Libraries/Components/MaskedView/MaskedViewIOS.ios.js b/Libraries/Components/MaskedView/MaskedViewIOS.ios.js index 3a91efc23fc991..e3af833a9fcddd 100644 --- a/Libraries/Components/MaskedView/MaskedViewIOS.ios.js +++ b/Libraries/Components/MaskedView/MaskedViewIOS.ios.js @@ -25,7 +25,7 @@ type Props = ViewProps & { * Should be a React element to be rendered and applied as the * mask for the child element. */ - maskElement: React.Element<*>, + maskElement: React.Element, }; /** @@ -64,9 +64,7 @@ type Props = ViewProps & { * transparent pixels block that content. * */ -class MaskedViewIOS extends React.Component { - props: Props; - +class MaskedViewIOS extends React.Component { static propTypes = { ...ViewPropTypes, maskElement: PropTypes.element.isRequired, diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js index b601e77214700b..344b0bf78eaea9 100644 --- a/Libraries/Components/Navigation/NavigatorIOS.ios.js +++ b/Libraries/Components/Navigation/NavigatorIOS.ios.js @@ -36,7 +36,7 @@ function getuid() { return __uid++; } -class NavigatorTransitionerIOS extends React.Component { +class NavigatorTransitionerIOS extends React.Component<$FlowFixMeProps> { requestSchedulingNavigation(cb) { RCTNavigatorManager.requestSchedulingJavaScriptNavigation( ReactNative.findNodeHandle(this), diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index 39b2cdfb815709..443622221b624d 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/Libraries/Components/Picker/Picker.js @@ -37,14 +37,12 @@ var MODE_DROPDOWN = 'dropdown'; /** * Individual selectable item in a Picker. */ -class PickerItem extends React.Component { - props: { - label: string, - value?: any, - color?: ColorPropType, - testID?: string, - }; - +class PickerItem extends React.Component<{ + label: string, + value?: any, + color?: ColorPropType, + testID?: string, +}> { static propTypes = { /** * Text to display for this item. @@ -82,18 +80,16 @@ class PickerItem extends React.Component { * * */ -class Picker extends React.Component { - props: { - style?: $FlowFixMe, - selectedValue?: any, - onValueChange?: Function, - enabled?: boolean, - mode?: 'dialog' | 'dropdown', - itemStyle?: $FlowFixMe, - prompt?: string, - testID?: string, - }; - +class Picker extends React.Component<{ + style?: $FlowFixMe, + selectedValue?: any, + onValueChange?: Function, + enabled?: boolean, + mode?: 'dialog' | 'dropdown', + itemStyle?: $FlowFixMe, + prompt?: string, + testID?: string, +}> { /** * On Android, display the options in a dialog. */ diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index a21463683dee47..bc5890657d1ee2 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -36,19 +36,15 @@ type Event = Object; /** * Not exposed as a public API - use instead. */ -class PickerAndroid extends React.Component { - props: { - style?: $FlowFixMe, - selectedValue?: any, - enabled?: boolean, - mode?: 'dialog' | 'dropdown', - onValueChange?: Function, - prompt?: string, - testID?: string, - }; - - state: *; - +class PickerAndroid extends React.Component<{ + style?: $FlowFixMe, + selectedValue?: any, + enabled?: boolean, + mode?: 'dialog' | 'dropdown', + onValueChange?: Function, + prompt?: string, + testID?: string, +}, *> { static propTypes = { ...ViewPropTypes, style: pickerStyleType, diff --git a/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js b/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js index e5cd5b83ab7147..cb02f672b17947 100644 --- a/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js +++ b/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js @@ -16,7 +16,7 @@ const requireNativeComponent = require('requireNativeComponent'); const RCTRefreshControl = requireNativeComponent('RCTRefreshControl'); -class RefreshControlMock extends React.Component { +class RefreshControlMock extends React.Component<{}> { static latestRef: ?RefreshControlMock; componentDidMount() { RefreshControlMock.latestRef = this; diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index fe17d0a61b936e..b5836fa63089da 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -742,6 +742,10 @@ const ScrollView = createReactClass({ const contentContainer = =0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ ref={this._setInnerViewRef} style={contentContainerStyle} removeClippedSubviews={ @@ -814,6 +818,10 @@ const ScrollView = createReactClass({ // On iOS the RefreshControl is a child of the ScrollView. // tvOS lacks native support for RefreshControl, so don't include it in that case return ( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ {Platform.isTVOS ? null : refreshControl} {contentContainer} @@ -829,6 +837,10 @@ const ScrollView = createReactClass({ return React.cloneElement( refreshControl, {style: props.style}, + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ {contentContainer} @@ -836,6 +848,10 @@ const ScrollView = createReactClass({ } } return ( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ {contentContainer} @@ -874,12 +890,12 @@ if (Platform.OS === 'android') { }; AndroidScrollView = requireNativeComponent( 'RCTScrollView', - (ScrollView: ReactClass), + (ScrollView: React.ComponentType), nativeOnlyProps ); AndroidHorizontalScrollView = requireNativeComponent( 'AndroidHorizontalScrollView', - (ScrollView: ReactClass), + (ScrollView: React.ComponentType), nativeOnlyProps ); } else if (Platform.OS === 'ios') { @@ -893,7 +909,7 @@ if (Platform.OS === 'android') { }; RCTScrollView = requireNativeComponent( 'RCTScrollView', - (ScrollView: ReactClass), + (ScrollView: React.ComponentType), nativeOnlyProps, ); // $FlowFixMe (bvaughn) Update ComponentInterface in ViewPropTypes to include a string type (for Fiber host components) in a follow-up. diff --git a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index b072a67c6bf0fb..e86f724baf3883 100644 --- a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -16,21 +16,18 @@ const React = require('React'); const StyleSheet = require('StyleSheet'); type Props = { - children?: React.Element<*>, + children?: React.Element, nextHeaderLayoutY: ?number, onLayout: (event: Object) => void, scrollAnimatedValue: Animated.Value, }; -class ScrollViewStickyHeader extends React.Component { - props: Props; - state: { - measured: boolean, - layoutY: number, - layoutHeight: number, - nextHeaderLayoutY: ?number, - }; - +class ScrollViewStickyHeader extends React.Component { constructor(props: Props, context: Object) { super(props, context); this.state = { diff --git a/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js b/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js index b8e77a80770675..2263234a7c5928 100644 --- a/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js +++ b/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js @@ -17,7 +17,7 @@ const requireNativeComponent = require('requireNativeComponent'); const RCTScrollView = requireNativeComponent('RCTScrollView'); -class ScrollViewMock extends React.Component { +class ScrollViewMock extends React.Component<$FlowFixMeProps> { render() { return ( diff --git a/Libraries/Components/StaticContainer.react.js b/Libraries/Components/StaticContainer.react.js index a29593ae49136b..ee19d7d4b84431 100644 --- a/Libraries/Components/StaticContainer.react.js +++ b/Libraries/Components/StaticContainer.react.js @@ -28,7 +28,7 @@ const React = require('React'); * Typically, you will not need to use this component and should opt for normal * React reconciliation. */ -class StaticContainer extends React.Component { +class StaticContainer extends React.Component { shouldComponentUpdate(nextProps: Object): boolean { return !!nextProps.shouldUpdate; diff --git a/Libraries/Components/StaticRenderer.js b/Libraries/Components/StaticRenderer.js index afea94ebc3fc12..380a556f937b67 100644 --- a/Libraries/Components/StaticRenderer.js +++ b/Libraries/Components/StaticRenderer.js @@ -15,12 +15,10 @@ var React = require('React'); var PropTypes = require('prop-types'); -class StaticRenderer extends React.Component { - props: { - shouldUpdate: boolean, - render: Function, - }; - +class StaticRenderer extends React.Component<{ + shouldUpdate: boolean, + render: Function, +}> { static propTypes = { shouldUpdate: PropTypes.bool.isRequired, render: PropTypes.func.isRequired, @@ -30,7 +28,7 @@ class StaticRenderer extends React.Component { return nextProps.shouldUpdate; } - render(): React.Element { + render(): React.Node { return this.props.render(); } } diff --git a/Libraries/Components/StatusBar/StatusBar.js b/Libraries/Components/StatusBar/StatusBar.js index e2988951a982d2..25cb941c8ecc4a 100644 --- a/Libraries/Components/StatusBar/StatusBar.js +++ b/Libraries/Components/StatusBar/StatusBar.js @@ -149,17 +149,15 @@ function createStackEntry(props: any): any { * * `currentHeight` (Android only) The height of the status bar. */ -class StatusBar extends React.Component { - props: { - hidden?: boolean, - animated?: boolean, - backgroundColor?: string, - translucent?: boolean, - barStyle?: 'default' | 'light-content' | 'dark-content', - networkActivityIndicatorVisible?: boolean, - showHideTransition?: 'fade' | 'slide', - }; - +class StatusBar extends React.Component<{ + hidden?: boolean, + animated?: boolean, + backgroundColor?: string, + translucent?: boolean, + barStyle?: 'default' | 'light-content' | 'dark-content', + networkActivityIndicatorVisible?: boolean, + showHideTransition?: 'fade' | 'slide', +}> { static _propsStack = []; static _defaultProps = createStackEntry({ @@ -410,7 +408,7 @@ class StatusBar extends React.Component { }); }; - render(): ?React.Element { + render(): React.Node { return null; } } diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index 319c65f073606a..3dd281316d416e 100644 --- a/Libraries/Components/Switch/Switch.js +++ b/Libraries/Components/Switch/Switch.js @@ -115,6 +115,10 @@ var Switch = createReactClass({ return ( =0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ ref={(ref) => { this._rctSwitch = ref; }} onChange={this._onChange} /> diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.android.js b/Libraries/Components/TabBarIOS/TabBarIOS.android.js index d9efee3ff322b1..0c6465bb38af25 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.android.js +++ b/Libraries/Components/TabBarIOS/TabBarIOS.android.js @@ -17,7 +17,7 @@ const StyleSheet = require('StyleSheet'); const TabBarItemIOS = require('TabBarItemIOS'); const View = require('View'); -class DummyTabBarIOS extends React.Component { +class DummyTabBarIOS extends React.Component<$FlowFixMeProps> { static Item = TabBarItemIOS; render() { diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js index 10f0c028af8eaf..48a1ffa1c1c570 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +++ b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js @@ -20,17 +20,15 @@ const ViewPropTypes = require('ViewPropTypes'); var requireNativeComponent = require('requireNativeComponent'); -class TabBarIOS extends React.Component { - props: { - style?: $FlowFixMe, - unselectedTintColor?: $FlowFixMe, - tintColor?: $FlowFixMe, - unselectedItemTintColor?: $FlowFixMe, - barTintColor?: $FlowFixMe, - translucent?: boolean, - itemPositioning?: 'fill' | 'center' | 'auto', - }; - +class TabBarIOS extends React.Component<{ + style?: $FlowFixMe, + unselectedTintColor?: $FlowFixMe, + tintColor?: $FlowFixMe, + unselectedItemTintColor?: $FlowFixMe, + barTintColor?: $FlowFixMe, + translucent?: boolean, + itemPositioning?: 'fill' | 'center' | 'auto', +}> { static Item = TabBarItemIOS; // $FlowFixMe(>=0.41.0) diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 775c41e284eb2b..dac2b121a2a2d5 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -139,12 +139,36 @@ var TouchableBounce = createReactClass({ render: function(): React.Element { return ( =0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ style={[{transform: [{scale: this.state.scale}]}, this.props.style]} accessible={this.props.accessible !== false} + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ accessibilityLabel={this.props.accessibilityLabel} + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ accessibilityComponentType={this.props.accessibilityComponentType} + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ accessibilityTraits={this.props.accessibilityTraits} + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ nativeID={this.props.nativeID} + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ testID={this.props.testID} hitSlop={this.props.hitSlop} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} diff --git a/Libraries/Components/UnimplementedViews/UnimplementedView.js b/Libraries/Components/UnimplementedViews/UnimplementedView.js index ace85ac7fae4aa..15568f4b7d08e1 100644 --- a/Libraries/Components/UnimplementedViews/UnimplementedView.js +++ b/Libraries/Components/UnimplementedViews/UnimplementedView.js @@ -19,7 +19,7 @@ const StyleSheet = require('StyleSheet'); * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner * View component and renders its children. */ -class UnimplementedView extends React.Component { +class UnimplementedView extends React.Component<$FlowFixMeProps> { setNativeProps() { // Do nothing. // This method is required in order to use this view as a Touchable* child. diff --git a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js index 084b40f2fc5ca8..3d267bf4a699b4 100644 --- a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js +++ b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js @@ -68,18 +68,16 @@ export type ViewPagerScrollState = $Enum<{ * } * ``` */ -class ViewPagerAndroid extends React.Component { - props: { - initialPage?: number, - onPageScroll?: Function, - onPageScrollStateChanged?: Function, - onPageSelected?: Function, - pageMargin?: number, - peekEnabled?: boolean, - keyboardDismissMode?: 'none' | 'on-drag', - scrollEnabled?: boolean, - }; - +class ViewPagerAndroid extends React.Component<{ + initialPage?: number, + onPageScroll?: Function, + onPageScrollStateChanged?: Function, + onPageSelected?: Function, + pageMargin?: number, + peekEnabled?: boolean, + keyboardDismissMode?: 'none' | 'on-drag', + scrollEnabled?: boolean, +}> { static propTypes = { ...ViewPropTypes, /** diff --git a/Libraries/Experimental/Incremental.js b/Libraries/Experimental/Incremental.js index 82682cbf7fe81d..ec08ea97d08a23 100644 --- a/Libraries/Experimental/Incremental.js +++ b/Libraries/Experimental/Incremental.js @@ -99,7 +99,7 @@ type DefaultProps = { type State = { doIncrementalRender: boolean, }; -class Incremental extends React.Component { +class Incremental extends React.Component { props: Props; state: State; context: Context; @@ -154,7 +154,7 @@ class Incremental extends React.Component { }).done(); } - render(): ?React.Element { + render(): React.Node { if (this._rendered || // Make sure that once we render once, we stay rendered even if incrementalGroupEnabled gets flipped. !this.context.incrementalGroupEnabled || this.state.doIncrementalRender) { diff --git a/Libraries/Experimental/IncrementalExample.js b/Libraries/Experimental/IncrementalExample.js index 721f2b9d3842c3..bdfb3d189dd320 100644 --- a/Libraries/Experimental/IncrementalExample.js +++ b/Libraries/Experimental/IncrementalExample.js @@ -35,8 +35,7 @@ JSEventLoopWatchdog.install({thresholdMS: 200}); let totalWidgets = 0; -class SlowWidget extends React.Component { - state: {ctorTimestamp: number, timeToMount: number}; +class SlowWidget extends React.Component<$FlowFixMeProps, {ctorTimestamp: number, timeToMount: number}> { constructor(props, context) { super(props, context); this.state = { @@ -89,11 +88,10 @@ function Block(props: Object) { const Row = (props: Object) => ; -class IncrementalExample extends React.Component { +class IncrementalExample extends React.Component { static title = ''; static description = 'Enables incremental rendering of complex components.'; start: number; - state: {stats: ?Object}; constructor(props: mixed, context: mixed) { super(props, context); this.start = performanceNow(); @@ -116,7 +114,7 @@ class IncrementalExample extends React.Component { console.log('onDone:', stats); }, 0); } - render(): React.Element { + render(): React.Node { return ( { context: Context; _groupInc: string; componentWillMount() { @@ -67,7 +66,7 @@ class IncrementalGroup extends React.Component { }; } - render(): React.Element { + render(): React.Node { return ( { context: Context; _isDone: boolean; diff --git a/Libraries/Experimental/SwipeableRow/SwipeableListView.js b/Libraries/Experimental/SwipeableRow/SwipeableListView.js index e542f2f8459b43..fc365f5979d94d 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableListView.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableListView.js @@ -53,7 +53,7 @@ type State = { * - It can bounce the 1st row of the list so users know it's swipeable * - More to come */ -class SwipeableListView extends React.Component { +class SwipeableListView extends React.Component { props: Props; state: State; @@ -113,7 +113,7 @@ class SwipeableListView extends React.Component { } } - render(): React.Element { + render(): React.Node { return ( /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an * error found when Flow v0.53 was deployed. To see the error delete this @@ -121,6 +121,10 @@ class SwipeableListView extends React.Component { { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._listViewRef = ref; }} dataSource={this.state.dataSource.getDataSource()} diff --git a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js index afab08319df7ad..59cccbe3d85869 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js @@ -26,18 +26,16 @@ import type {ImageSource} from 'ImageSource'; * with SwipeableListView. Each button takes an image and text with optional * formatting. */ -class SwipeableQuickActionButton extends React.Component { - props: { - accessibilityLabel?: string, - imageSource: ImageSource | number, - imageStyle?: ?ViewPropTypes.style, - onPress?: Function, - style?: ?ViewPropTypes.style, - testID?: string, - text?: ?(string | Object | Array), - textStyle?: ?ViewPropTypes.style, - }; - +class SwipeableQuickActionButton extends React.Component<{ + accessibilityLabel?: string, + imageSource: ImageSource | number, + imageStyle?: ?ViewPropTypes.style, + onPress?: Function, + style?: ?ViewPropTypes.style, + testID?: string, + text?: ?(string | Object | Array), + textStyle?: ?ViewPropTypes.style, +}> { static propTypes = { accessibilityLabel: PropTypes.string, imageSource: Image.propTypes.source.isRequired, @@ -49,7 +47,7 @@ class SwipeableQuickActionButton extends React.Component { textStyle: Text.propTypes.style, }; - render(): ?React.Element { + render(): React.Node { if (!this.props.imageSource && !this.props.text) { return null; } diff --git a/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js b/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js index 48b90cea4c4996..c5e53d55e80db4 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js @@ -27,14 +27,12 @@ const ViewPropTypes = require('ViewPropTypes'); * * */ -class SwipeableQuickActions extends React.Component { - props: {style?: $FlowFixMe}; - +class SwipeableQuickActions extends React.Component<{style?: $FlowFixMe}> { static propTypes = { style: ViewPropTypes.style, }; - render(): React.Element { + render(): React.Node { // $FlowFixMe found when converting React.createClass to ES6 const children = this.props.children; let buttons = []; diff --git a/Libraries/Experimental/WindowedListView.js b/Libraries/Experimental/WindowedListView.js index db6840186f669a..2fb8a042d1bae7 100644 --- a/Libraries/Experimental/WindowedListView.js +++ b/Libraries/Experimental/WindowedListView.js @@ -150,9 +150,7 @@ type State = { firstRow: number, lastRow: number, }; -class WindowedListView extends React.Component { - props: Props; - state: State; +class WindowedListView extends React.Component { /** * Recomputing which rows to render is batched up and run asynchronously to avoid wastful updates, * e.g. from multiple layout updates in rapid succession. @@ -423,7 +421,7 @@ class WindowedListView extends React.Component { this._firstVisible = newFirstVisible; this._lastVisible = newLastVisible; } - render(): React.Element { + render(): React.Node { const {firstRow} = this.state; const lastRow = clamp(0, this.state.lastRow, this.props.data.length - 1); const rowFrames = this._rowFrames; @@ -613,8 +611,7 @@ type CellProps = { */ onWillUnmount: (rowKey: string) => void, }; -class CellRenderer extends React.Component { - props: CellProps; +class CellRenderer extends React.Component { _containerRef: NativeMethodsMixinType; _offscreenRenderDone = false; _timeout = 0; @@ -700,6 +697,10 @@ class CellRenderer extends React.Component { return newProps.rowData !== this.props.rowData; } _setRef = (ref) => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._containerRef = ref; }; render() { diff --git a/Libraries/Image/ImageBackground.js b/Libraries/Image/ImageBackground.js index 0b10cf17f05fa4..a6c5302300e642 100644 --- a/Libraries/Image/ImageBackground.js +++ b/Libraries/Image/ImageBackground.js @@ -45,7 +45,7 @@ import type {NativeMethodsMixinType} from 'ReactNativeTypes'; * AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground); * ``` */ -class ImageBackground extends React.Component { +class ImageBackground extends React.Component<$FlowFixMeProps> { setNativeProps(props: Object) { // Work-around flow const viewRef = this._viewRef; @@ -58,6 +58,10 @@ class ImageBackground extends React.Component { _viewRef: ?NativeMethodsMixinType = null; _captureRef = ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._viewRef = ref; }; diff --git a/Libraries/Inspector/BorderBox.js b/Libraries/Inspector/BorderBox.js index caee8ccd6b3334..782c7c2e02bf6c 100644 --- a/Libraries/Inspector/BorderBox.js +++ b/Libraries/Inspector/BorderBox.js @@ -14,7 +14,7 @@ var React = require('React'); var View = require('View'); -class BorderBox extends React.Component { +class BorderBox extends React.Component<$FlowFixMeProps> { render() { var box = this.props.box; if (!box) { diff --git a/Libraries/Inspector/BoxInspector.js b/Libraries/Inspector/BoxInspector.js index 1f9306f1d1084c..2b4c2786cc870e 100644 --- a/Libraries/Inspector/BoxInspector.js +++ b/Libraries/Inspector/BoxInspector.js @@ -24,7 +24,7 @@ var blank = { bottom: 0, }; -class BoxInspector extends React.Component { +class BoxInspector extends React.Component<$FlowFixMeProps> { render() { var frame = this.props.frame; var style = this.props.style; @@ -47,15 +47,14 @@ class BoxInspector extends React.Component { } } -class BoxContainer extends React.Component { +class BoxContainer extends React.Component<$FlowFixMeProps> { render() { var box = this.props.box; return ( - {/* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses - * an error found when Flow v0.53 was deployed. To see the error - * delete this comment and run Flow. */} + { + } {this.props.title} {box.top} diff --git a/Libraries/Inspector/ElementBox.js b/Libraries/Inspector/ElementBox.js index a3851001c2ee45..db4f7b8f0da818 100644 --- a/Libraries/Inspector/ElementBox.js +++ b/Libraries/Inspector/ElementBox.js @@ -19,7 +19,7 @@ var resolveBoxStyle = require('resolveBoxStyle'); var flattenStyle = require('flattenStyle'); -class ElementBox extends React.Component { +class ElementBox extends React.Component<$FlowFixMeProps> { render() { var style = flattenStyle(this.props.style) || {}; var margin = resolveBoxStyle('margin', style); diff --git a/Libraries/Inspector/ElementProperties.js b/Libraries/Inspector/ElementProperties.js index ac1e1ae4f804ea..1aaaf65127e630 100644 --- a/Libraries/Inspector/ElementProperties.js +++ b/Libraries/Inspector/ElementProperties.js @@ -25,16 +25,14 @@ const flattenStyle = require('flattenStyle'); const mapWithSeparator = require('mapWithSeparator'); const openFileInEditor = require('openFileInEditor'); -class ElementProperties extends React.Component { - props: { - hierarchy: Array<$FlowFixMe>, - style?: Object | Array<$FlowFixMe> | number, - source?: { - fileName?: string, - lineNumber?: number, - }, - }; - +class ElementProperties extends React.Component<{ + hierarchy: Array<$FlowFixMe>, + style?: Object | Array<$FlowFixMe> | number, + source?: { + fileName?: string, + lineNumber?: number, + }, +}> { static propTypes = { hierarchy: PropTypes.array.isRequired, style: PropTypes.oneOfType([ diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js index fd19cd8d311552..1667181268d3ff 100644 --- a/Libraries/Inspector/Inspector.js +++ b/Libraries/Inspector/Inspector.js @@ -44,24 +44,20 @@ function findRenderer(): ReactRenderer { return renderers[keys[0]]; } -class Inspector extends React.Component { - props: { - inspectedViewTag: ?number, - onRequestRerenderApp: (callback: (tag: ?number) => void) => void - }; - - state: { - devtoolsAgent: ?Object, - hierarchy: any, - panelPos: string, - inspecting: bool, - selection: ?number, - perfing: bool, - inspected: any, - inspectedViewTag: any, - networking: bool, - }; - +class Inspector extends React.Component<{ + inspectedViewTag: ?number, + onRequestRerenderApp: (callback: (tag: ?number) => void) => void +}, { + devtoolsAgent: ?Object, + hierarchy: any, + panelPos: string, + inspecting: bool, + selection: ?number, + perfing: bool, + inspected: any, + inspectedViewTag: any, + networking: bool, +}> { _subs: ?Array<() => void>; constructor(props: Object) { diff --git a/Libraries/Inspector/InspectorOverlay.js b/Libraries/Inspector/InspectorOverlay.js index 1364000abf22a2..716c0e1a7d62b2 100644 --- a/Libraries/Inspector/InspectorOverlay.js +++ b/Libraries/Inspector/InspectorOverlay.js @@ -23,16 +23,14 @@ type EventLike = { nativeEvent: Object, }; -class InspectorOverlay extends React.Component { - props: { - inspected?: { - frame?: Object, - style?: any, - }, - inspectedViewTag?: number, - onTouchViewTag: (tag: number, frame: Object, pointerY: number) => void, - }; - +class InspectorOverlay extends React.Component<{ + inspected?: { + frame?: Object, + style?: any, + }, + inspectedViewTag?: number, + onTouchViewTag: (tag: number, frame: Object, pointerY: number) => void, +}> { static propTypes = { inspected: PropTypes.shape({ frame: PropTypes.object, diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js index d2a4c3dbd8d927..b7b6f61eb3e621 100644 --- a/Libraries/Inspector/InspectorPanel.js +++ b/Libraries/Inspector/InspectorPanel.js @@ -22,7 +22,7 @@ const Text = require('Text'); const TouchableHighlight = require('TouchableHighlight'); const View = require('View'); -class InspectorPanel extends React.Component { +class InspectorPanel extends React.Component<$FlowFixMeProps> { renderWaiting() { if (this.props.inspecting) { return ( @@ -104,7 +104,7 @@ InspectorPanel.propTypes = { setNetworking: PropTypes.func, }; -class Button extends React.Component { +class Button extends React.Component<$FlowFixMeProps> { render() { return ( this.props.onClick(!this.props.pressed)} style={[ diff --git a/Libraries/Inspector/NetworkOverlay.js b/Libraries/Inspector/NetworkOverlay.js index 70a50b6785fd90..db0216a0059e82 100644 --- a/Libraries/Inspector/NetworkOverlay.js +++ b/Libraries/Inspector/NetworkOverlay.js @@ -50,7 +50,11 @@ type NetworkRequestInfo = { /** * Show all the intercepted network requests over the InspectorPanel. */ -class NetworkOverlay extends React.Component { +class NetworkOverlay extends React.Component { _requests: Array; _listViewDataSource: ListView.DataSource; _listView: ?ListView; @@ -73,12 +77,6 @@ class NetworkOverlay extends React.Component { // Map of `xhr._index` -> `index in `_requests``. _xhrIdMap: {[key: number]: number}; - state: { - dataSource: ListView.DataSource, - newDetailInfo: bool, - detailRowID: ?number, - }; - constructor(props: Object) { super(props); this._requests = []; diff --git a/Libraries/Inspector/PerformanceOverlay.js b/Libraries/Inspector/PerformanceOverlay.js index 9eb51a380c91d5..c6c6f1c023e1eb 100644 --- a/Libraries/Inspector/PerformanceOverlay.js +++ b/Libraries/Inspector/PerformanceOverlay.js @@ -17,7 +17,7 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -class PerformanceOverlay extends React.Component { +class PerformanceOverlay extends React.Component<{}> { render() { var perfLogs = PerformanceLogger.getTimespans(); var items = []; diff --git a/Libraries/Inspector/StyleInspector.js b/Libraries/Inspector/StyleInspector.js index 96db90e8a0763d..192d7b93fc4e77 100644 --- a/Libraries/Inspector/StyleInspector.js +++ b/Libraries/Inspector/StyleInspector.js @@ -16,7 +16,7 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -class StyleInspector extends React.Component { +class StyleInspector extends React.Component<$FlowFixMeProps> { render() { if (!this.props.style) { return No style; diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 9cc85f24ec966a..b35a2f418480c1 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -72,22 +72,22 @@ type OptionalProps = { * which will update the `highlighted` prop, but you can also add custom props with * `separators.updateProps`. */ - ItemSeparatorComponent?: ?ReactClass, + ItemSeparatorComponent?: ?React.ComponentType, /** * Rendered when the list is empty. Can be a React Component Class, a render function, or * a rendered element. */ - ListEmptyComponent?: ?(ReactClass | React.Element), + ListEmptyComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListFooterComponent?: ?(ReactClass | React.Element), + ListFooterComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the top of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListHeaderComponent?: ?(ReactClass | React.Element), + ListHeaderComponent?: ?(React.ComponentType | React.Element), /** * Optional custom style for multi-item rows generated when numColumns > 1. */ @@ -306,11 +306,7 @@ type DefaultProps = typeof defaultProps; * * Also inherets [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation. */ -class FlatList extends React.PureComponent< - DefaultProps, - Props, - void, -> { +class FlatList extends React.PureComponent, void> { static defaultProps: DefaultProps = defaultProps; props: Props; /** @@ -416,6 +412,10 @@ class FlatList extends React.PureComponent< _listRef: VirtualizedList; _captureRef = ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._listRef = ref; }; diff --git a/Libraries/Lists/ListView/__mocks__/ListViewMock.js b/Libraries/Lists/ListView/__mocks__/ListViewMock.js index 405dc517d29a50..2c27303d7e7294 100644 --- a/Libraries/Lists/ListView/__mocks__/ListViewMock.js +++ b/Libraries/Lists/ListView/__mocks__/ListViewMock.js @@ -16,7 +16,7 @@ const React = require('React'); const ScrollView = require('ScrollView'); const StaticRenderer = require('StaticRenderer'); -class ListViewMock extends React.Component { +class ListViewMock extends React.Component<$FlowFixMeProps> { static latestRef: ?ListViewMock; static defaultProps = { renderScrollComponent: props => , diff --git a/Libraries/Lists/MetroListView.js b/Libraries/Lists/MetroListView.js index ff6afeb0349c20..cb7e57bacf445b 100644 --- a/Libraries/Lists/MetroListView.js +++ b/Libraries/Lists/MetroListView.js @@ -22,13 +22,13 @@ const invariant = require('fbjs/lib/invariant'); type Item = any; type NormalProps = { - FooterComponent?: ReactClass<*>, - renderItem: (info: Object) => ?React.Element<*>, + FooterComponent?: React.ComponentType<*>, + renderItem: (info: Object) => ?React.Element, /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an error * found when Flow v0.53 was deployed. To see the error delete this comment * and run Flow. */ - renderSectionHeader?: ({section: Object}) => ?React.Element<*>, - SeparatorComponent?: ?ReactClass<*>, // not supported yet + renderSectionHeader?: ({section: Object}) => ?React.Element, + SeparatorComponent?: ?React.ComponentType<*>, // not supported yet // Provide either `items` or `sections` items?: ?Array, // By default, an Item is assumed to be {key: string} @@ -61,8 +61,7 @@ type Props = NormalProps & DefaultProps; * some section support tacked on. It is recommended to just use FlatList directly, this component * is mostly for debugging and performance comparison. */ -class MetroListView extends React.Component { - props: Props; +class MetroListView extends React.Component { scrollToEnd(params?: ?{animated?: ?boolean}) { throw new Error('scrollToEnd not supported in legacy ListView.'); } @@ -162,6 +161,10 @@ class MetroListView extends React.Component { } _listRef: ListView; _captureRef = ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._listRef = ref; }; _computeState(props: Props, state) { @@ -186,6 +189,10 @@ class MetroListView extends React.Component { }; } } + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an error + * when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ _renderFooter = () => ; _renderRow = (item, sectionID, rowID, highlightRow) => { return this.props.renderItem({item, index: rowID}); @@ -199,6 +206,10 @@ class MetroListView extends React.Component { return renderSectionHeader({section}); }; _renderSeparator = (sID, rID) => + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ ; } diff --git a/Libraries/Lists/SectionList.js b/Libraries/Lists/SectionList.js index 69301fab145d5f..35a5e350699369 100644 --- a/Libraries/Lists/SectionList.js +++ b/Libraries/Lists/SectionList.js @@ -44,7 +44,7 @@ type SectionBase = { updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, }) => ?React.Element, - ItemSeparatorComponent?: ?ReactClass, + ItemSeparatorComponent?: ?React.ComponentType, keyExtractor?: (item: SectionItemT) => string, // TODO: support more optional/override props @@ -86,22 +86,22 @@ type OptionalProps> = { * `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also * add custom props with `separators.updateProps`. */ - ItemSeparatorComponent?: ?ReactClass, + ItemSeparatorComponent?: ?React.ComponentType, /** * Rendered at the very beginning of the list. Can be a React Component Class, a render function, or * a rendered element. */ - ListHeaderComponent?: ?(ReactClass | React.Element), + ListHeaderComponent?: ?(React.ComponentType | React.Element), /** * Rendered when the list is empty. Can be a React Component Class, a render function, or * a rendered element. */ - ListEmptyComponent?: ?(ReactClass | React.Element), + ListEmptyComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the very end of the list. Can be a React Component Class, a render function, or * a rendered element. */ - ListFooterComponent?: ?(ReactClass | React.Element), + ListFooterComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the top and bottom of each section (note this is different from * `ItemSeparatorComponent` which is only rendered between items). These are intended to separate @@ -109,7 +109,7 @@ type OptionalProps> = { * `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Separator]`, * and any custom props from `separators.updateProps`. */ - SectionSeparatorComponent?: ?ReactClass, + SectionSeparatorComponent?: ?React.ComponentType, /** * A marker property for telling the list to re-render (since it implements `PureComponent`). If * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the @@ -252,11 +252,7 @@ type DefaultProps = typeof defaultProps; * Alternatively, you can provide a custom `keyExtractor` prop. * */ -class SectionList> extends React.PureComponent< - DefaultProps, - Props, - void, -> { +class SectionList> extends React.PureComponent, void> { props: Props; static defaultProps: DefaultProps = defaultProps; @@ -333,6 +329,10 @@ class SectionList> extends React.PureComponent< _wrapperListRef: MetroListView | VirtualizedSectionList; _captureRef = ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._wrapperListRef = ref; }; } diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index 27c6f2c5f7771c..569520736114d7 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -98,22 +98,22 @@ type OptionalProps = { * Each cell is rendered using this element. Can be a React Component Class, * or a render function. Defaults to using View. */ - CellRendererComponent?: ?ReactClass, + CellRendererComponent?: ?React.ComponentType, /** * Rendered when the list is empty. Can be a React Component Class, a render function, or * a rendered element. */ - ListEmptyComponent?: ?(ReactClass | React.Element), + ListEmptyComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListFooterComponent?: ?(ReactClass | React.Element), + ListFooterComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the top of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListHeaderComponent?: ?(ReactClass | React.Element), + ListHeaderComponent?: ?(React.ComponentType | React.Element), /** * The maximum number of items to render in each incremental render batch. The more rendered at * once, the better the fill rate, but responsiveness my suffer because rendering content may @@ -206,7 +206,7 @@ type State = {first: number, last: number}; * Alternatively, you can provide a custom `keyExtractor` prop. * */ -class VirtualizedList extends React.PureComponent { +class VirtualizedList extends React.PureComponent { props: Props; // scrollToEnd may be janky without getItemLayout prop @@ -221,7 +221,15 @@ class VirtualizedList extends React.PureComponent { this._footerLength - this._scrollMetrics.visibleLength, ); + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._scrollRef.scrollTo( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this.props.horizontal ? {x: offset, animated} : {y: offset, animated}, ); } @@ -252,7 +260,15 @@ class VirtualizedList extends React.PureComponent { (viewPosition || 0) * (this._scrollMetrics.visibleLength - frame.length), ) - (viewOffset || 0); + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._scrollRef.scrollTo( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ horizontal ? {x: offset, animated} : {y: offset, animated}, ); } @@ -287,7 +303,15 @@ class VirtualizedList extends React.PureComponent { */ scrollToOffset(params: {animated?: ?boolean, offset: number}) { const {animated, offset} = params; + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._scrollRef.scrollTo( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this.props.horizontal ? {x: offset, animated} : {y: offset, animated}, ); } @@ -298,6 +322,10 @@ class VirtualizedList extends React.PureComponent { } flashScrollIndicators() { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._scrollRef.flashScrollIndicators(); } @@ -308,12 +336,20 @@ class VirtualizedList extends React.PureComponent { */ getScrollResponder() { if (this._scrollRef && this._scrollRef.getScrollResponder) { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ return this._scrollRef.getScrollResponder(); } } getScrollableNode() { if (this._scrollRef && this._scrollRef.getScrollableNode) { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ return this._scrollRef.getScrollableNode(); } else { return ReactNative.findNodeHandle(this._scrollRef); @@ -322,6 +358,10 @@ class VirtualizedList extends React.PureComponent { setNativeProps(props: Object) { if (this._scrollRef) { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._scrollRef.setNativeProps(props); } } @@ -539,6 +579,10 @@ class VirtualizedList extends React.PureComponent { ? ListHeaderComponent // $FlowFixMe : ; cells.push( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ { ? ListEmptyComponent // $FlowFixMe : ; cells.push( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ { ? ListFooterComponent // $FlowFixMe : ; cells.push( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ { } } -class CellRenderer extends React.Component { - props: { - CellRendererComponent?: ?ReactClass, - ItemSeparatorComponent: ?ReactClass<*>, - cellKey: string, - fillRateHelper: FillRateHelper, - index: number, - inversionStyle: ?StyleObj, - item: Item, - onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader - onUnmount: (cellKey: string) => void, - onUpdateSeparators: (cellKeys: Array, props: Object) => void, - parentProps: { - getItemLayout?: ?Function, - renderItem: renderItemType, - }, - prevCellKey: ?string, - }; - +class CellRenderer extends React.Component<{ + CellRendererComponent?: ?React.ComponentType, + ItemSeparatorComponent: ?React.ComponentType<*>, + cellKey: string, + fillRateHelper: FillRateHelper, + index: number, + inversionStyle: ?StyleObj, + item: Item, + onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader + onUnmount: (cellKey: string) => void, + onUpdateSeparators: (cellKeys: Array, props: Object) => void, + parentProps: { + getItemLayout?: ?Function, + renderItem: renderItemType, + }, + prevCellKey: ?string, +}, $FlowFixMeState> { state = { separatorProps: { highlighted: false, diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js index 74470157342900..fbb231f07ae503 100644 --- a/Libraries/Lists/VirtualizedSectionList.js +++ b/Libraries/Lists/VirtualizedSectionList.js @@ -39,8 +39,8 @@ type SectionBase = { unhighlight: () => void, updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, - }) => ?React.Element<*>, - ItemSeparatorComponent?: ?ReactClass<*>, + }) => ?React.Element, + ItemSeparatorComponent?: ?React.ComponentType<*>, keyExtractor?: (item: SectionItem, index: ?number) => string, // TODO: support more optional/override props @@ -57,11 +57,11 @@ type OptionalProps = { /** * Rendered after the last item in the last section. */ - ListFooterComponent?: ?(ReactClass<*> | React.Element<*>), + ListFooterComponent?: ?(React.ComponentType<*> | React.Element), /** * Rendered at the very beginning of the list. */ - ListHeaderComponent?: ?(ReactClass<*> | React.Element<*>), + ListHeaderComponent?: ?(React.ComponentType<*> | React.Element), /** * Default renderer for every item in every section. */ @@ -78,20 +78,20 @@ type OptionalProps = { /** * Rendered at the top of each section. */ - renderSectionHeader?: ?({section: SectionT}) => ?React.Element<*>, + renderSectionHeader?: ?({section: SectionT}) => ?React.Element, /** * Rendered at the bottom of each section. */ - renderSectionFooter?: ?({section: SectionT}) => ?React.Element<*>, + renderSectionFooter?: ?({section: SectionT}) => ?React.Element, /** * Rendered at the bottom of every Section, except the very last one, in place of the normal * ItemSeparatorComponent. */ - SectionSeparatorComponent?: ?ReactClass<*>, + SectionSeparatorComponent?: ?React.ComponentType<*>, /** * Rendered at the bottom of every Item except the very last one in the last section. */ - ItemSeparatorComponent?: ?ReactClass<*>, + ItemSeparatorComponent?: ?React.ComponentType<*>, /** * Warning: Virtualization can drastically improve memory consumption for long lists, but trashes * the state of items when they scroll out of the render window, so make sure all relavent data is @@ -133,11 +133,7 @@ type State = {childProps: VirtualizedListProps}; * hood. The only operation that might not scale well is concatting the data arrays of all the * sections when new props are received, which should be plenty fast for up to ~10,000 items. */ -class VirtualizedSectionList extends React.PureComponent< - DefaultProps, - Props, - State, -> { +class VirtualizedSectionList extends React.PureComponent, State> { props: Props; state: State; @@ -305,7 +301,7 @@ class VirtualizedSectionList extends React.PureComponent< ref && ref.updateSeparatorProps(newProps); }; - _getSeparatorComponent(index: number, info?: ?Object): ?ReactClass<*> { + _getSeparatorComponent(index: number, info?: ?Object): ?React.ComponentType<*> { info = info || this._subExtractor(index); if (!info) { return null; @@ -369,13 +365,17 @@ class VirtualizedSectionList extends React.PureComponent< _cellRefs = {}; _listRef: VirtualizedList; _captureRef = ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._listRef = ref; }; } type ItemWithSeparatorProps = { - LeadingSeparatorComponent: ?ReactClass<*>, - SeparatorComponent: ?ReactClass<*>, + LeadingSeparatorComponent: ?React.ComponentType<*>, + SeparatorComponent: ?React.ComponentType<*>, cellKey: string, index: number, item: Item, @@ -389,9 +389,7 @@ type ItemWithSeparatorProps = { trailingSection: ?Object, }; -class ItemWithSeparator extends React.Component { - props: ItemWithSeparatorProps; - +class ItemWithSeparator extends React.Component { state = { separatorProps: { highlighted: false, diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index cbf1b61990cd2e..7cb0ddf51765ad 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -79,7 +79,7 @@ const RCTModalHostView = requireNativeComponent('RCTModalHostView', null); * ``` */ -class Modal extends React.Component { +class Modal extends React.Component { static propTypes = { /** * The `animationType` prop controls how the modal animates. @@ -168,7 +168,7 @@ class Modal extends React.Component { } } - render(): ?React.Element { + render(): React.Node { if (this.props.visible === false) { return null; } diff --git a/Libraries/RCTTest/SnapshotViewIOS.ios.js b/Libraries/RCTTest/SnapshotViewIOS.ios.js index 07048b7eb82065..a3f4ee06cadf41 100644 --- a/Libraries/RCTTest/SnapshotViewIOS.ios.js +++ b/Libraries/RCTTest/SnapshotViewIOS.ios.js @@ -22,12 +22,10 @@ const ViewPropTypes = require('ViewPropTypes'); var requireNativeComponent = require('requireNativeComponent'); -class SnapshotViewIOS extends React.Component { - props: { - onSnapshotReady?: Function, - testIdentifier?: string, - }; - +class SnapshotViewIOS extends React.Component<{ + onSnapshotReady?: Function, + testIdentifier?: string, +}> { // $FlowFixMe(>=0.41.0) static propTypes = { ...ViewPropTypes, diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js index 0ce53a5106328b..88c09da205bf66 100644 --- a/Libraries/ReactNative/AppContainer.js +++ b/Libraries/ReactNative/AppContainer.js @@ -25,22 +25,25 @@ type Context = { rootTag: number, }; type Props = {| + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an error + * when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ children?: React.Children, rootTag: number, - WrapperComponent?: ?ReactClass<*>, + WrapperComponent?: ?React.ComponentType<*>, |}; type State = { - inspector: ?React.Element<*>, + inspector: ?React.Element, mainKey: number, }; -class AppContainer extends React.Component { - props: Props; +class AppContainer extends React.Component { state: State = { inspector: null, mainKey: 1, }; - _mainRef: ?React.Element<*>; + _mainRef: ?React.Element; _subscription: ?EmitterSubscription = null; static childContextTypes = { @@ -87,7 +90,7 @@ class AppContainer extends React.Component { } } - render(): React.Element<*> { + render(): React.Node { let yellowBox = null; if (__DEV__) { if (!global.__RCTProfileIsProfiling) { @@ -103,6 +106,10 @@ class AppContainer extends React.Component { pointerEvents="box-none" style={styles.appContainer} ref={ref => { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ this._mainRef = ref; }}> {this.props.children} diff --git a/Libraries/ReactNative/AppRegistry.js b/Libraries/ReactNative/AppRegistry.js index c51a447c996796..2fa4213f863f7c 100644 --- a/Libraries/ReactNative/AppRegistry.js +++ b/Libraries/ReactNative/AppRegistry.js @@ -23,9 +23,9 @@ const renderApplication = require('renderApplication'); type Task = (taskData: any) => Promise; type TaskProvider = () => Task; -export type ComponentProvider = () => ReactClass; +export type ComponentProvider = () => React$ComponentType; export type ComponentProviderInstrumentationHook = - (component: ComponentProvider) => ReactClass; + (component: ComponentProvider) => React$ComponentType; export type AppConfig = { appKey: string, component?: ComponentProvider, @@ -43,7 +43,7 @@ export type Registry = { sections: Array, runnables: Runnables, }; -export type WrapperComponentProvider = any => ReactClass<*>; +export type WrapperComponentProvider = any => React$ComponentType<*>; const runnables: Runnables = {}; let runCount = 1; diff --git a/Libraries/ReactNative/YellowBox.js b/Libraries/ReactNative/YellowBox.js index a21a01a8b35908..516bd75d50ddad 100644 --- a/Libraries/ReactNative/YellowBox.js +++ b/Libraries/ReactNative/YellowBox.js @@ -304,12 +304,11 @@ const WarningInspector = ({ ); }; -class YellowBox extends React.Component { - state: { - stacktraceVisible: boolean, - inspecting: ?string, - warningMap: Map, - }; +class YellowBox extends React.Component, +}> { _listener: ?EmitterSubscription; dismissWarning: (warning: ?string) => void; diff --git a/Libraries/ReactNative/renderApplication.js b/Libraries/ReactNative/renderApplication.js index 2d47cd549d7197..a1e96f30dbb3ca 100644 --- a/Libraries/ReactNative/renderApplication.js +++ b/Libraries/ReactNative/renderApplication.js @@ -23,10 +23,10 @@ const invariant = require('fbjs/lib/invariant'); require('BackHandler'); function renderApplication( - RootComponent: ReactClass, + RootComponent: React.ComponentType, initialProps: Props, rootTag: any, - WrapperComponent?: ?ReactClass<*>, + WrapperComponent?: ?React.ComponentType<*>, ) { invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag); diff --git a/Libraries/ReactNative/requireNativeComponent.js b/Libraries/ReactNative/requireNativeComponent.js index 7c6aedf14c5085..3b51ac79465e48 100644 --- a/Libraries/ReactNative/requireNativeComponent.js +++ b/Libraries/ReactNative/requireNativeComponent.js @@ -46,7 +46,7 @@ function requireNativeComponent( viewName: string, componentInterface?: ?ComponentInterface, extraConfig?: ?{nativeOnly?: Object}, -): ReactClass | string { +): React$ComponentType | string { const viewConfig = UIManager[viewName]; if (!viewConfig || !viewConfig.NativeProps) { warning(false, 'Native component for "%s" does not exist', viewName); diff --git a/Libraries/ReactNative/verifyPropTypes.js b/Libraries/ReactNative/verifyPropTypes.js index d140182760a6aa..0a5be68acdb1bd 100644 --- a/Libraries/ReactNative/verifyPropTypes.js +++ b/Libraries/ReactNative/verifyPropTypes.js @@ -13,7 +13,7 @@ var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); -export type ComponentInterface = ReactClass | { +export type ComponentInterface = React$ComponentType | { name?: string, displayName?: string, propTypes: Object, @@ -43,6 +43,10 @@ function verifyPropTypes( if (!propTypes) { throw new Error( + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ '`' + componentName + '` has no propTypes defined`' ); } @@ -54,9 +58,17 @@ function verifyPropTypes( (!nativePropsToIgnore || !nativePropsToIgnore[prop])) { var message; if (propTypes.hasOwnProperty(prop)) { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ message = '`' + componentName + '` has incorrectly defined propType for native prop `' + viewConfig.uiViewClassName + '.' + prop + '` of native type `' + nativeProps[prop]; } else { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found + * when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ message = '`' + componentName + '` has no propType for native prop `' + viewConfig.uiViewClassName + '.' + prop + '` of native type `' + nativeProps[prop] + '`'; diff --git a/Libraries/Renderer/shims/ReactTypes.js b/Libraries/Renderer/shims/ReactTypes.js index f63948d403eaf3..8af18318844ed6 100644 --- a/Libraries/Renderer/shims/ReactTypes.js +++ b/Libraries/Renderer/shims/ReactTypes.js @@ -13,16 +13,16 @@ 'use strict'; export type ReactNode = - | ReactElement + | React$Element | ReactCoroutine | ReactYield | ReactPortal | ReactText | ReactFragment; -export type ReactFragment = ReactEmpty | Iterable; +export type ReactFragment = ReactEmpty | Iterable; -export type ReactNodeList = ReactEmpty | ReactNode; +export type ReactNodeList = ReactEmpty | React$Node; export type ReactText = string | number; diff --git a/Libraries/StyleSheet/normalizeColor.js b/Libraries/StyleSheet/normalizeColor.js index 0fe8eac08c2d18..d4f0252b5ac88a 100755 --- a/Libraries/StyleSheet/normalizeColor.js +++ b/Libraries/StyleSheet/normalizeColor.js @@ -33,19 +33,19 @@ function normalizeColor(color: string | number): ?number { if ((match = matchers.rgb.exec(color))) { return ( + (// b parse255(match[1]) << 24 | // r parse255(match[2]) << 16 | // g - parse255(match[3]) << 8 | // b - 0x000000ff // a + parse255(match[3]) << 8 | 0x000000ff) // a ) >>> 0; } if ((match = matchers.rgba.exec(color))) { return ( + (// b parse255(match[1]) << 24 | // r parse255(match[2]) << 16 | // g - parse255(match[3]) << 8 | // b - parse1(match[4]) // a + parse255(match[3]) << 8 | parse1(match[4])) // a ) >>> 0; } @@ -76,23 +76,21 @@ function normalizeColor(color: string | number): ?number { if ((match = matchers.hsl.exec(color))) { return ( - hslToRgb( + (hslToRgb( parse360(match[1]), // h parsePercentage(match[2]), // s parsePercentage(match[3]) // l - ) | - 0x000000ff // a + ) | 0x000000ff) // a ) >>> 0; } if ((match = matchers.hsla.exec(color))) { return ( - hslToRgb( + (hslToRgb( parse360(match[1]), // h parsePercentage(match[2]), // s parsePercentage(match[3]) // l - ) | - parse1(match[4]) // a + ) | parse1(match[4])) // a ) >>> 0; } diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 8be7124b1b2a84..1979c679b65104 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -479,11 +479,11 @@ const Text = createReactClass({ }); }; - this.touchableHandlePress = (e: SyntheticEvent) => { + this.touchableHandlePress = (e: SyntheticEvent<>) => { this.props.onPress && this.props.onPress(e); }; - this.touchableHandleLongPress = (e: SyntheticEvent) => { + this.touchableHandleLongPress = (e: SyntheticEvent<>) => { this.props.onLongPress && this.props.onLongPress(e); }; @@ -494,28 +494,28 @@ const Text = createReactClass({ // $FlowFixMe(>=0.41.0) return setResponder; }, - onResponderGrant: function(e: SyntheticEvent, dispatchID: string) { + onResponderGrant: function(e: SyntheticEvent<>, dispatchID: string) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderGrant(e, dispatchID); this.props.onResponderGrant && // $FlowFixMe(>=0.41.0) this.props.onResponderGrant.apply(this, arguments); }.bind(this), - onResponderMove: function(e: SyntheticEvent) { + onResponderMove: function(e: SyntheticEvent<>) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderMove(e); this.props.onResponderMove && // $FlowFixMe(>=0.41.0) this.props.onResponderMove.apply(this, arguments); }.bind(this), - onResponderRelease: function(e: SyntheticEvent) { + onResponderRelease: function(e: SyntheticEvent<>) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderRelease(e); this.props.onResponderRelease && // $FlowFixMe(>=0.41.0) this.props.onResponderRelease.apply(this, arguments); }.bind(this), - onResponderTerminate: function(e: SyntheticEvent) { + onResponderTerminate: function(e: SyntheticEvent<>) { // $FlowFixMe(>=0.41.0) this.touchableHandleResponderTerminate(e); this.props.onResponderTerminate && diff --git a/RNTester/js/ARTExample.js b/RNTester/js/ARTExample.js index 3433d3403d520c..95aa4e8bc534d7 100644 --- a/RNTester/js/ARTExample.js +++ b/RNTester/js/ARTExample.js @@ -30,7 +30,7 @@ const { var scale = Platform.isTVOS ? 4 : 1; -class ARTExample extends React.Component{ +class ARTExample extends React.Component<{}> { render(){ const pathRect = new Path() .moveTo(scale * 0,scale * 0) diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js index e21772dcfa472c..30902ac6cb1dfa 100644 --- a/RNTester/js/AccessibilityIOSExample.js +++ b/RNTester/js/AccessibilityIOSExample.js @@ -19,7 +19,7 @@ var { View, } = ReactNative; -class AccessibilityIOSExample extends React.Component { +class AccessibilityIOSExample extends React.Component<{}> { render() { return ( @@ -53,7 +53,7 @@ class AccessibilityIOSExample extends React.Component { } } -class ScreenReaderStatusExample extends React.Component { +class ScreenReaderStatusExample extends React.Component<{}, $FlowFixMeState> { state = { screenReaderEnabled: false, } diff --git a/RNTester/js/ActionSheetIOSExample.js b/RNTester/js/ActionSheetIOSExample.js index c89478668dc891..a4b7ea07d4d1a8 100644 --- a/RNTester/js/ActionSheetIOSExample.js +++ b/RNTester/js/ActionSheetIOSExample.js @@ -31,7 +31,7 @@ var BUTTONS = [ var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; -class ActionSheetExample extends React.Component { +class ActionSheetExample extends React.Component<{}, $FlowFixMeState> { state = { clicked: 'none', }; @@ -61,7 +61,7 @@ class ActionSheetExample extends React.Component { }; } -class ActionSheetTintExample extends React.Component { +class ActionSheetTintExample extends React.Component<{}, $FlowFixMeState> { state = { clicked: 'none', }; @@ -92,7 +92,7 @@ class ActionSheetTintExample extends React.Component { }; } -class ShareActionSheetExample extends React.Component { +class ShareActionSheetExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { text: '' }; @@ -132,7 +132,7 @@ class ShareActionSheetExample extends React.Component { }; } -class ShareScreenshotExample extends React.Component { +class ShareScreenshotExample extends React.Component<{}, $FlowFixMeState> { state = { text: '' }; diff --git a/RNTester/js/ActivityIndicatorExample.js b/RNTester/js/ActivityIndicatorExample.js index 6868795cc284e2..e185041b7a9aa8 100644 --- a/RNTester/js/ActivityIndicatorExample.js +++ b/RNTester/js/ActivityIndicatorExample.js @@ -20,11 +20,7 @@ import { ActivityIndicator, StyleSheet, View } from 'react-native'; type State = { animating: boolean; }; type Timer = number; -class ToggleAnimatingActivityIndicator extends Component { - /** - * Optional Flowtype state and timer types - */ - state: State; +class ToggleAnimatingActivityIndicator extends Component<$FlowFixMeProps, State> { _timer: Timer; constructor(props) { diff --git a/RNTester/js/AlertIOSExample.js b/RNTester/js/AlertIOSExample.js index e3d7375561956e..fdd1d6a31bf02c 100644 --- a/RNTester/js/AlertIOSExample.js +++ b/RNTester/js/AlertIOSExample.js @@ -81,8 +81,7 @@ exports.examples = [{ } }]; -class PromptOptions extends React.Component { - state: any; +class PromptOptions extends React.Component<$FlowFixMeProps, any> { customButtons: Array; constructor(props) { diff --git a/RNTester/js/AnimatedExample.js b/RNTester/js/AnimatedExample.js index a8fd96c5e5026b..9e9fbffd1ddd42 100644 --- a/RNTester/js/AnimatedExample.js +++ b/RNTester/js/AnimatedExample.js @@ -35,9 +35,7 @@ exports.examples = [ 'bring opacity from 0 to 1 when the component ' + 'mounts.', render: function() { - class FadeInView extends React.Component { - state: any; - + class FadeInView extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = { @@ -64,9 +62,7 @@ exports.examples = [ ); } } - class FadeInExample extends React.Component { - state: any; - + class FadeInExample extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = { diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js index 1b0c807a442122..4351363dd44bec 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExApp.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExApp.js @@ -27,9 +27,7 @@ var CIRCLE_SIZE = 80; var CIRCLE_MARGIN = 18; var NUM_CIRCLES = 30; -class Circle extends React.Component { - state: any; - props: any; +class Circle extends React.Component { longTimer: number; _onLongPress: () => void; @@ -78,7 +76,7 @@ class Circle extends React.Component { }); } - render(): React.Element { + render(): React.Node { if (this.state.panResponder) { var handlers = this.state.panResponder.panHandlers; var dragStyle = { // Used to position while dragging @@ -156,10 +154,7 @@ class Circle extends React.Component { } } -class AnExApp extends React.Component { - state: any; - props: any; - +class AnExApp extends React.Component { static title = 'Animated - Gratuitous App'; static description = 'Bunch of Animations - tap a circle to ' + 'open a view with more animations, or longPress and drag to reorder circles.'; @@ -179,7 +174,7 @@ class AnExApp extends React.Component { this._onMove = this._onMove.bind(this); } - render(): React.Element { + render(): React.Node { var circles = this.state.keys.map((key, idx) => { if (key === this.state.activeKey) { return ; diff --git a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js index aaeef0c3e25aa3..88667a2cae0fdb 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js @@ -30,9 +30,7 @@ var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => { // static positions }; }); -class AnExBobble extends React.Component { - state: any; - +class AnExBobble extends React.Component { constructor(props: Object) { super(props); this.state = {}; @@ -83,7 +81,7 @@ class AnExBobble extends React.Component { }); } - render(): React.Element { + render(): React.Node { return ( {this.state.bobbles.map((_, i) => { diff --git a/RNTester/js/AnimatedGratuitousApp/AnExChained.js b/RNTester/js/AnimatedGratuitousApp/AnExChained.js index 7db7136166cb9c..d59ae58c9f6c60 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExChained.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExChained.js @@ -20,9 +20,7 @@ var { View, } = ReactNative; -class AnExChained extends React.Component { - state: any; - +class AnExChained extends React.Component { constructor(props: Object) { super(props); this.state = { diff --git a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js index 11d3bc9306c113..855580a9339268 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js @@ -22,7 +22,7 @@ var { View, } = ReactNative; -class AnExScroll extends React.Component { +class AnExScroll extends React.Component<$FlowFixMeProps, any> { state: any = { scrollX: new Animated.Value(0) }; render() { diff --git a/RNTester/js/AnimatedGratuitousApp/AnExSet.js b/RNTester/js/AnimatedGratuitousApp/AnExSet.js index f7d184e0651ab0..7b2ba0f2adc1db 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExSet.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExSet.js @@ -26,9 +26,7 @@ var AnExChained = require('./AnExChained'); var AnExScroll = require('./AnExScroll'); var AnExTilt = require('./AnExTilt'); -class AnExSet extends React.Component { - state: any; - +class AnExSet extends React.Component { constructor(props: Object) { super(props); function randColor() { @@ -40,7 +38,7 @@ class AnExSet extends React.Component { openColor: randColor(), }; } - render(): React.Element { + render(): React.Node { var backgroundColor = this.props.openVal ? this.props.openVal.interpolate({ inputRange: [0, 1], diff --git a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js index 4391e3b4fd0a48..293f910adc23eb 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js @@ -19,9 +19,7 @@ var { StyleSheet, } = ReactNative; -class AnExTilt extends React.Component { - state: any; - +class AnExTilt extends React.Component { constructor(props: Object) { super(props); this.state = { @@ -83,7 +81,7 @@ class AnExTilt extends React.Component { this._startBurnsZoom(); } - render(): React.Element { + render(): React.Node { return ( { state = { appState: AppState.currentState, previousAppStates: [], diff --git a/RNTester/js/AssetScaledImageExample.js b/RNTester/js/AssetScaledImageExample.js index b5e4c4edd95ea0..05f32d22a7e8e0 100644 --- a/RNTester/js/AssetScaledImageExample.js +++ b/RNTester/js/AssetScaledImageExample.js @@ -20,7 +20,7 @@ var { ScrollView } = ReactNative; -class AssetScaledImageExample extends React.Component { +class AssetScaledImageExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { asset: this.props.asset }; diff --git a/RNTester/js/AsyncStorageExample.js b/RNTester/js/AsyncStorageExample.js index dd9e9bc2e748e3..872baf8d0795cb 100644 --- a/RNTester/js/AsyncStorageExample.js +++ b/RNTester/js/AsyncStorageExample.js @@ -24,7 +24,7 @@ var PickerItemIOS = PickerIOS.Item; var STORAGE_KEY = '@AsyncStorageExample:key'; var COLORS = ['red', 'orange', 'yellow', 'green', 'blue']; -class BasicStorageExample extends React.Component { +class BasicStorageExample extends React.Component<{}, $FlowFixMeState> { state = { selectedValue: COLORS[0], messages: [], diff --git a/RNTester/js/CameraRollExample.js b/RNTester/js/CameraRollExample.js index 561554070bae38..2cec3f3bddc451 100644 --- a/RNTester/js/CameraRollExample.js +++ b/RNTester/js/CameraRollExample.js @@ -31,7 +31,7 @@ const CameraRollView = require('./CameraRollView'); const AssetScaledImageExampleView = require('./AssetScaledImageExample'); -class CameraRollExample extends React.Component { +class CameraRollExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { groupTypes: 'SavedPhotos', sliderValue: 1, diff --git a/RNTester/js/ClipboardExample.js b/RNTester/js/ClipboardExample.js index c8808b0ef065ed..f4e6d45afb2693 100644 --- a/RNTester/js/ClipboardExample.js +++ b/RNTester/js/ClipboardExample.js @@ -19,7 +19,7 @@ var { Text, } = ReactNative; -class ClipboardExample extends React.Component { +class ClipboardExample extends React.Component<{}, $FlowFixMeState> { state = { content: 'Content will appear here' }; diff --git a/RNTester/js/DatePickerIOSExample.js b/RNTester/js/DatePickerIOSExample.js index 97f1b9ac8b503f..d03c19faefc726 100644 --- a/RNTester/js/DatePickerIOSExample.js +++ b/RNTester/js/DatePickerIOSExample.js @@ -21,7 +21,7 @@ var { View, } = ReactNative; -class DatePickerExample extends React.Component { +class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { static defaultProps = { date: new Date(), timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, @@ -91,7 +91,7 @@ class DatePickerExample extends React.Component { } } -class WithLabel extends React.Component { +class WithLabel extends React.Component<$FlowFixMeProps> { render() { return ( @@ -106,7 +106,7 @@ class WithLabel extends React.Component { } } -class Heading extends React.Component { +class Heading extends React.Component<$FlowFixMeProps> { render() { return ( diff --git a/RNTester/js/FlatListExample.js b/RNTester/js/FlatListExample.js index 07ca90be82439a..aa2f805b73563b 100644 --- a/RNTester/js/FlatListExample.js +++ b/RNTester/js/FlatListExample.js @@ -47,7 +47,7 @@ const VIEWABILITY_CONFIG = { waitForInteraction: true, }; -class FlatListExample extends React.PureComponent { +class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { static title = ''; static description = 'Performant, scrollable list of data.'; diff --git a/RNTester/js/GeolocationExample.js b/RNTester/js/GeolocationExample.js index c60eab3cfbebfd..02088ea295776d 100644 --- a/RNTester/js/GeolocationExample.js +++ b/RNTester/js/GeolocationExample.js @@ -33,7 +33,7 @@ exports.examples = [ } ]; -class GeolocationExample extends React.Component { +class GeolocationExample extends React.Component<{}, $FlowFixMeState> { state = { initialPosition: 'unknown', lastPosition: 'unknown', diff --git a/RNTester/js/ImageCapInsetsExample.js b/RNTester/js/ImageCapInsetsExample.js index 7861d63a8564b3..88830779e1d424 100644 --- a/RNTester/js/ImageCapInsetsExample.js +++ b/RNTester/js/ImageCapInsetsExample.js @@ -22,7 +22,7 @@ var { View, } = ReactNative; -class ImageCapInsetsExample extends React.Component { +class ImageCapInsetsExample extends React.Component<{}> { render() { return ( diff --git a/RNTester/js/LayoutAnimationExample.js b/RNTester/js/LayoutAnimationExample.js index fdd2c0f1c898e6..209ddbb610b8a1 100644 --- a/RNTester/js/LayoutAnimationExample.js +++ b/RNTester/js/LayoutAnimationExample.js @@ -21,7 +21,7 @@ const { TouchableOpacity, } = ReactNative; -class AddRemoveExample extends React.Component { +class AddRemoveExample extends React.Component<{}, $FlowFixMeState> { state = { views: [], }; @@ -74,7 +74,7 @@ const BlueSquare = () => Blue square ; -class CrossFadeExample extends React.Component { +class CrossFadeExample extends React.Component<{}, $FlowFixMeState> { state = { toggled: false, }; diff --git a/RNTester/js/LayoutEventsExample.js b/RNTester/js/LayoutEventsExample.js index 230bd3190370c1..c1e99d4964ebca 100644 --- a/RNTester/js/LayoutEventsExample.js +++ b/RNTester/js/LayoutEventsExample.js @@ -32,7 +32,7 @@ type State = { viewStyle: { margin: number }, }; -class LayoutEventExample extends React.Component { +class LayoutEventExample extends React.Component<{}, State> { state: State = { viewStyle: { margin: 20, diff --git a/RNTester/js/LayoutExample.js b/RNTester/js/LayoutExample.js index 6fc96757ed17b5..8292befad39179 100644 --- a/RNTester/js/LayoutExample.js +++ b/RNTester/js/LayoutExample.js @@ -22,7 +22,7 @@ var { var RNTesterBlock = require('./RNTesterBlock'); var RNTesterPage = require('./RNTesterPage'); -class Circle extends React.Component { +class Circle extends React.Component<$FlowFixMeProps> { render() { var size = this.props.size || 20; var backgroundColor = this.props.bgColor || '#527fe4'; @@ -40,7 +40,7 @@ class Circle extends React.Component { } } -class CircleBlock extends React.Component { +class CircleBlock extends React.Component<$FlowFixMeProps> { render() { var circleStyle = { flexDirection: 'row', @@ -57,7 +57,7 @@ class CircleBlock extends React.Component { } } -class LayoutExample extends React.Component { +class LayoutExample extends React.Component<$FlowFixMeProps> { static title = 'Layout - Flexbox'; static description = 'Examples of using the flexbox API to layout views.'; static displayName = 'LayoutExample'; diff --git a/RNTester/js/ListExampleShared.js b/RNTester/js/ListExampleShared.js index 63a720262d9bb6..cae8519f0aca74 100644 --- a/RNTester/js/ListExampleShared.js +++ b/RNTester/js/ListExampleShared.js @@ -44,15 +44,14 @@ function genItemData(count: number, start: number = 0): Array { const HORIZ_WIDTH = 200; const ITEM_HEIGHT = 72; -class ItemComponent extends React.PureComponent { - props: { - fixedHeight?: ?boolean, - horizontal?: ?boolean, - item: Item, - onPress: (key: string) => void, - onShowUnderlay?: () => void, - onHideUnderlay?: () => void, - }; +class ItemComponent extends React.PureComponent<{ + fixedHeight?: ?boolean, + horizontal?: ?boolean, + item: Item, + onPress: (key: string) => void, + onShowUnderlay?: () => void, + onHideUnderlay?: () => void, +}> { _onPress = () => { this.props.onPress(this.props.item.key); }; @@ -91,7 +90,7 @@ const renderStackedItem = ({item}: {item: Item}) => { ); }; -class FooterComponent extends React.PureComponent { +class FooterComponent extends React.PureComponent<{}> { render() { return ( @@ -104,7 +103,7 @@ class FooterComponent extends React.PureComponent { } } -class HeaderComponent extends React.PureComponent { +class HeaderComponent extends React.PureComponent<{}> { render() { return ( @@ -117,13 +116,13 @@ class HeaderComponent extends React.PureComponent { } } -class SeparatorComponent extends React.PureComponent { +class SeparatorComponent extends React.PureComponent<{}> { render() { return ; } } -class ItemSeparatorComponent extends React.PureComponent { +class ItemSeparatorComponent extends React.PureComponent<$FlowFixMeProps> { render() { const style = this.props.highlighted ? [styles.itemSeparator, {marginLeft: 0, backgroundColor: 'rgb(217, 217, 217)'}] @@ -132,7 +131,7 @@ class ItemSeparatorComponent extends React.PureComponent { } } -class Spindicator extends React.PureComponent { +class Spindicator extends React.PureComponent<$FlowFixMeProps> { render() { return ( { componentWillMount() { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); @@ -86,8 +86,7 @@ class Thumb extends React.Component { } } -class ListViewPagingExample extends React.Component { - state: *; +class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> { static title = ' - Paging'; static description = 'Floating headers & layout animations.'; diff --git a/RNTester/js/MaskedViewExample.js b/RNTester/js/MaskedViewExample.js index 237f560de6ae91..84a757eee6b998 100644 --- a/RNTester/js/MaskedViewExample.js +++ b/RNTester/js/MaskedViewExample.js @@ -23,7 +23,7 @@ const { View, } = require('react-native'); -class MaskedViewExample extends React.Component { +class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { static title = ''; static description = 'Renders the child view with a mask specified in the `renderMask` prop.'; diff --git a/RNTester/js/ModalExample.js b/RNTester/js/ModalExample.js index 36d3c296f0e685..c57ef54edb67d1 100644 --- a/RNTester/js/ModalExample.js +++ b/RNTester/js/ModalExample.js @@ -30,7 +30,7 @@ exports.framework = 'React'; exports.title = ''; exports.description = 'Component for presenting modal views.'; -class Button extends React.Component { +class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { active: false, }; @@ -52,9 +52,6 @@ class Button extends React.Component { onHideUnderlay={this._onUnhighlight} onPress={this.props.onPress} onShowUnderlay={this._onHighlight} - /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an - * error found when Flow v0.53 was deployed. To see the error delete - * this comment and run Flow. */ style={[styles.button, this.props.style]} underlayColor="#a9d9d4"> {this.props.children} @@ -72,7 +69,7 @@ const supportedOrientationsPickerValues = [ [], ]; -class ModalExample extends React.Component { +class ModalExample extends React.Component<{}, $FlowFixMeState> { state = { animationType: 'none', modalVisible: false, diff --git a/RNTester/js/MultiColumnExample.js b/RNTester/js/MultiColumnExample.js index 0315ead7966859..cad2560eefc61f 100644 --- a/RNTester/js/MultiColumnExample.js +++ b/RNTester/js/MultiColumnExample.js @@ -36,7 +36,7 @@ const { renderSmallSwitchOption, } = require('./ListExampleShared'); -class MultiColumnExample extends React.PureComponent { +class MultiColumnExample extends React.PureComponent<$FlowFixMeProps, $FlowFixMeState> { static title = ' - MultiColumn'; static description = 'Performant, scrollable grid of data.'; diff --git a/RNTester/js/NativeAnimationsExample.js b/RNTester/js/NativeAnimationsExample.js index 84f0fab0576bd2..8cf41be3e81403 100644 --- a/RNTester/js/NativeAnimationsExample.js +++ b/RNTester/js/NativeAnimationsExample.js @@ -24,7 +24,7 @@ const { var AnimatedSlider = Animated.createAnimatedComponent(Slider); -class Tester extends React.Component { +class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { native: new Animated.Value(0), js: new Animated.Value(0), @@ -74,7 +74,7 @@ class Tester extends React.Component { } } -class ValueListenerExample extends React.Component { +class ValueListenerExample extends React.Component<{}, $FlowFixMeState> { state = { anim: new Animated.Value(0), progress: 0, @@ -123,7 +123,7 @@ class ValueListenerExample extends React.Component { } } -class LoopExample extends React.Component { +class LoopExample extends React.Component<{}, $FlowFixMeState> { state = { value: new Animated.Value(0), }; @@ -158,9 +158,8 @@ class LoopExample extends React.Component { } const RNTesterSettingSwitchRow = require('RNTesterSettingSwitchRow'); -class InternalSettings extends React.Component { +class InternalSettings extends React.Component<{}, {busyTime: number | string, filteredStall: number}> { _stallInterval: ?number; - state: {busyTime: number | string, filteredStall: number}; render() { return ( @@ -208,7 +207,7 @@ class InternalSettings extends React.Component { } } -class EventExample extends React.Component { +class EventExample extends React.Component<{}, $FlowFixMeState> { state = { scrollX: new Animated.Value(0), }; diff --git a/RNTester/js/NavigatorIOSExample.js b/RNTester/js/NavigatorIOSExample.js index 8d7582679bd539..458445e68dc347 100644 --- a/RNTester/js/NavigatorIOSExample.js +++ b/RNTester/js/NavigatorIOSExample.js @@ -27,7 +27,7 @@ const { View, } = ReactNative; -class EmptyPage extends React.Component { +class EmptyPage extends React.Component<$FlowFixMeProps> { render() { return ( @@ -39,7 +39,7 @@ class EmptyPage extends React.Component { } } -class NavigatorIOSExamplePage extends React.Component { +class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { render() { var recurseTitle = 'Recurse Navigation'; if (!this.props.depth || this.props.depth === 1) { @@ -230,7 +230,7 @@ class NavigatorIOSExamplePage extends React.Component { }; } -class NavigatorIOSExample extends React.Component { +class NavigatorIOSExample extends React.Component<$FlowFixMeProps> { static title = ''; static description = 'iOS navigation capabilities'; static external = true; diff --git a/RNTester/js/NetInfoExample.js b/RNTester/js/NetInfoExample.js index 0d5d88925ad65f..6c909a57e75a11 100644 --- a/RNTester/js/NetInfoExample.js +++ b/RNTester/js/NetInfoExample.js @@ -20,7 +20,7 @@ const { TouchableWithoutFeedback, } = ReactNative; -class ConnectionInfoSubscription extends React.Component { +class ConnectionInfoSubscription extends React.Component<{}, $FlowFixMeState> { state = { connectionInfoHistory: [], }; @@ -56,7 +56,7 @@ class ConnectionInfoSubscription extends React.Component { } } -class ConnectionInfoCurrent extends React.Component { +class ConnectionInfoCurrent extends React.Component<{}, $FlowFixMeState> { state = { connectionInfo: null, }; @@ -93,7 +93,7 @@ class ConnectionInfoCurrent extends React.Component { } } -class IsConnected extends React.Component { +class IsConnected extends React.Component<{}, $FlowFixMeState> { state = { isConnected: null, }; @@ -130,7 +130,7 @@ class IsConnected extends React.Component { } } -class IsConnectionExpensive extends React.Component { +class IsConnectionExpensive extends React.Component<{}, $FlowFixMeState> { state = { isConnectionExpensive: (null : ?boolean), }; diff --git a/RNTester/js/OrientationChangeExample.js b/RNTester/js/OrientationChangeExample.js index f0c9f33a056fb2..6dde81f9ef9344 100644 --- a/RNTester/js/OrientationChangeExample.js +++ b/RNTester/js/OrientationChangeExample.js @@ -21,7 +21,7 @@ const { import type EmitterSubscription from 'EmitterSubscription'; -class OrientationChangeExample extends React.Component { +class OrientationChangeExample extends React.Component<{}, $FlowFixMeState> { _orientationSubscription: EmitterSubscription; state = { diff --git a/RNTester/js/PermissionsExampleAndroid.android.js b/RNTester/js/PermissionsExampleAndroid.android.js index 8106ed4c8aea52..aff60b4d94d504 100644 --- a/RNTester/js/PermissionsExampleAndroid.android.js +++ b/RNTester/js/PermissionsExampleAndroid.android.js @@ -29,7 +29,7 @@ exports.framework = 'React'; exports.title = 'PermissionsAndroid'; exports.description = 'Permissions example for API 23+.'; -class PermissionsExample extends React.Component { +class PermissionsExample extends React.Component<{}, $FlowFixMeState> { state = { permission: PermissionsAndroid.PERMISSIONS.CAMERA, hasPermission: 'Not Checked', diff --git a/RNTester/js/PickerExample.js b/RNTester/js/PickerExample.js index f9a6d1323e990b..595ee87a37315e 100644 --- a/RNTester/js/PickerExample.js +++ b/RNTester/js/PickerExample.js @@ -24,7 +24,7 @@ const { const Item = Picker.Item; -class PickerExample extends React.Component { +class PickerExample extends React.Component<{}, $FlowFixMeState> { static title = ''; static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.'; diff --git a/RNTester/js/PickerIOSExample.js b/RNTester/js/PickerIOSExample.js index da4addd293157d..34f04ca59c32af 100644 --- a/RNTester/js/PickerIOSExample.js +++ b/RNTester/js/PickerIOSExample.js @@ -62,7 +62,7 @@ var CAR_MAKES_AND_MODELS = { }, }; -class PickerExample extends React.Component { +class PickerExample extends React.Component<{}, $FlowFixMeState> { state = { carMake: 'cadillac', modelIndex: 3, @@ -104,7 +104,7 @@ class PickerExample extends React.Component { } } -class PickerStyleExample extends React.Component { +class PickerStyleExample extends React.Component<{}, $FlowFixMeState> { state = { carMake: 'cadillac', modelIndex: 0, diff --git a/RNTester/js/PointerEventsExample.js b/RNTester/js/PointerEventsExample.js index 6ddfc966aa82de..7307eb3d497147 100644 --- a/RNTester/js/PointerEventsExample.js +++ b/RNTester/js/PointerEventsExample.js @@ -19,7 +19,7 @@ var { View, } = ReactNative; -class ExampleBox extends React.Component { +class ExampleBox extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { log: [], }; @@ -46,6 +46,10 @@ class ExampleBox extends React.Component { + {/* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */} { render() { return ( { render() { return ( @@ -105,7 +109,7 @@ class DemoText extends React.Component { } } -class BoxNoneExample extends React.Component { +class BoxNoneExample extends React.Component<$FlowFixMeProps> { render() { return ( { render() { return ( , + Component: React.ComponentType, title: string, description: string, }; diff --git a/RNTester/js/ProgressBarAndroidExample.android.js b/RNTester/js/ProgressBarAndroidExample.android.js index cd3bf3dde6211a..263e0e067e4acd 100644 --- a/RNTester/js/ProgressBarAndroidExample.android.js +++ b/RNTester/js/ProgressBarAndroidExample.android.js @@ -43,7 +43,7 @@ var MovingBar = createReactClass({ }, }); -class ProgressBarAndroidExample extends React.Component { +class ProgressBarAndroidExample extends React.Component<{}> { static title = ''; static description = 'Horizontal bar to show the progress of some operation.'; diff --git a/RNTester/js/PushNotificationIOSExample.js b/RNTester/js/PushNotificationIOSExample.js index b29d36cc55fefb..001d58719b6429 100644 --- a/RNTester/js/PushNotificationIOSExample.js +++ b/RNTester/js/PushNotificationIOSExample.js @@ -22,7 +22,7 @@ var { View, } = ReactNative; -class Button extends React.Component { +class Button extends React.Component<$FlowFixMeProps> { render() { return ( { componentWillMount() { PushNotificationIOS.addEventListener('register', this._onRegistered); PushNotificationIOS.addEventListener('registrationError', this._onRegistrationError); @@ -145,9 +145,7 @@ class NotificationExample extends React.Component { } } -class NotificationPermissionExample extends React.Component { - state: any; - +class NotificationPermissionExample extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = {permissions: null}; diff --git a/RNTester/js/RCTRootViewIOSExample.js b/RNTester/js/RCTRootViewIOSExample.js index d1ccf5cfebc39e..17303d5fe9a074 100644 --- a/RNTester/js/RCTRootViewIOSExample.js +++ b/RNTester/js/RCTRootViewIOSExample.js @@ -22,7 +22,7 @@ const { const requireNativeComponent = require('requireNativeComponent'); -class AppPropertiesUpdateExample extends React.Component { +class AppPropertiesUpdateExample extends React.Component<{}> { render() { // Do not require this unless we are actually rendering. const UpdatePropertiesExampleView = requireNativeComponent('UpdatePropertiesExampleView'); @@ -41,7 +41,7 @@ class AppPropertiesUpdateExample extends React.Component { } } -class RootViewSizeFlexibilityExample extends React.Component { +class RootViewSizeFlexibilityExample extends React.Component<{}> { render() { // Do not require this unless we are actually rendering. const FlexibleSizeExampleView = requireNativeComponent('FlexibleSizeExampleView'); diff --git a/RNTester/js/RNTesterApp.android.js b/RNTester/js/RNTesterApp.android.js index a891429e34eb63..dad6b5cd71b854 100644 --- a/RNTester/js/RNTesterApp.android.js +++ b/RNTester/js/RNTesterApp.android.js @@ -56,10 +56,7 @@ const HEADER_NAV_ICON = nativeImageSource({ height: 48 }); -class RNTesterApp extends React.Component { - props: Props; - state: RNTesterNavigationState; - +class RNTesterApp extends React.Component { componentWillMount() { BackHandler.addEventListener('hardwareBackPress', this._handleBackButtonPress); } diff --git a/RNTester/js/RNTesterApp.ios.js b/RNTester/js/RNTesterApp.ios.js index ed452bee2bbd2e..14acf487204dd0 100644 --- a/RNTester/js/RNTesterApp.ios.js +++ b/RNTester/js/RNTesterApp.ios.js @@ -53,10 +53,7 @@ const Header = ({ onBack, title }: { onBack?: () => mixed, title: string }) => ( ); -class RNTesterApp extends React.Component { - props: Props; - state: RNTesterNavigationState; - +class RNTesterApp extends React.Component { componentWillMount() { BackHandler.addEventListener('hardwareBackPress', this._handleBack); } @@ -128,6 +125,10 @@ class RNTesterApp extends React.Component { return (
+ {/* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */} RNTesterApp); RNTesterList.ComponentExamples.concat(RNTesterList.APIExamples).forEach((Example: RNTesterExample) => { const ExampleModule = Example.module; if (ExampleModule.displayName) { - class Snapshotter extends React.Component { + class Snapshotter extends React.Component<{}> { render() { return ( diff --git a/RNTester/js/RNTesterBlock.js b/RNTester/js/RNTesterBlock.js index ae5f568a220649..bd854ed1793a6a 100644 --- a/RNTester/js/RNTesterBlock.js +++ b/RNTester/js/RNTesterBlock.js @@ -20,12 +20,10 @@ var { View, } = ReactNative; -class RNTesterBlock extends React.Component { - props: { - title?: string, - description?: string, - }; - +class RNTesterBlock extends React.Component<{ + title?: string, + description?: string, +}, $FlowFixMeState> { static propTypes = { title: PropTypes.string, description: PropTypes.string, diff --git a/RNTester/js/RNTesterButton.js b/RNTester/js/RNTesterButton.js index a8a8b008b8c996..94329d21bfddb9 100644 --- a/RNTester/js/RNTesterButton.js +++ b/RNTester/js/RNTesterButton.js @@ -20,9 +20,7 @@ var { TouchableHighlight, } = ReactNative; -class RNTesterButton extends React.Component { - props: {onPress?: Function}; - +class RNTesterButton extends React.Component<{onPress?: Function}> { static propTypes = { onPress: PropTypes.func, }; diff --git a/RNTester/js/RNTesterExampleList.js b/RNTester/js/RNTesterExampleList.js index a796039b0101d6..7df411bcd4b80a 100644 --- a/RNTester/js/RNTesterExampleList.js +++ b/RNTester/js/RNTesterExampleList.js @@ -43,14 +43,13 @@ type Props = { style?: ?StyleObj, }; -class RowComponent extends React.PureComponent { - props: { - item: Object, - onNavigate: Function, - onPress?: Function, - onShowUnderlay?: Function, - onHideUnderlay?: Function, - }; +class RowComponent extends React.PureComponent<{ + item: Object, + onNavigate: Function, + onPress?: Function, + onShowUnderlay?: Function, + onHideUnderlay?: Function, +}> { _onPress = () => { if (this.props.onPress) { this.props.onPress(); @@ -80,9 +79,7 @@ const renderSectionHeader = ({section}) => {section.title} ; -class RNTesterExampleList extends React.Component { - props: Props - +class RNTesterExampleList extends React.Component { render() { const filterText = this.props.persister.state.filter; const filterRegex = new RegExp(String(filterText), 'i'); diff --git a/RNTester/js/RNTesterPage.js b/RNTester/js/RNTesterPage.js index 071c5b1ec72314..ed5d58f0d0e68f 100644 --- a/RNTester/js/RNTesterPage.js +++ b/RNTester/js/RNTesterPage.js @@ -22,12 +22,10 @@ var { var RNTesterTitle = require('./RNTesterTitle'); -class RNTesterPage extends React.Component { - props: { - noScroll?: boolean, - noSpacer?: boolean, - }; - +class RNTesterPage extends React.Component<{ + noScroll?: boolean, + noSpacer?: boolean, +}> { static propTypes = { noScroll: PropTypes.bool, noSpacer: PropTypes.bool, @@ -37,9 +35,9 @@ class RNTesterPage extends React.Component { var ContentWrapper; var wrapperProps = {}; if (this.props.noScroll) { - ContentWrapper = ((View: any): ReactClass); + ContentWrapper = ((View: any): React.ComponentType); } else { - ContentWrapper = (ScrollView: ReactClass); + ContentWrapper = (ScrollView: React.ComponentType); // $FlowFixMe found when converting React.createClass to ES6 wrapperProps.automaticallyAdjustContentInsets = !this.props.title; wrapperProps.keyboardShouldPersistTaps = 'handled'; diff --git a/RNTester/js/RNTesterSettingSwitchRow.js b/RNTester/js/RNTesterSettingSwitchRow.js index ab33ff19cb7b15..8ef45f4bf45ead 100644 --- a/RNTester/js/RNTesterSettingSwitchRow.js +++ b/RNTester/js/RNTesterSettingSwitchRow.js @@ -18,7 +18,7 @@ const Text = require('Text'); const RNTesterStatePersister = require('./RNTesterStatePersister'); const View = require('View'); -class RNTesterSettingSwitchRow extends React.Component { +class RNTesterSettingSwitchRow extends React.Component<$FlowFixMeProps, $FlowFixMeState> { componentWillReceiveProps(newProps) { const {onEnable, onDisable, persister} = this.props; if (newProps.persister.state !== persister.state) { diff --git a/RNTester/js/RNTesterStatePersister.js b/RNTester/js/RNTesterStatePersister.js index a8adcf5bf2fecb..ec0d0cae379f01 100644 --- a/RNTester/js/RNTesterStatePersister.js +++ b/RNTester/js/RNTesterStatePersister.js @@ -30,15 +30,18 @@ export type PassProps = { * usage. */ function createContainer( - Component: ReactClass}>, + Component: React.ComponentType}>, spec: { cacheKeySuffix: (props: Props) => string, getInitialState: (props: Props) => State, version?: string, }, -): ReactClass { - return class ComponentWithPersistedState extends React.Component { - props: Props; +): React.ComponentType { + return class ComponentWithPersistedState extends React.Component { + /* $FlowFixMe(>=0.53.0 site=react_native_fb) This comment suppresses an + * error when upgrading Flow's support for React. Common errors found when + * upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ static displayName = `RNTesterStatePersister(${Component.displayName || Component.name})`; state = {value: spec.getInitialState(this.props)}; _cacheKey = `RNTester:${spec.version || 'v1'}:${spec.cacheKeySuffix(this.props)}`; @@ -56,7 +59,7 @@ function createContainer( return {value}; }); }; - render(): React.Element<*> { + render(): React.Node { return ( { render() { return ( diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js index eff1ddfdfe12ef..cde83d0908d2a4 100644 --- a/RNTester/js/RTLExample.js +++ b/RNTester/js/RTLExample.js @@ -114,12 +114,10 @@ function AnimationBlock(props) { ); } -class RTLExample extends React.Component { +class RTLExample extends React.Component { static title = 'RTLExample'; static description = 'Examples to show how to apply components to RTL layout.'; - state: State; - props: any; _panResponder: Object; constructor(props: Object) { diff --git a/RNTester/js/RootViewSizeFlexibilityExampleApp.js b/RNTester/js/RootViewSizeFlexibilityExampleApp.js index 2a20876b3a05a4..296a22dc1b3aae 100644 --- a/RNTester/js/RootViewSizeFlexibilityExampleApp.js +++ b/RNTester/js/RootViewSizeFlexibilityExampleApp.js @@ -20,9 +20,7 @@ const { View, } = ReactNative; -class RootViewSizeFlexibilityExampleApp extends React.Component { - state: any; - +class RootViewSizeFlexibilityExampleApp extends React.Component<{toggled: boolean}, any> { constructor(props: {toggled: boolean}) { super(props); this.state = { toggled: false }; @@ -47,7 +45,6 @@ class RootViewSizeFlexibilityExampleApp extends React.Component { ); } - } const styles = StyleSheet.create({ diff --git a/RNTester/js/ScrollViewExample.js b/RNTester/js/ScrollViewExample.js index 361df6568cd849..1736d466a709bf 100644 --- a/RNTester/js/ScrollViewExample.js +++ b/RNTester/js/ScrollViewExample.js @@ -35,6 +35,10 @@ exports.examples = [ return ( =0.53.0 site=react_native_fb) This comment suppresses + * an error when upgrading Flow's support for React. Common errors + * found when upgrading Flow's React support are documented at + * https://fburl.com/eq7bs81w */ ref={(scrollView) => { _scrollView = scrollView; }} automaticallyAdjustContentInsets={false} onScroll={() => { console.log('onScroll!'); }} @@ -73,6 +77,10 @@ exports.examples = [ {title} =0.53.0 site=react_native_fb) This comment + * suppresses an error when upgrading Flow's support for React. + * Common errors found when upgrading Flow's React support are + * documented at https://fburl.com/eq7bs81w */ ref={(scrollView) => { _scrollView = scrollView; }} automaticallyAdjustContentInsets={false} horizontal={true} @@ -109,7 +117,7 @@ exports.examples = [ } }]; -class Thumb extends React.Component { +class Thumb extends React.Component<$FlowFixMeProps, $FlowFixMeState> { shouldComponentUpdate(nextProps, nextState) { return false; } diff --git a/RNTester/js/ScrollViewSimpleExample.js b/RNTester/js/ScrollViewSimpleExample.js index f1e18563acc0c4..9988e902e17f99 100644 --- a/RNTester/js/ScrollViewSimpleExample.js +++ b/RNTester/js/ScrollViewSimpleExample.js @@ -22,7 +22,7 @@ var { var NUM_ITEMS = 20; -class ScrollViewSimpleExample extends React.Component { +class ScrollViewSimpleExample extends React.Component<{}> { static title = ''; static description = 'Component that enables scrolling through child components.'; diff --git a/RNTester/js/SectionListExample.js b/RNTester/js/SectionListExample.js index 7b9d3df2118121..51708951506a99 100644 --- a/RNTester/js/SectionListExample.js +++ b/RNTester/js/SectionListExample.js @@ -68,7 +68,7 @@ const CustomSeparatorComponent = ({highlighted, text}) => ( ); -class SectionListExample extends React.PureComponent { +class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> { static title = ''; static description = 'Performant, scrollable list of data.'; diff --git a/RNTester/js/SegmentedControlIOSExample.js b/RNTester/js/SegmentedControlIOSExample.js index 1634ce47c60aa2..e6c4c054f0b897 100644 --- a/RNTester/js/SegmentedControlIOSExample.js +++ b/RNTester/js/SegmentedControlIOSExample.js @@ -20,7 +20,7 @@ var { StyleSheet } = ReactNative; -class BasicSegmentedControlExample extends React.Component { +class BasicSegmentedControlExample extends React.Component<{}> { render() { return ( @@ -35,7 +35,7 @@ class BasicSegmentedControlExample extends React.Component { } } -class PreSelectedSegmentedControlExample extends React.Component { +class PreSelectedSegmentedControlExample extends React.Component<{}> { render() { return ( @@ -47,7 +47,7 @@ class PreSelectedSegmentedControlExample extends React.Component { } } -class MomentarySegmentedControlExample extends React.Component { +class MomentarySegmentedControlExample extends React.Component<{}> { render() { return ( @@ -59,7 +59,7 @@ class MomentarySegmentedControlExample extends React.Component { } } -class DisabledSegmentedControlExample extends React.Component { +class DisabledSegmentedControlExample extends React.Component<{}> { render() { return ( @@ -71,7 +71,7 @@ class DisabledSegmentedControlExample extends React.Component { } } -class ColorSegmentedControlExample extends React.Component { +class ColorSegmentedControlExample extends React.Component<{}> { render() { return ( @@ -86,7 +86,7 @@ class ColorSegmentedControlExample extends React.Component { } } -class EventSegmentedControlExample extends React.Component { +class EventSegmentedControlExample extends React.Component<{}, $FlowFixMeState> { state = { values: ['One', 'Two', 'Three'], value: 'Not selected', diff --git a/RNTester/js/SetPropertiesExampleApp.js b/RNTester/js/SetPropertiesExampleApp.js index 81f90ddb0af824..a3b5f90142454e 100644 --- a/RNTester/js/SetPropertiesExampleApp.js +++ b/RNTester/js/SetPropertiesExampleApp.js @@ -18,7 +18,7 @@ const { View, } = ReactNative; -class SetPropertiesExampleApp extends React.Component { +class SetPropertiesExampleApp extends React.Component<$FlowFixMeProps> { render() { const wrapperStyle = { diff --git a/RNTester/js/ShareExample.js b/RNTester/js/ShareExample.js index 3cb520b87f277f..79f1d0478fed10 100644 --- a/RNTester/js/ShareExample.js +++ b/RNTester/js/ShareExample.js @@ -31,11 +31,10 @@ exports.examples = [{ } }]; -class ShareMessageExample extends React.Component { +class ShareMessageExample extends React.Component<$FlowFixMeProps, any> { _shareMessage: Function; _shareText: Function; _showResult: Function; - state: any; constructor(props) { super(props); @@ -104,7 +103,6 @@ class ShareMessageExample extends React.Component { this.setState({result: 'dismissed'}); } } - } diff --git a/RNTester/js/SliderExample.js b/RNTester/js/SliderExample.js index 5b8e48d0ac8920..906c9092258389 100644 --- a/RNTester/js/SliderExample.js +++ b/RNTester/js/SliderExample.js @@ -20,7 +20,7 @@ var { View, } = ReactNative; -class SliderExample extends React.Component { +class SliderExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { static defaultProps = { value: 0, }; @@ -43,7 +43,7 @@ class SliderExample extends React.Component { } } -class SlidingCompleteExample extends React.Component { +class SlidingCompleteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { slideCompletionValue: 0, slideCompletionCount: 0, diff --git a/RNTester/js/SnapshotExample.js b/RNTester/js/SnapshotExample.js index f8ab43ef38d614..d0d9c172b7dd83 100644 --- a/RNTester/js/SnapshotExample.js +++ b/RNTester/js/SnapshotExample.js @@ -16,7 +16,7 @@ const React = require('react'); const ReactNative = require('react-native'); const {Alert, Image, StyleSheet, Text, View} = ReactNative; -class ScreenshotExample extends React.Component { +class ScreenshotExample extends React.Component<{}, $FlowFixMeState> { state = { uri: undefined, }; diff --git a/RNTester/js/StatusBarExample.js b/RNTester/js/StatusBarExample.js index 6524a8c3590003..bb84bd05b29bc4 100644 --- a/RNTester/js/StatusBarExample.js +++ b/RNTester/js/StatusBarExample.js @@ -46,7 +46,7 @@ function getValue(values: Array, index: number): T { return values[index % values.length]; } -class StatusBarHiddenExample extends React.Component { +class StatusBarHiddenExample extends React.Component<{}, $FlowFixMeState> { state = { animated: true, hidden: false, @@ -107,7 +107,7 @@ class StatusBarHiddenExample extends React.Component { } } -class StatusBarStyleExample extends React.Component { +class StatusBarStyleExample extends React.Component<{}, $FlowFixMeState> { _barStyleIndex = 0; _onChangeBarStyle = () => { @@ -150,7 +150,7 @@ class StatusBarStyleExample extends React.Component { } } -class StatusBarNetworkActivityExample extends React.Component { +class StatusBarNetworkActivityExample extends React.Component<{}, $FlowFixMeState> { state = { networkActivityIndicatorVisible: false, }; @@ -182,7 +182,7 @@ class StatusBarNetworkActivityExample extends React.Component { } } -class StatusBarBackgroundColorExample extends React.Component { +class StatusBarBackgroundColorExample extends React.Component<{}, $FlowFixMeState> { state = { animated: true, backgroundColor: getValue(colors, 0), @@ -225,7 +225,7 @@ class StatusBarBackgroundColorExample extends React.Component { } } -class StatusBarTranslucentExample extends React.Component { +class StatusBarTranslucentExample extends React.Component<{}, $FlowFixMeState> { state = { translucent: false, }; @@ -254,7 +254,7 @@ class StatusBarTranslucentExample extends React.Component { } } -class StatusBarStaticIOSExample extends React.Component { +class StatusBarStaticIOSExample extends React.Component<{}> { render() { return ( @@ -317,7 +317,7 @@ class StatusBarStaticIOSExample extends React.Component { } } -class StatusBarStaticAndroidExample extends React.Component { +class StatusBarStaticAndroidExample extends React.Component<{}> { render() { return ( diff --git a/RNTester/js/SwitchExample.js b/RNTester/js/SwitchExample.js index 508d5a0356e025..ee6902d43a0db6 100644 --- a/RNTester/js/SwitchExample.js +++ b/RNTester/js/SwitchExample.js @@ -20,7 +20,7 @@ var { View } = ReactNative; -class BasicSwitchExample extends React.Component { +class BasicSwitchExample extends React.Component<{}, $FlowFixMeState> { state = { trueSwitchIsOn: true, falseSwitchIsOn: false, @@ -41,7 +41,7 @@ class BasicSwitchExample extends React.Component { } } -class DisabledSwitchExample extends React.Component { +class DisabledSwitchExample extends React.Component<{}> { render() { return ( @@ -57,7 +57,7 @@ class DisabledSwitchExample extends React.Component { } } -class ColorSwitchExample extends React.Component { +class ColorSwitchExample extends React.Component<{}, $FlowFixMeState> { state = { colorTrueSwitchIsOn: true, colorFalseSwitchIsOn: false, @@ -84,7 +84,7 @@ class ColorSwitchExample extends React.Component { } } -class EventSwitchExample extends React.Component { +class EventSwitchExample extends React.Component<{}, $FlowFixMeState> { state = { eventSwitchIsOn: false, eventSwitchRegressionIsOn: true, diff --git a/RNTester/js/TVEventHandlerExample.js b/RNTester/js/TVEventHandlerExample.js index f7795bdf57fb28..f86a57b29e32b4 100644 --- a/RNTester/js/TVEventHandlerExample.js +++ b/RNTester/js/TVEventHandlerExample.js @@ -31,11 +31,9 @@ exports.examples = [{ render() {return ;} }]; -class TVEventHandlerView extends React.Component { - state: { - lastEventType: string - } - +class TVEventHandlerView extends React.Component<$FlowFixMeProps, { + lastEventType: string +}> { constructor(props) { super(props); this.state = { diff --git a/RNTester/js/TabBarIOSExample.js b/RNTester/js/TabBarIOSExample.js index 3e214d54c034ad..4fe3c80fd8b33c 100644 --- a/RNTester/js/TabBarIOSExample.js +++ b/RNTester/js/TabBarIOSExample.js @@ -22,7 +22,7 @@ var { var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; -class TabBarExample extends React.Component { +class TabBarExample extends React.Component<{}, $FlowFixMeState> { static title = ''; static description = 'Tab-based navigation.'; static displayName = 'TabBarExample'; diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js index ec9ce196300764..b5a61c00e240b8 100644 --- a/RNTester/js/TextExample.android.js +++ b/RNTester/js/TextExample.android.js @@ -22,7 +22,7 @@ var { var RNTesterBlock = require('./RNTesterBlock'); var RNTesterPage = require('./RNTesterPage'); -class Entity extends React.Component { +class Entity extends React.Component<$FlowFixMeProps> { render() { return ( @@ -32,7 +32,7 @@ class Entity extends React.Component { } } -class AttributeToggler extends React.Component { +class AttributeToggler extends React.Component<{}, $FlowFixMeState> { state = {fontWeight: 'bold', fontSize: 15}; toggleWeight = () => { @@ -69,7 +69,7 @@ class AttributeToggler extends React.Component { } } -class TextExample extends React.Component { +class TextExample extends React.Component<{}> { static title = ''; static description = 'Base component for rendering styled text.'; diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js index b8538c7c13f30f..5e5cee093e54e2 100644 --- a/RNTester/js/TextExample.ios.js +++ b/RNTester/js/TextExample.ios.js @@ -23,7 +23,7 @@ var { LayoutAnimation, } = ReactNative; -class Entity extends React.Component { +class Entity extends React.Component<$FlowFixMeProps> { render() { return ( @@ -33,7 +33,7 @@ class Entity extends React.Component { } } -class AttributeToggler extends React.Component { +class AttributeToggler extends React.Component<{}, $FlowFixMeState> { state = {fontWeight: 'bold', fontSize: 15}; toggleWeight = () => { diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js index 35208c6cb6dd35..b90424dc37822c 100644 --- a/RNTester/js/TextInputExample.android.js +++ b/RNTester/js/TextInputExample.android.js @@ -20,7 +20,7 @@ var { StyleSheet, } = ReactNative; -class TextEventsExample extends React.Component { +class TextEventsExample extends React.Component<{}, $FlowFixMeState> { state = { curText: '', prevText: '', @@ -70,7 +70,7 @@ class TextEventsExample extends React.Component { } } -class AutoExpandingTextInput extends React.Component { +class AutoExpandingTextInput extends React.Component<$FlowFixMeProps, $FlowFixMeState> { constructor(props) { super(props); this.state = { @@ -91,7 +91,7 @@ class AutoExpandingTextInput extends React.Component { } } -class RewriteExample extends React.Component { +class RewriteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { constructor(props) { super(props); this.state = {text: ''}; @@ -120,7 +120,7 @@ class RewriteExample extends React.Component { } } -class TokenizedTextExample extends React.Component { +class TokenizedTextExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { constructor(props) { super(props); this.state = {text: 'Hello #World'}; @@ -174,7 +174,7 @@ class TokenizedTextExample extends React.Component { } } -class BlurOnSubmitExample extends React.Component { +class BlurOnSubmitExample extends React.Component<{}> { focusNextField = (nextField) => { this.refs[nextField].focus(); }; @@ -228,7 +228,7 @@ class BlurOnSubmitExample extends React.Component { } } -class ToggleDefaultPaddingExample extends React.Component { +class ToggleDefaultPaddingExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { constructor(props) { super(props); this.state = {hasPadding: false}; @@ -253,9 +253,7 @@ type SelectionExampleState = { value: string; }; -class SelectionExample extends React.Component { - state: SelectionExampleState; - +class SelectionExample extends React.Component<$FlowFixMeProps, SelectionExampleState> { _textInput: any; constructor(props) { @@ -442,11 +440,11 @@ exports.examples = [ }, { title: 'Blur on submit', - render: function(): React.Element { return ; }, + render: function(): React.Element { return ; }, }, { title: 'Event handling', - render: function(): React.Element { return ; }, + render: function(): React.Element { return ; }, }, { title: 'Colors and text inputs', @@ -696,7 +694,7 @@ exports.examples = [ }, { title: 'Toggle Default Padding', - render: function(): React.Element { return ; }, + render: function(): React.Element { return ; }, }, { title: 'Text selection & cursor placement', diff --git a/RNTester/js/TextInputExample.ios.js b/RNTester/js/TextInputExample.ios.js index c2b1e9306d3e74..abb3a80b20e85c 100644 --- a/RNTester/js/TextInputExample.ios.js +++ b/RNTester/js/TextInputExample.ios.js @@ -20,7 +20,7 @@ var { StyleSheet, } = ReactNative; -class WithLabel extends React.Component { +class WithLabel extends React.Component<$FlowFixMeProps> { render() { return ( @@ -33,7 +33,7 @@ class WithLabel extends React.Component { } } -class TextEventsExample extends React.Component { +class TextEventsExample extends React.Component<{}, $FlowFixMeState> { state = { curText: '', prevText: '', @@ -91,9 +91,7 @@ class TextEventsExample extends React.Component { } } -class RewriteExample extends React.Component { - state: any; - +class RewriteExample extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = {text: ''}; @@ -122,9 +120,7 @@ class RewriteExample extends React.Component { } } -class RewriteExampleInvalidCharacters extends React.Component { - state: any; - +class RewriteExampleInvalidCharacters extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = {text: ''}; @@ -145,9 +141,7 @@ class RewriteExampleInvalidCharacters extends React.Component { } } -class TokenizedTextExample extends React.Component { - state: any; - +class TokenizedTextExample extends React.Component<$FlowFixMeProps, any> { constructor(props) { super(props); this.state = {text: 'Hello #World'}; @@ -201,7 +195,7 @@ class TokenizedTextExample extends React.Component { } } -class BlurOnSubmitExample extends React.Component { +class BlurOnSubmitExample extends React.Component<{}> { focusNextField = (nextField) => { this.refs[nextField].focus(); }; @@ -264,9 +258,7 @@ type SelectionExampleState = { value: string; }; -class SelectionExample extends React.Component { - state: SelectionExampleState; - +class SelectionExample extends React.Component<$FlowFixMeProps, SelectionExampleState> { _textInput: any; constructor(props) { @@ -310,9 +302,6 @@ class SelectionExample extends React.Component { return ( =0.53.0 site=react_native_fb) This comment suppresses - * an error found when Flow v0.53 was deployed. To see the error - * delete this comment and run Flow. */ multiline={this.props.multiline} onChangeText={(value) => this.setState({value})} onSelectionChange={this.onSelectionChange.bind(this)} diff --git a/RNTester/js/TimerExample.js b/RNTester/js/TimerExample.js index edaeda4d816bd7..7d4b0ad742f75c 100644 --- a/RNTester/js/TimerExample.js +++ b/RNTester/js/TimerExample.js @@ -30,7 +30,7 @@ function burnCPU(milliseconds) { while (performanceNow() < (start + milliseconds)) {} } -class RequestIdleCallbackTester extends React.Component { +class RequestIdleCallbackTester extends React.Component<{}, $FlowFixMeState> { state = { message: '-', }; @@ -248,7 +248,7 @@ exports.examples = [ description: 'Execute function fn every t milliseconds until cancelled ' + 'or component is unmounted.', render: function(): React.Element { - class IntervalExample extends React.Component { + class IntervalExample extends React.Component<{}, $FlowFixMeState> { state = { showTimer: true, }; diff --git a/RNTester/js/ToastAndroidExample.android.js b/RNTester/js/ToastAndroidExample.android.js index 120d6d1a536ca4..90b5bc6d1b90c7 100644 --- a/RNTester/js/ToastAndroidExample.android.js +++ b/RNTester/js/ToastAndroidExample.android.js @@ -24,7 +24,7 @@ var { var RNTesterBlock = require('RNTesterBlock'); var RNTesterPage = require('RNTesterPage'); -class ToastExample extends React.Component { +class ToastExample extends React.Component<{}, $FlowFixMeState> { static title = 'Toast Example'; static description = 'Example that demonstrates the use of an Android Toast to provide feedback.'; state = {}; diff --git a/RNTester/js/ToolbarAndroidExample.android.js b/RNTester/js/ToolbarAndroidExample.android.js index b337798cd620aa..b7e833ccc41ffb 100644 --- a/RNTester/js/ToolbarAndroidExample.android.js +++ b/RNTester/js/ToolbarAndroidExample.android.js @@ -26,7 +26,7 @@ var RNTesterPage = require('./RNTesterPage'); var Switch = require('Switch'); var ToolbarAndroid = require('ToolbarAndroid'); -class ToolbarAndroidExample extends React.Component { +class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> { static title = ''; static description = 'Examples of using the Android toolbar.'; diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index 838402dbf32b77..4977daafdfcda3 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -136,7 +136,7 @@ exports.examples = [ }, }]; -class TextOnPressBox extends React.Component { +class TextOnPressBox extends React.Component<{}, $FlowFixMeState> { state = { timesPressed: 0, }; @@ -172,7 +172,7 @@ class TextOnPressBox extends React.Component { } } -class TouchableFeedbackEvents extends React.Component { +class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> { state = { eventLog: [], }; @@ -211,7 +211,7 @@ class TouchableFeedbackEvents extends React.Component { }; } -class TouchableDelayEvents extends React.Component { +class TouchableDelayEvents extends React.Component<{}, $FlowFixMeState> { state = { eventLog: [], }; @@ -250,7 +250,7 @@ class TouchableDelayEvents extends React.Component { }; } -class ForceTouchExample extends React.Component { +class ForceTouchExample extends React.Component<{}, $FlowFixMeState> { state = { force: 0, }; @@ -284,7 +284,7 @@ class ForceTouchExample extends React.Component { } } -class TouchableHitSlop extends React.Component { +class TouchableHitSlop extends React.Component<{}, $FlowFixMeState> { state = { timesPressed: 0, }; @@ -326,7 +326,7 @@ class TouchableHitSlop extends React.Component { } } -class TouchableDisabled extends React.Component { +class TouchableDisabled extends React.Component<{}> { render() { return ( diff --git a/RNTester/js/TransformExample.js b/RNTester/js/TransformExample.js index 92d60186a83a26..731ced76edf61a 100644 --- a/RNTester/js/TransformExample.js +++ b/RNTester/js/TransformExample.js @@ -20,7 +20,7 @@ var { View, } = ReactNative; -class Flip extends React.Component { +class Flip extends React.Component<{}, $FlowFixMeState> { state = { theta: new Animated.Value(45), }; diff --git a/RNTester/js/TransparentHitTestExample.js b/RNTester/js/TransparentHitTestExample.js index 267e5abe47d93f..1eb8633b85daca 100644 --- a/RNTester/js/TransparentHitTestExample.js +++ b/RNTester/js/TransparentHitTestExample.js @@ -20,7 +20,7 @@ var { TouchableOpacity, } = ReactNative; -class TransparentHitTestExample extends React.Component { +class TransparentHitTestExample extends React.Component<{}> { render() { return ( diff --git a/RNTester/js/ViewExample.js b/RNTester/js/ViewExample.js index 90a70f3ea70de0..0516462cc9e443 100644 --- a/RNTester/js/ViewExample.js +++ b/RNTester/js/ViewExample.js @@ -34,7 +34,7 @@ var styles = StyleSheet.create({ }, }); -class ViewBorderStyleExample extends React.Component { +class ViewBorderStyleExample extends React.Component<{}, $FlowFixMeState> { state = { showBorder: true }; @@ -73,7 +73,7 @@ class ViewBorderStyleExample extends React.Component { }; } -class ZIndexExample extends React.Component { +class ZIndexExample extends React.Component<{}, $FlowFixMeState> { state = { flipped: false }; diff --git a/RNTester/js/WebViewExample.js b/RNTester/js/WebViewExample.js index dd1521e7deaeed..8b45084daed157 100644 --- a/RNTester/js/WebViewExample.js +++ b/RNTester/js/WebViewExample.js @@ -31,7 +31,7 @@ var TEXT_INPUT_REF = 'urlInput'; var WEBVIEW_REF = 'webview'; var DEFAULT_URL = 'https://m.facebook.com'; -class WebViewExample extends React.Component { +class WebViewExample extends React.Component<{}, $FlowFixMeState> { state = { url: DEFAULT_URL, status: 'No Page Loaded', @@ -154,7 +154,7 @@ class WebViewExample extends React.Component { }; } -class Button extends React.Component { +class Button extends React.Component<$FlowFixMeProps> { _handlePress = () => { if (this.props.enabled !== false && this.props.onPress) { this.props.onPress(); @@ -172,7 +172,7 @@ class Button extends React.Component { } } -class ScaledWebView extends React.Component { +class ScaledWebView extends React.Component<{}, $FlowFixMeState> { state = { scalingEnabled: true, }; @@ -206,7 +206,7 @@ class ScaledWebView extends React.Component { } } -class MessagingTest extends React.Component { +class MessagingTest extends React.Component<{}, $FlowFixMeState> { webview = null state = { @@ -225,7 +225,7 @@ class MessagingTest extends React.Component { } } - render(): ReactElement { + render(): React.Node { const {messagesReceivedFromWebView, message} = this.state; return ( @@ -253,7 +253,7 @@ class MessagingTest extends React.Component { } } -class InjectJS extends React.Component { +class InjectJS extends React.Component<{}> { webview = null; injectJS = () => { const script = 'document.write("Injected JS ")'; // eslint-disable-line quotes @@ -459,7 +459,7 @@ exports.examples = [ }, { title: 'Messaging Test', - render(): ReactElement { return ; } + render(): React.Element { return ; } }, { title: 'Inject JavaScript', diff --git a/RNTester/js/XHRExampleBinaryUpload.js b/RNTester/js/XHRExampleBinaryUpload.js index 2d57ff077d9515..adf854d235aeef 100644 --- a/RNTester/js/XHRExampleBinaryUpload.js +++ b/RNTester/js/XHRExampleBinaryUpload.js @@ -51,7 +51,7 @@ That is my proper element. `; -class XHRExampleBinaryUpload extends React.Component { +class XHRExampleBinaryUpload extends React.Component<{}, $FlowFixMeState> { static handlePostTestServerUpload(xhr: XMLHttpRequest) { if (xhr.status !== 200) { diff --git a/RNTester/js/XHRExampleCookies.js b/RNTester/js/XHRExampleCookies.js index 0fe3d43c4157f1..e9328af09f75c4 100644 --- a/RNTester/js/XHRExampleCookies.js +++ b/RNTester/js/XHRExampleCookies.js @@ -23,8 +23,7 @@ var { var RCTNetworking = require('RCTNetworking'); -class XHRExampleCookies extends React.Component { - state: any; +class XHRExampleCookies extends React.Component { cancelled: boolean; constructor(props: any) { diff --git a/RNTester/js/XHRExampleDownload.js b/RNTester/js/XHRExampleDownload.js index 1b6e172affacac..e636ab298aaff0 100644 --- a/RNTester/js/XHRExampleDownload.js +++ b/RNTester/js/XHRExampleDownload.js @@ -32,7 +32,7 @@ function roundKilo(value: number): number { return Math.round(value / 1000); } -class ProgressBar extends React.Component { +class ProgressBar extends React.Component<$FlowFixMeProps> { render() { if (Platform.OS === 'android') { return ( @@ -51,7 +51,7 @@ class ProgressBar extends React.Component { } } -class XHRExampleDownload extends React.Component { +class XHRExampleDownload extends React.Component<{}, Object> { state: Object = { downloading: false, // set by onreadystatechange diff --git a/RNTester/js/XHRExampleFetch.js b/RNTester/js/XHRExampleFetch.js index 3a7bee0703162e..7917bfe11b8350 100644 --- a/RNTester/js/XHRExampleFetch.js +++ b/RNTester/js/XHRExampleFetch.js @@ -22,8 +22,7 @@ var { } = ReactNative; -class XHRExampleFetch extends React.Component { - state: any; +class XHRExampleFetch extends React.Component { responseURL: ?string; responseHeaders: ?Object; diff --git a/RNTester/js/XHRExampleFormData.js b/RNTester/js/XHRExampleFormData.js index 389ff77527616e..7d9409853207bb 100644 --- a/RNTester/js/XHRExampleFormData.js +++ b/RNTester/js/XHRExampleFormData.js @@ -31,7 +31,7 @@ const XHRExampleBinaryUpload = require('./XHRExampleBinaryUpload'); const PAGE_SIZE = 20; -class XHRExampleFormData extends React.Component { +class XHRExampleFormData extends React.Component { state: Object = { isUploading: false, uploadProgress: null, diff --git a/RNTester/js/XHRExampleOnTimeOut.js b/RNTester/js/XHRExampleOnTimeOut.js index 212b624d24f848..7d30f0d7a2b041 100644 --- a/RNTester/js/XHRExampleOnTimeOut.js +++ b/RNTester/js/XHRExampleOnTimeOut.js @@ -20,8 +20,7 @@ var { View, } = ReactNative; -class XHRExampleOnTimeOut extends React.Component { - state: any; +class XHRExampleOnTimeOut extends React.Component { xhr: XMLHttpRequest; constructor(props: any) { diff --git a/RNTester/js/createExamplePage.js b/RNTester/js/createExamplePage.js index edb234be590bac..55c9a666661ddf 100644 --- a/RNTester/js/createExamplePage.js +++ b/RNTester/js/createExamplePage.js @@ -18,9 +18,9 @@ const RNTesterExampleContainer = require('./RNTesterExampleContainer'); import type { ExampleModule } from 'ExampleTypes'; var createExamplePage = function(title: ?string, exampleModule: ExampleModule) - : ReactClass { + : React.ComponentType { - class ExamplePage extends React.Component { + class ExamplePage extends React.Component<{}> { render() { return ; } diff --git a/ReactAndroid/src/androidTest/js/NativeIdTestModule.js b/ReactAndroid/src/androidTest/js/NativeIdTestModule.js index d1bf8c57df08fb..711f2ddce99b5a 100644 --- a/ReactAndroid/src/androidTest/js/NativeIdTestModule.js +++ b/ReactAndroid/src/androidTest/js/NativeIdTestModule.js @@ -29,7 +29,7 @@ const View = require('View'); * - The app renders fine * - The nativeID property is passed to the native views */ -class NativeIdTestApp extends React.Component { +class NativeIdTestApp extends React.Component<{}> { render() { const uri = 'data:image/gif;base64,' + 'R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapy' + diff --git a/flow/react.js b/flow/react.js deleted file mode 100644 index 61d2b914ca32fa..00000000000000 --- a/flow/react.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @flow - */ - -// Temporary patches for React.Component and React.Element. -declare var ReactComponent: typeof React$Component; -declare var ReactElement: typeof React$Element; diff --git a/local-cli/server/server.js b/local-cli/server/server.js index 1711257269b54e..c4c1be0bfc29ff 100644 --- a/local-cli/server/server.js +++ b/local-cli/server/server.js @@ -48,7 +48,6 @@ function server(argv: mixed, config: RNConfig, allArgs: Object) { type: 'initialize_packager_done', }); }; - // $FlowFixMe: Remove me to see the error. const runServerArgs: RunServerArgs = args; /* $FlowFixMe: ConfigT shouldn't be extendable. */ const configT: ConfigT = config; diff --git a/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js b/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js index cc272e82a4382b..eb6c96fce6a39e 100644 --- a/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js +++ b/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js @@ -46,7 +46,7 @@ const KeyboardSpacer = () => ( Platform.OS === 'ios' ? : null ); -class KeyboardSpacerIOS extends Component { +class KeyboardSpacerIOS extends Component { static propTypes = { offset: PropTypes.number, }; diff --git a/local-cli/templates/HelloWorld/App.js b/local-cli/templates/HelloWorld/App.js index 659579088c7134..d4ae45c1999970 100644 --- a/local-cli/templates/HelloWorld/App.js +++ b/local-cli/templates/HelloWorld/App.js @@ -19,7 +19,7 @@ const instructions = Platform.select({ 'Shake or press menu button for dev menu', }); -export default class App extends Component { +export default class App extends Component<{}> { render() { return (