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 facebook#5489

Differential Revision: D2856176

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

Author: corbt

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