diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index dd42fc391a..6080851f38 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -3605,6 +3605,85 @@ export interface FlatListStatic extends React.ComponentClass void } +export interface SectionListData { + + data: ItemT[] + + key: string + + renderItem?: (info: {item: ItemT, index: number}) => React.ReactElement | null + + keyExtractor?: (item: ItemT, index: number) => string +} + +/** + * @see https://facebook.github.io/react-native/docs/sectionlist.html + */ +export interface SectionListProperties extends ScrollViewProperties { + + /** + * Rendered in between adjacent Items within each section. + */ + ItemSeparatorComponent?: React.ComponentClass | null + + /** + * Rendered at the very end of the list. + */ + ListFooterComponent?: React.ComponentClass | null + + /** + * Rendered at the very beginning of the list. + */ + ListHeaderComponent?: React.ComponentClass | null + + /** + * Rendered in between each section. + */ + SectionSeparatorComponent?: React.ComponentClass | null + + /** + * Used to extract a unique key for a given item at the specified index. Key is used for caching + * and as the react key to track item re-ordering. The default extractor checks `item.key`, then + * falls back to using the index, like React does. + */ + keyExtractor?: (item: ItemT, index: number) => string + + /** + * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. + * Make sure to also set the refreshing prop correctly. + */ + onRefresh?: (() => void) | null + + /** + * Set this true while waiting for new data from a refresh. + */ + refreshing?: boolean | null + + /** + * 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 + + /** + * Rendered at the top of each section. Sticky headers are not yet supported. + */ + renderSectionHeader?: (info: {section: SectionListData}) => React.ReactElement | null + + /** + * An array of objects with data for each section. + */ + sections: SectionListData[] + + /** + * Render a custom scroll component, e.g. with a differently styled `RefreshControl`. + */ + renderScrollComponent?: (props: ScrollViewProperties) => React.ReactElement +} + +export interface SectionListStatic extends React.ComponentClass> { + +} + /** * @see https://facebook.github.io/react-native/docs/listview.html#props */ @@ -8467,6 +8546,9 @@ export type StatusBar = StatusBarStatic export var ScrollView: ScrollViewStatic export type ScrollView = ScrollViewStatic +export var SectionList: SectionListStatic +export type SectionList = SectionListStatic + export var SnapshotViewIOS: SnapshotViewIOSStatic export type SnapshotViewIOS = SnapshotViewIOSStatic diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 50979908a1..480fa9c486 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -26,6 +26,7 @@ import { ViewStyle, ViewPagerAndroid, FlatList, + SectionList, findNodeHandle } from 'react-native'; @@ -201,3 +202,20 @@ export class FlatListTest { /> } } + +export class SectionListTest { + render() { + var sections = [{ + key: 's1', + data: ['A', 'B', 'C', 'D', 'E'] + }, { + key: 's2', + data: ['A2', 'B2', 'C2', 'D2', 'E2'] + }]; + + {info.item}} + /> + } +}