diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index 20da3e3a5c..1c4d3395f0 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -19,6 +19,8 @@
///
+import {type} from "../doctrine/index";
+import NullableType = type.NullableType;
export type MeasureOnSuccessCallback = (
x: number,
y: number,
@@ -3409,25 +3411,62 @@ export interface ImageStatic extends NativeMethodsMixin, React.ComponentClass>
}
+export interface ViewToken {
+ item: any;
+ key: string;
+ index: number | null;
+ isViewable: boolean;
+ section?: any;
+}
+
+export interface ViewabilityConfig {
+ /**
+ * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
+ * viewability callback will be fired. A high number means that scrolling through content without
+ * stopping will not mark the content as viewable.
+ */
+ minimumViewTime?: number;
+
+ /**
+ * Percent of viewport that must be covered for a partially occluded item to count as
+ * "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
+ * that a single pixel in the viewport makes the item viewable, and a value of 100 means that
+ * an item must be either entirely visible or cover the entire viewport to count as viewable.
+ */
+ viewAreaCoveragePercentThreshold?: number;
+
+ /**
+ * Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
+ * rather than the fraction of the viewable area it covers.
+ */
+ itemVisiblePercentThreshold?: number;
+
+ /**
+ * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
+ * render.
+ */
+ waitForInteraction?: boolean;
+}
+
/**
* @see https://facebook.github.io/react-native/docs/flatlist.html#props
*/
-export interface FlatListProperties extends React.Props {
+export interface FlatListProperties extends React.Props> {
/**
* Rendered in between each item, but not at the top or bottom
*/
- ItemSeparatorComponent?: React.ComponentClass
+ ItemSeparatorComponent?: React.ComponentClass | null
/**
* Rendered at the bottom of all the items.
*/
- ListFooterComponent?: React.ComponentClass
+ ListFooterComponent?: React.ComponentClass | null
/**
* Rendered at the top of all the items.
*/
- ListHeaderComponent?: React.ComponentClass
+ ListHeaderComponent?: React.ComponentClass | null
/**
* Optional custom style for multi-item rows generated when numColumns > 1
@@ -3438,7 +3477,7 @@ export interface FlatListProperties extends React.Props {
* For simplicity, data is just a plain array. If you want to use something else,
* like an immutable list, use the underlying VirtualizedList directly.
*/
- data?: any[]
+ data: ItemT[] | null;
/**
* `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
@@ -3452,7 +3491,7 @@ export interface FlatListProperties extends React.Props {
* Remember to include separator length (height or width) in your offset calculation if you specify
* `ItemSeparatorComponent`.
*/
- getItemLayout?: (data: Array, index: number) => {length: number, offset: number, index: number}
+ getItemLayout?: (data: Array | null, index: number) => {length: number, offset: number, index: number}
/**
* If true, renders items next to each other horizontally instead of stacked vertically.
@@ -3464,7 +3503,7 @@ export interface FlatListProperties extends React.Props {
* 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: any, index: number) => string
+ keyExtractor?: (item: ItemT, index: number) => string
legacyImplementation?: boolean
@@ -3477,7 +3516,7 @@ export interface FlatListProperties extends React.Props {
/**
* Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
*/
- onEndReached?: (info: {distanceFromEnd: number}) => void
+ onEndReached?: ((info: {distanceFromEnd: number}) => void) | null
/**
* How far from the end (in units of visible length of the list) the bottom edge of the
@@ -3485,23 +3524,23 @@ export interface FlatListProperties extends React.Props {
* 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
+ onEndReachedThreshold?: number | null
/**
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
* Make sure to also set the refreshing prop correctly.
*/
- onRefresh?: () => void
+ onRefresh?: (() => void) | null
/**
* Called when the viewability of rows changes, as defined by the `viewablePercentThreshold` prop.
*/
- onViewableItemsChanged?: (info: {viewableItems: Array, changed: Array}) => void
+ onViewableItemsChanged?: ((info: {viewableItems: Array, changed: Array}) => void) | null
/**
* Set this true while waiting for new data from a refresh.
*/
- refreshing?: boolean
+ refreshing?: boolean | null
/**
* Takes an item from data and renders it into the list. Typical usage:
@@ -3516,17 +3555,17 @@ export interface FlatListProperties extends React.Props {
* ```
* Provides additional metadata like `index` if you need it.
*/
- renderItem: (info: any) => React.ReactElement
+ renderItem: (info: ItemT) => React.ReactElement | null
/**
* See `ViewabilityHelper` for flow type and further documentation.
*/
viewabilityConfig?: any
- ref?: React.Ref
+ ref?: React.Ref & ViewStatic>
}
-export interface FlatListStatic extends React.ComponentClass {
+export interface FlatListStatic extends React.ComponentClass> {
/**
* Exports some data, e.g. for perf investigations or analytics.
@@ -3541,25 +3580,25 @@ export interface FlatListStatic extends React.ComponentClass
/**
* Scrolls to the end of the content. May be janky without `getItemLayout` prop.
*/
- scrollToEnd:(params?: {animated?: boolean}) => void
+ scrollToEnd: (params?: {animated?: boolean}) => void
/**
* Scrolls to the item at a 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.
* May be janky without `getItemLayout` prop.
*/
- scrollToIndex:(params: {animated?: boolean, index: number, viewPosition?: number}) => void
+ scrollToIndex: (params: {animated?: boolean, index: number, viewPosition?: number}) => void
/**
* Requires linear scan through data - use `scrollToIndex` instead if possible.
* May be janky without `getItemLayout` prop.
*/
- scrollToItem:(params: {animated?: boolean, index: number, viewPosition?: number}) => void
+ scrollToItem: (params: {animated?: boolean, index: number, viewPosition?: number}) => void
/**
* Scroll to a specific content pixel offset, like a normal `ScrollView`.
*/
- scrollToOffset:(params: {animated?: boolean, offset: number}) => void
+ scrollToOffset: (params: {animated?: boolean, offset: number}) => void
/**
* Tells the list an interaction has occured, which should trigger viewability calculations,
@@ -8365,8 +8404,8 @@ export type Image = ImageStatic
export var ImagePickerIOS: ImagePickerIOSStatic
export type ImagePickerIOS = ImagePickerIOSStatic
-export var FlatList: FlatListStatic
-export type FlatList = FlatListStatic
+export var FlatList: FlatListStatic
+export type FlatList = FlatListStatic
export var LayoutAnimation: LayoutAnimationStatic
export type LayoutAnimation = LayoutAnimationStatic
diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 45a5b510e9..5d8c8245e1 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -25,6 +25,7 @@ import {
View,
ViewStyle,
ViewPagerAndroid,
+ FlatList,
findNodeHandle
} from 'react-native';
@@ -191,3 +192,12 @@ profiledJSONParse('[]')
InteractionManager.runAfterInteractions(() => {
// ...
}).then(() => 'done')
+
+export class FlatListTest {
+ render() {
+ {itemInfo}}
+ />
+ }
+}