Resolve react flow definitions

Summary:Currently, we're not taking advantage of Flow's built-in type definitions for the React library in all cases because Flow's definition uses `declare module react` and this file uses `import('React')`, which Flow thinks is a different library. After this change, the following starts working which didn't before:

```js
import { Component } from 'react-native';

class MyText extends Component<void, {text: string}, void> {
  render() { return <Text>{this.props.text}</Text> }
}

// Correctly throws a Flow error for the missing "text" prop
const renderedText = <MyText />;
```
Closes https://github.com/facebook/react-native/pull/5489

Differential Revision: D2856176

fb-gh-sync-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd
shipit-source-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd

.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'

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);

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 = [{

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 = {

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,

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 = {};

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 = {

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;

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() {

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 = {

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;
 

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

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: {

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 />;
   }
 }];

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/>
     );

Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js

@@ -24,6 +24,7 @@ const {
 } = React;
 
 class RootViewSizeFlexibilityExampleApp extends React.Component {
+  state: any;
 
   constructor(props: {toggled: boolean}) {
     super(props);

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'};

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;

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;

Examples/UIExplorer/XHRExampleFetch.js

@@ -26,6 +26,8 @@ var {
 
 
 class XHRExampleFetch extends React.Component {
+  state: any;
+  responseURL: ?string;
 
   constructor(props: any) {
     super(props);

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;

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'),