diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index a6bb0d7dba..73f638fe2c 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -4,6 +4,7 @@ // Fedor Nezhivoi // HuHuanming // Kyle Roach +// Tim Wang // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -3451,6 +3452,22 @@ export interface ViewabilityConfig { /** * @see https://facebook.github.io/react-native/docs/flatlist.html#props */ + +interface ListRenderItemInfo { + + item: ItemT + + index: number + + separators: { + highlight: () => void, + unhighlight: () => void, + updateProps: (select: 'leading' | 'trailing', newProps: any) => void, + }, +} + +type ListRenderItem = (info: ListRenderItemInfo) => React.ReactElement | null + export interface FlatListProperties extends ScrollViewProperties { /** @@ -3585,7 +3602,7 @@ export interface FlatListProperties extends ScrollViewProperties { * ``` * Provides additional metadata like `index` if you need it. */ - renderItem: (info: ItemT) => React.ReactElement | null + renderItem: ListRenderItem /** * See `ViewabilityHelper` for flow type and further documentation. @@ -3643,20 +3660,26 @@ export interface FlatListStatic extends React.ComponentClass void } -export interface SectionListData { +/** + * @see https://facebook.github.io/react-native/docs/sectionlist.html + */ +export interface SectionBase { data: ItemT[] - key: string + key?: string - renderItem?: (info: {item: ItemT, index: number}) => React.ReactElement | null + renderItem?: ListRenderItem + + ItemSeparatorComponent?: React.ComponentClass | null keyExtractor?: (item: ItemT, index: number) => string } -/** - * @see https://facebook.github.io/react-native/docs/sectionlist.html - */ +export interface SectionListData extends SectionBase { + [key: string]: any; +} + export interface SectionListProperties extends ScrollViewProperties { /** @@ -3712,7 +3735,7 @@ export interface SectionListProperties extends ScrollViewProperties { /** * Default renderer for every item in every section. Can be over-ridden on a per-section basis. */ - renderItem?: (info: {item: ItemT, index: number}) => React.ReactElement | null + renderItem?: ListRenderItem /** * Rendered at the top of each section. Sticky headers are not yet supported. diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 5cf036d433..29ff38508a 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -31,7 +31,9 @@ import { ViewStyle, ViewPagerAndroid, FlatList, + FlatListProperties, SectionList, + SectionListProperties, findNodeHandle, ScrollView, ScrollViewProps, @@ -205,29 +207,35 @@ InteractionManager.runAfterInteractions(() => { // ... }).then(() => 'done') -export class FlatListTest { +export class FlatListTest extends React.Component, {}> { render() { - {itemInfo}} - /> + return ( + {info.item}} + /> + ); } } -export class SectionListTest { +export class SectionListTest extends React.Component, {}> { render() { var sections = [{ - key: 's1', - data: ['A', 'B', 'C', 'D', 'E'] + title: 'Section 1', + data: ['A', 'B', 'C', 'D', 'E'], }, { - key: 's2', - data: ['A2', 'B2', 'C2', 'D2', 'E2'] + title: 'Section 2', + data: ['A2', 'B2', 'C2', 'D2', 'E2'], + renderItem: (info: { item: string }) => {info.item} }]; - {info.item}} - /> + return ( + {section.title}} + renderItem={(info: { item: string }) => {info.item}} + /> + ); } }