Allow FlatList to take generics.

This allows both the previous hack of:

const StringFlatList = FlatList as { new(): FlatList<string> };

As well as should support upcoming generics in TSX:

microsoft/TypeScript#6395

E.g. <FlatList<string> data=... renderItem=... />

Author: stephenh

types/react-native/index.d.ts

@@ -22,10 +22,10 @@
 //
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-/// <reference types="react" />
-
 /// <reference path="globals.d.ts" />
 
+import * as React from 'react';
+
 export type MeasureOnSuccessCallback = (
     x: number,
     y: number,
@@ -3635,48 +3635,6 @@ export interface FlatListProperties<ItemT> extends VirtualizedListProperties<Ite
     removeClippedSubviews?: boolean;
 }
 
-export interface FlatListStatic<ItemT> extends React.ComponentClass<FlatListProperties<ItemT>> {
-    /**
-     * Exports some data, e.g. for perf investigations or analytics.
-     */
-    getMetrics: () => {
-        contentLength: number;
-        totalRows: number;
-        renderedRows: number;
-        visibleRows: number;
-    };
-
-    /**
-     * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-     */
-    scrollToEnd: (params?: { animated?: boolean }) => void;
-
-    /**
-     * Scrolls to the item at the specified index such that it is positioned in the viewable area
-     * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-     * Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
-     */
-    scrollToIndex: (params: { animated?: boolean; index: number; viewOffset?: number; viewPosition?: number }) => void;
-
-    /**
-     * Requires linear scan through data - use `scrollToIndex` instead if possible.
-     * May be janky without `getItemLayout` prop.
-     */
-    scrollToItem: (params: { animated?: boolean; item: ItemT; viewPosition?: number }) => void;
-
-    /**
-     * Scroll to a specific content pixel offset, like a normal `ScrollView`.
-     */
-    scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
-
-    /**
-     * Tells the list an interaction has occured, which should trigger viewability calculations,
-     * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called
-     * by taps on items or by navigation actions.
-     */
-    recordInteraction: () => void;
-}
-
 /**
  * @see https://facebook.github.io/react-native/docs/sectionlist.html
  */
@@ -8370,8 +8328,47 @@ export type ImageBackground = ImageBackgroundStatic;
 export var ImagePickerIOS: ImagePickerIOSStatic;
 export type ImagePickerIOS = ImagePickerIOSStatic;
 
-export var FlatList: FlatListStatic<any>;
-export type FlatList<ItemT> = FlatListStatic<ItemT>;
+export class FlatList<ItemT> extends React.Component<FlatListProperties<ItemT>> {
+    /**
+     * Exports some data, e.g. for perf investigations or analytics.
+     */
+    getMetrics(): {
+        contentLength: number;
+        totalRows: number;
+        renderedRows: number;
+        visibleRows: number;
+    };
+
+    /**
+     * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+     */
+    scrollToEnd(params?: { animated?: boolean }): void;
+
+    /**
+     * Scrolls to the item at the specified index such that it is positioned in the viewable area
+     * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+     * Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
+     */
+    scrollToIndex(params: { animated?: boolean; index: number; viewOffset?: number; viewPosition?: number }): void;
+
+    /**
+     * Requires linear scan through data - use `scrollToIndex` instead if possible.
+     * May be janky without `getItemLayout` prop.
+     */
+    scrollToItem(params: { animated?: boolean; item: ItemT; viewPosition?: number }): void;
+
+    /**
+     * Scroll to a specific content pixel offset, like a normal `ScrollView`.
+     */
+    scrollToOffset(params: { animated?: boolean; offset: number }): void;
+
+    /**
+     * Tells the list an interaction has occured, which should trigger viewability calculations,
+     * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called
+     * by taps on items or by navigation actions.
+     */
+    recordInteraction(): void;
+}
 
 export var LayoutAnimation: LayoutAnimationStatic;
 export type LayoutAnimation = LayoutAnimationStatic;

types/react-native/test/index.tsx

@@ -239,6 +239,9 @@ export class FlatListTest extends React.Component<FlatListProperties<number>, {}
     }
 }
 
+const StringFlatList = FlatList as { new(): FlatList<string> };
+<StringFlatList data={["a", "b"]} renderItem={({ item }) => <Text>{item.toUpperCase()}</Text>} />
+
 export class SectionListTest extends React.Component<SectionListProperties<string>, {}> {
     render() {
         const sections = [