-
Notifications
You must be signed in to change notification settings - Fork 24k
/
FlatList.d.ts
251 lines (220 loc) · 8.12 KB
/
FlatList.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import type * as React from 'react';
import type {
ListRenderItem,
ViewToken,
VirtualizedListProps,
} from './VirtualizedList';
import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
import type {StyleProp} from '../StyleSheet/StyleSheet';
import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';
import type {View} from '../Components/View/View';
export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
/**
* Optional custom style for multi-item rows generated when numColumns > 1
*/
columnWrapperStyle?: StyleProp<ViewStyle> | undefined;
/**
* Determines when the keyboard should stay visible after a tap.
* - 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
* - 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
* - 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
* - false, deprecated, use 'never' instead
* - true, deprecated, use 'always' instead
*/
keyboardShouldPersistTaps?:
| boolean
| 'always'
| 'never'
| 'handled'
| undefined;
/**
* An array (or array-like list) of items to render. Other data types can be
* used by targetting VirtualizedList directly.
*/
data: ArrayLike<ItemT> | null | undefined;
/**
* A marker property for telling the list to re-render (since it implements PureComponent).
* If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
* stick it here and treat it immutably.
*/
extraData?: any;
/**
* `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
* content if you know the height of items a priori. getItemLayout is the most efficient,
* and is easy to use if you have fixed height items, for example:
* ```
* getItemLayout={(data, index) => (
* {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
* )}
* ```
* Remember to include separator length (height or width) in your offset calculation if you specify
* `ItemSeparatorComponent`.
*/
getItemLayout?:
| ((
data: Array<ItemT> | null | undefined,
index: number,
) => {length: number; offset: number; index: number})
| undefined;
/**
* If true, renders items next to each other horizontally instead of stacked vertically.
*/
horizontal?: boolean | null | undefined;
/**
* How many items to render in the initial batch
*/
initialNumToRender?: number | undefined;
/**
* Instead of starting at the top with the first item, start at initialScrollIndex
*/
initialScrollIndex?: number | null | undefined;
/**
* 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) | undefined;
/**
* Uses legacy MetroListView instead of default VirtualizedSectionList
*/
legacyImplementation?: boolean | undefined;
/**
* Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout.
* Items should all be the same height - masonry layouts are not supported.
*/
numColumns?: number | undefined;
/**
* Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
*/
onEndReached?: ((info: {distanceFromEnd: number}) => void) | null | undefined;
/**
* How far from the end (in units of visible length of the list) the bottom edge of the
* list must be from the end of the content to trigger the `onEndReached` callback.
* Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
* within half the visible length of the list.
*/
onEndReachedThreshold?: number | null | undefined;
/**
* 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 | undefined;
/**
* Called when the viewability of rows changes, as defined by the `viewablePercentThreshold` prop.
*/
onViewableItemsChanged?:
| ((info: {
viewableItems: Array<ViewToken>;
changed: Array<ViewToken>;
}) => void)
| null
| undefined;
/**
* Set this true while waiting for new data from a refresh.
*/
refreshing?: boolean | null | undefined;
/**
* Takes an item from data and renders it into the list. Typical usage:
* ```
* _renderItem = ({item}) => (
* <TouchableOpacity onPress={() => this._onPress(item)}>
* <Text>{item.title}</Text>
* <TouchableOpacity/>
* );
* ...
* <FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />
* ```
* Provides additional metadata like `index` if you need it.
*/
renderItem: ListRenderItem<ItemT> | null | undefined;
/**
* See `ViewabilityHelper` for flow type and further documentation.
*/
viewabilityConfig?: any;
/**
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
*
* This may improve scroll performance for large lists.
*/
removeClippedSubviews?: boolean | undefined;
/**
* Fades out the edges of the scroll content.
*
* If the value is greater than 0, the fading edges will be set accordingly
* to the current scroll direction and position,
* indicating if there is more content to show.
*
* The default value is 0.
* @platform android
*/
fadingEdgeLength?: number | undefined;
}
export class FlatList<ItemT = any> extends React.Component<
FlatListProps<ItemT>
> {
/**
* Scrolls to the end of the content. May be janky without `getItemLayout` prop.
*/
scrollToEnd: (params?: {animated?: boolean | null | undefined}) => 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 | null | undefined;
index: number;
viewOffset?: number | undefined;
viewPosition?: number | undefined;
}) => void;
/**
* Requires linear scan through data - use `scrollToIndex` instead if possible.
* May be janky without `getItemLayout` prop.
*/
scrollToItem: (params: {
animated?: boolean | null | undefined;
item: ItemT;
viewOffset?: number | undefined;
viewPosition?: number | undefined;
}) => void;
/**
* Scroll to a specific content pixel offset, like a normal `ScrollView`.
*/
scrollToOffset: (params: {
animated?: boolean | null | undefined;
offset: number;
}) => void;
/**
* Tells the list an interaction has occurred, 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;
/**
* Displays the scroll indicators momentarily.
*/
flashScrollIndicators: () => void;
/**
* Provides a handle to the underlying scroll responder.
*/
getScrollResponder: () => JSX.Element | null | undefined;
/**
* Provides a reference to the underlying host component
*/
getNativeScrollRef: () =>
| React.ElementRef<typeof View>
| React.ElementRef<typeof ScrollViewComponent>
| null
| undefined;
getScrollableNode: () => any;
// TODO: use `unknown` instead of `any` for Typescript >= 3.0
setNativeProps: (props: {[key: string]: any}) => void;
}