diff --git a/.flowconfig b/.flowconfig index 78c0582045e172..db960b5f1b41ab 100644 --- a/.flowconfig +++ b/.flowconfig @@ -48,6 +48,9 @@ Libraries/react-native/react-native-interface.js [options] module.system=haste +esproposal.class_static_fields=enable +esproposal.class_instance_fields=enable + munge_underscores=true module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' diff --git a/Examples/2048/Game2048.js b/Examples/2048/Game2048.js index 239d1dadeca4f9..a6c97a3e3edaa5 100644 --- a/Examples/2048/Game2048.js +++ b/Examples/2048/Game2048.js @@ -53,6 +53,8 @@ class Board extends React.Component { } class Tile extends React.Component { + state: any; + static _getPosition(index): number { return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN); } @@ -147,6 +149,7 @@ class GameEndOverlay extends React.Component { class Game2048 extends React.Component { startX: number; startY: number; + state: any; constructor(props: {}) { super(props); diff --git a/Examples/UIExplorer/AlertIOSExample.js b/Examples/UIExplorer/AlertIOSExample.js index a52c1ab79521c3..d7f0bcf0d464fa 100644 --- a/Examples/UIExplorer/AlertIOSExample.js +++ b/Examples/UIExplorer/AlertIOSExample.js @@ -37,7 +37,7 @@ exports.examples = [{ }, { title: 'Prompt Options', - render(): React.Component { + render(): ReactElement { return <PromptOptions />; } }, @@ -85,9 +85,13 @@ exports.examples = [{ }]; class PromptOptions extends React.Component { + state: any; + customButtons: Array<Object>; + constructor(props) { super(props); + // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below this.saveResponse = this.saveResponse.bind(this); this.customButtons = [{ diff --git a/Examples/UIExplorer/AnimatedExample.js b/Examples/UIExplorer/AnimatedExample.js index 5f60963381153e..1068ac00026809 100644 --- a/Examples/UIExplorer/AnimatedExample.js +++ b/Examples/UIExplorer/AnimatedExample.js @@ -39,6 +39,8 @@ exports.examples = [ 'mounts.', render: function() { class FadeInView extends React.Component { + state: any; + constructor(props) { super(props); this.state = { @@ -66,6 +68,8 @@ exports.examples = [ } } class FadeInExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js index d713b5f66d903e..c87bc29823bce4 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js @@ -32,6 +32,10 @@ var CIRCLE_MARGIN = 18; var NUM_CIRCLES = 30; class Circle extends React.Component { + state: any; + props: any; + longTimer: number; + _onLongPress: () => void; _toggleIsActive: () => void; constructor(props: Object): void { @@ -156,6 +160,13 @@ class Circle extends React.Component { } class AnExApp extends React.Component { + state: any; + props: any; + + 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.'; + _onMove: (position: Point) => void; constructor(props: any): void { super(props); @@ -266,10 +277,6 @@ function moveToClosest({activeKey, keys, restLayouts}, position) { } } -AnExApp.title = 'Animated - Gratuitous App'; -AnExApp.description = 'Bunch of Animations - tap a circle to ' + - 'open a view with more animations, or longPress and drag to reorder circles.'; - var styles = StyleSheet.create({ container: { flex: 1, diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js index d3e603738c34d0..39f15a8ec8ea9b 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js @@ -36,6 +36,8 @@ var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => { // static positions }); class AnExBobble extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = {}; diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js index f2c932a2449c1f..596617f1780ec1 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js @@ -26,6 +26,8 @@ var { } = React; class AnExChained extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js index f96acb380a8dc0..e7712cfc52e86e 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js @@ -12,6 +12,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * @providesModule AnExScroll + * @flow */ 'use strict'; @@ -26,12 +27,7 @@ var { } = React; class AnExScroll extends React.Component { - constructor(props) { - super(props); - this.state = { - scrollX: new Animated.Value(0), - }; - } + state: any = { scrollX: new Animated.Value(0) }; render() { var width = this.props.panelWidth; diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js index f25301f7756f40..769a0f79a2d25f 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js @@ -31,6 +31,8 @@ var AnExScroll = require('./AnExScroll'); var AnExTilt = require('./AnExTilt'); class AnExSet extends React.Component { + state: any; + constructor(props: Object) { super(props); function randColor() { diff --git a/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js b/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js index 3cea77917088eb..42b5523c011c75 100644 --- a/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js +++ b/Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js @@ -26,6 +26,8 @@ var { } = React; class AnExTilt extends React.Component { + state: any; + constructor(props: Object) { super(props); this.state = { diff --git a/Examples/UIExplorer/ImageEditingExample.js b/Examples/UIExplorer/ImageEditingExample.js index 1a8c931221d526..868bbd25f333da 100644 --- a/Examples/UIExplorer/ImageEditingExample.js +++ b/Examples/UIExplorer/ImageEditingExample.js @@ -47,10 +47,11 @@ type ImageCropData = { offset: ImageOffset; size: ImageSize; displaySize?: ?ImageSize; - resizeMode?: ?any; + resizeMode?: ?any; }; class SquareImageCropper extends React.Component { + state: any; _isMounted: boolean; _transformData: ImageCropData; diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js index 79e2e94b55ed95..1dba3e14ac8603 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js @@ -36,10 +36,14 @@ const NavigationExampleTabBar = require('./NavigationExampleTabBar'); import type {NavigationParentState} from 'NavigationStateUtils'; +type Action = { + isExitAction?: boolean, +}; + const ExampleExitAction = () => ({ isExitAction: true, }); -ExampleExitAction.match = (action) => ( +ExampleExitAction.match = (action: Action) => ( action && action.isExitAction === true ); @@ -196,6 +200,8 @@ class ExampleTabScreen extends React.Component { ExampleTabScreen = NavigationContainer.create(ExampleTabScreen); class NavigationCompositionExample extends React.Component { + navRootContainer: NavigationRootContainer; + render() { return ( <NavigationRootContainer diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js index f71327572c005d..d0604ec08eae3e 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js @@ -98,6 +98,7 @@ function isGameOver(gameString: string): boolean { } class Cell extends React.Component { + props: any; cellStyle() { switch (this.props.player) { case 'X': @@ -207,6 +208,9 @@ function GameReducer(lastGame: ?string, action: Object): string { } class NavigationTicTacToeExample extends React.Component { + static GameView = TicTacToeGame; + static GameReducer = GameReducer; + static GameActions = GameActions; render() { return ( <NavigationRootContainer @@ -222,9 +226,6 @@ class NavigationTicTacToeExample extends React.Component { ); } } -NavigationTicTacToeExample.GameView = TicTacToeGame; -NavigationTicTacToeExample.GameReducer = GameReducer; -NavigationTicTacToeExample.GameActions = GameActions; const styles = StyleSheet.create({ closeButton: { diff --git a/Examples/UIExplorer/PushNotificationIOSExample.js b/Examples/UIExplorer/PushNotificationIOSExample.js index bd6109f1f09bd4..9fcf8cd1c343ed 100644 --- a/Examples/UIExplorer/PushNotificationIOSExample.js +++ b/Examples/UIExplorer/PushNotificationIOSExample.js @@ -84,6 +84,8 @@ class NotificationExample extends React.Component { } class NotificationPermissionExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = {permissions: null}; @@ -126,7 +128,7 @@ exports.description = 'Apple PushNotification and badge value'; exports.examples = [ { title: 'Badge Number', - render(): React.Component { + render(): ReactElement { PushNotificationIOS.requestPermissions(); return ( @@ -145,13 +147,13 @@ exports.examples = [ }, { title: 'Push Notifications', - render(): React.Component { + render(): ReactElement { return <NotificationExample />; } }, { title: 'Notifications Permissions', - render(): React.Component { + render(): ReactElement { return <NotificationPermissionExample />; } }]; diff --git a/Examples/UIExplorer/RCTRootViewIOSExample.js b/Examples/UIExplorer/RCTRootViewIOSExample.js index 69ecab0a7655a1..5aa56cf881e44d 100644 --- a/Examples/UIExplorer/RCTRootViewIOSExample.js +++ b/Examples/UIExplorer/RCTRootViewIOSExample.js @@ -82,7 +82,7 @@ exports.description = 'Examples that show useful methods when embedding React Na exports.examples = [ { title: 'Updating app properties in runtime', - render(): React.Component { + render(): ReactElement { return ( <AppPropertiesUpdateExample/> ); @@ -90,7 +90,7 @@ exports.examples = [ }, { title: 'RCTRootView\'s size flexibility', - render(): React.Component { + render(): ReactElement { return ( <RootViewSizeFlexibilityExample/> ); diff --git a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js index baab38671791e3..9c48357033fb99 100644 --- a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js +++ b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js @@ -24,6 +24,7 @@ const { } = React; class RootViewSizeFlexibilityExampleApp extends React.Component { + state: any; constructor(props: {toggled: boolean}) { super(props); diff --git a/Examples/UIExplorer/TextInputExample.ios.js b/Examples/UIExplorer/TextInputExample.ios.js index eac262d7706157..239197dbacbb9e 100644 --- a/Examples/UIExplorer/TextInputExample.ios.js +++ b/Examples/UIExplorer/TextInputExample.ios.js @@ -97,6 +97,8 @@ var TextEventsExample = React.createClass({ }); class AutoExpandingTextInput extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: '', height: 0}; @@ -120,6 +122,8 @@ class AutoExpandingTextInput extends React.Component { } class RewriteExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: ''}; @@ -149,6 +153,8 @@ class RewriteExample extends React.Component { } class RewriteExampleInvalidCharacters extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: ''}; @@ -170,6 +176,8 @@ class RewriteExampleInvalidCharacters extends React.Component { } class TokenizedTextExample extends React.Component { + state: any; + constructor(props) { super(props); this.state = {text: 'Hello #World'}; diff --git a/Examples/UIExplorer/XHRExample.ios.js b/Examples/UIExplorer/XHRExample.ios.js index 5d909b3cb7e2ef..a9de630e2c2dde 100644 --- a/Examples/UIExplorer/XHRExample.ios.js +++ b/Examples/UIExplorer/XHRExample.ios.js @@ -33,6 +33,7 @@ var XHRExampleHeaders = require('./XHRExampleHeaders'); var XHRExampleFetch = require('./XHRExampleFetch'); class Downloader extends React.Component { + state: any; xhr: XMLHttpRequest; cancelled: boolean; @@ -120,6 +121,7 @@ class Downloader extends React.Component { var PAGE_SIZE = 20; class FormUploader extends React.Component { + state: any; _isMounted: boolean; _fetchRandomPhoto: () => void; diff --git a/Examples/UIExplorer/XHRExampleCookies.js b/Examples/UIExplorer/XHRExampleCookies.js index 310accc19b6010..d4cfad0e5f1489 100644 --- a/Examples/UIExplorer/XHRExampleCookies.js +++ b/Examples/UIExplorer/XHRExampleCookies.js @@ -26,6 +26,9 @@ var { var RCTNetworking = require('RCTNetworking'); class XHRExampleCookies extends React.Component { + state: any; + cancelled: boolean; + constructor(props: any) { super(props); this.cancelled = false; diff --git a/Examples/UIExplorer/XHRExampleFetch.js b/Examples/UIExplorer/XHRExampleFetch.js index 893dd75912012d..87e8e1bb6465b9 100644 --- a/Examples/UIExplorer/XHRExampleFetch.js +++ b/Examples/UIExplorer/XHRExampleFetch.js @@ -26,6 +26,8 @@ var { class XHRExampleFetch extends React.Component { + state: any; + responseURL: ?string; constructor(props: any) { super(props); diff --git a/Examples/UIExplorer/createExamplePage.js b/Examples/UIExplorer/createExamplePage.js index 55ebd159961dd5..20d62badf73b64 100644 --- a/Examples/UIExplorer/createExamplePage.js +++ b/Examples/UIExplorer/createExamplePage.js @@ -50,6 +50,7 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule) // Hack warning: This is a hack because the www UI explorer requires // renderComponent to be called. var originalRender = React.render; + // $FlowFixMe React.renderComponent was deprecated in 0.12, should this be React.render? var originalRenderComponent = React.renderComponent; var originalIOSRender = ReactNative.render; var originalIOSRenderComponent = ReactNative.renderComponent; diff --git a/Libraries/react-native/react-native.js.flow b/Libraries/react-native/react-native.js.flow index bbe2acdfecc0a9..e7aa8059055cb3 100644 --- a/Libraries/react-native/react-native.js.flow +++ b/Libraries/react-native/react-native.js.flow @@ -23,7 +23,7 @@ // // var ReactNative = {...require('React'), /* additions */} // -var ReactNative = Object.assign(Object.create(require('React')), { +var ReactNative = Object.assign(Object.create(require('react')), { // Components ActivityIndicatorIOS: require('ActivityIndicatorIOS'), ART: require('ReactNativeART'),