Skip to content

Commit

Permalink
Allow FlatList to take generics.
Browse files Browse the repository at this point in the history
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=... />
  • Loading branch information
stephenh committed Apr 15, 2018
1 parent 8177745 commit c514110
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 46 deletions.
89 changes: 43 additions & 46 deletions types/react-native/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
//
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/// <reference types="react" />

/// <reference path="globals.d.ts" />

import * as React from 'react';

export type MeasureOnSuccessCallback = (
x: number,
y: number,
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions types/react-native/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down

0 comments on commit c514110

Please sign in to comment.