Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
2018-09-12 01:27:47 +03:00
|
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
2018-02-17 05:24:55 +03:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
|
|
|
* @flow
|
2017-06-13 08:32:58 +03:00
|
|
|
* @format
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2019-10-16 20:03:47 +03:00
|
|
|
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
'use strict';
|
|
|
|
|
2019-05-08 18:44:25 +03:00
|
|
|
const Platform = require('../Utilities/Platform');
|
|
|
|
const deepDiffer = require('../Utilities/differ/deepDiffer');
|
|
|
|
const React = require('react');
|
|
|
|
const View = require('../Components/View/View');
|
|
|
|
const VirtualizedList = require('./VirtualizedList');
|
|
|
|
const StyleSheet = require('../StyleSheet/StyleSheet');
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
|
2018-12-03 10:49:12 +03:00
|
|
|
const invariant = require('invariant');
|
2017-02-10 20:50:11 +03:00
|
|
|
|
2020-11-20 02:52:24 +03:00
|
|
|
import typeof NativeScrollView from '../Components/ScrollView/NativeScrollView';
|
Make ScrollView use ForwardRef
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.
Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />
const innerViewRef = myRef.current.getNativeScrollRef();
innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />
// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();
// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```
Changes:
* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).
Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests
Changelog:
[General] [Changed] - Make ScrollView use forwardRef
Reviewed By: TheSavior
Differential Revision: D19304480
fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
2020-03-27 02:47:39 +03:00
|
|
|
import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
|
2019-05-08 18:44:25 +03:00
|
|
|
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
2017-09-06 04:33:44 +03:00
|
|
|
import type {
|
|
|
|
ViewToken,
|
|
|
|
ViewabilityConfigCallbackPair,
|
2019-05-08 18:44:25 +03:00
|
|
|
} from './ViewabilityHelper';
|
2019-10-11 19:44:48 +03:00
|
|
|
import type {RenderItemType, RenderItemProps} from './VirtualizedList';
|
2017-11-29 21:47:47 +03:00
|
|
|
|
2019-10-11 19:44:48 +03:00
|
|
|
type RequiredProps<ItemT> = {|
|
2019-05-20 17:42:49 +03:00
|
|
|
/**
|
|
|
|
* 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: ?$ReadOnlyArray<ItemT>,
|
2019-10-11 19:44:48 +03:00
|
|
|
|};
|
|
|
|
type OptionalProps<ItemT> = {|
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
2017-04-13 02:57:04 +03:00
|
|
|
* Takes an item from `data` and renders it into the list. Example usage:
|
2017-02-28 13:09:09 +03:00
|
|
|
*
|
2017-04-13 02:57:04 +03:00
|
|
|
* <FlatList
|
|
|
|
* ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
|
|
|
|
* <View style={[style.separator, highlighted && {marginLeft: 0}]} />
|
|
|
|
* )}
|
|
|
|
* data={[{title: 'Title Text', key: 'item1'}]}
|
|
|
|
* renderItem={({item, separators}) => (
|
|
|
|
* <TouchableHighlight
|
|
|
|
* onPress={() => this._onPress(item)}
|
|
|
|
* onShowUnderlay={separators.highlight}
|
|
|
|
* onHideUnderlay={separators.unhighlight}>
|
|
|
|
* <View style={{backgroundColor: 'white'}}>
|
2017-07-07 00:24:26 +03:00
|
|
|
* <Text>{item.title}</Text>
|
2017-04-13 02:57:04 +03:00
|
|
|
* </View>
|
|
|
|
* </TouchableHighlight>
|
|
|
|
* )}
|
|
|
|
* />
|
2017-02-28 13:09:09 +03:00
|
|
|
*
|
2017-04-13 02:57:04 +03:00
|
|
|
* Provides additional metadata like `index` if you need it, as well as a more generic
|
|
|
|
* `separators.updateProps` function which let's you set whatever props you want to change the
|
|
|
|
* rendering of either the leading separator or trailing separator in case the more common
|
|
|
|
* `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
|
|
|
|
* your use-case.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2019-05-20 17:42:49 +03:00
|
|
|
renderItem?: ?RenderItemType<ItemT>,
|
2019-10-11 19:44:48 +03:00
|
|
|
|
2017-03-28 05:51:40 +03:00
|
|
|
/**
|
|
|
|
* Optional custom style for multi-item rows generated when numColumns > 1.
|
|
|
|
*/
|
2018-08-15 02:31:04 +03:00
|
|
|
columnWrapperStyle?: ViewStyleProp,
|
2017-03-28 05:51:40 +03:00
|
|
|
/**
|
|
|
|
* A marker property for telling the list to re-render (since it implements `PureComponent`). If
|
2017-03-29 05:59:20 +03:00
|
|
|
* any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
|
|
|
|
* `data` prop, stick it here and treat it immutably.
|
2017-03-28 05:51:40 +03:00
|
|
|
*/
|
|
|
|
extraData?: any,
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
2017-03-02 08:13:20 +03:00
|
|
|
* `getItemLayout` is an optional optimizations that let 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:
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
2017-03-02 08:13:20 +03:00
|
|
|
* getItemLayout={(data, index) => (
|
|
|
|
* {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
|
|
|
|
* )}
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
2017-08-08 03:54:43 +03:00
|
|
|
* Adding `getItemLayout` can be a great performance boost for lists of several hundred items.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
* Remember to include separator length (height or width) in your offset calculation if you
|
2017-03-13 19:41:30 +03:00
|
|
|
* specify `ItemSeparatorComponent`.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2017-06-13 08:32:58 +03:00
|
|
|
getItemLayout?: (
|
|
|
|
data: ?Array<ItemT>,
|
|
|
|
index: number,
|
2019-11-21 20:38:13 +03:00
|
|
|
) => {
|
|
|
|
length: number,
|
|
|
|
offset: number,
|
|
|
|
index: number,
|
|
|
|
...
|
|
|
|
},
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
|
|
|
* If true, renders items next to each other horizontally instead of stacked vertically.
|
|
|
|
*/
|
|
|
|
horizontal?: ?boolean,
|
2017-03-28 05:51:40 +03:00
|
|
|
/**
|
|
|
|
* How many items to render in the initial batch. This should be enough to fill the screen but not
|
|
|
|
* much more. Note these items will never be unmounted as part of the windowed rendering in order
|
|
|
|
* to improve perceived performance of scroll-to-top actions.
|
|
|
|
*/
|
|
|
|
initialNumToRender: number,
|
2017-04-26 00:44:00 +03:00
|
|
|
/**
|
|
|
|
* Instead of starting at the top with the first item, start at `initialScrollIndex`. This
|
|
|
|
* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
|
|
|
|
* always rendered and immediately renders the items starting at this initial index. Requires
|
|
|
|
* `getItemLayout` to be implemented.
|
|
|
|
*/
|
|
|
|
initialScrollIndex?: ?number,
|
2017-06-13 08:33:00 +03:00
|
|
|
/**
|
|
|
|
* Reverses the direction of scroll. Uses scale transforms of -1.
|
|
|
|
*/
|
|
|
|
inverted?: ?boolean,
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
|
|
|
* Used to extract a unique key for a given item at the specified index. Key is used for caching
|
2017-03-02 08:13:20 +03:00
|
|
|
* 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.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2017-02-17 05:59:55 +03:00
|
|
|
keyExtractor: (item: ItemT, index: number) => string,
|
2017-02-10 20:50:11 +03:00
|
|
|
/**
|
2017-03-18 22:56:24 +03:00
|
|
|
* Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a
|
2017-03-02 08:13:20 +03:00
|
|
|
* `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
|
2017-02-10 20:50:11 +03:00
|
|
|
*/
|
2017-02-11 05:08:21 +03:00
|
|
|
numColumns: number,
|
2019-08-28 04:20:51 +03:00
|
|
|
/**
|
|
|
|
* See `ScrollView` for flow type and further documentation.
|
|
|
|
*/
|
|
|
|
fadingEdgeLength?: ?number,
|
2019-10-11 19:44:48 +03:00
|
|
|
|};
|
|
|
|
|
|
|
|
type FlatListProps<ItemT> = {|
|
|
|
|
...RequiredProps<ItemT>,
|
|
|
|
...OptionalProps<ItemT>,
|
|
|
|
|};
|
|
|
|
|
|
|
|
type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
|
|
|
|
|
|
|
|
export type Props<ItemT> = {
|
|
|
|
...$Diff<
|
|
|
|
VirtualizedListProps,
|
|
|
|
{
|
|
|
|
getItem: $PropertyType<VirtualizedListProps, 'getItem'>,
|
|
|
|
getItemCount: $PropertyType<VirtualizedListProps, 'getItemCount'>,
|
|
|
|
getItemLayout: $PropertyType<VirtualizedListProps, 'getItemLayout'>,
|
|
|
|
renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
|
|
|
|
keyExtractor: $PropertyType<VirtualizedListProps, 'keyExtractor'>,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2019-10-11 19:44:48 +03:00
|
|
|
},
|
|
|
|
>,
|
|
|
|
...FlatListProps<ItemT>,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
};
|
2017-02-17 05:59:55 +03:00
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
...VirtualizedList.defaultProps,
|
|
|
|
numColumns: 1,
|
2018-12-12 23:52:20 +03:00
|
|
|
/**
|
|
|
|
* Enabling this prop on Android greatly improves scrolling performance with no known issues.
|
|
|
|
* The alternative is that scrolling on Android is unusably bad. Enabling it on iOS has a few
|
|
|
|
* known issues.
|
|
|
|
*/
|
|
|
|
removeClippedSubviews: Platform.OS === 'android',
|
2017-02-17 05:59:55 +03:00
|
|
|
};
|
2017-09-29 08:14:45 +03:00
|
|
|
export type DefaultProps = typeof defaultProps;
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* A performant interface for rendering simple, flat lists, supporting the most handy features:
|
|
|
|
*
|
|
|
|
* - Fully cross-platform.
|
|
|
|
* - Optional horizontal mode.
|
2017-03-02 08:13:20 +03:00
|
|
|
* - Configurable viewability callbacks.
|
|
|
|
* - Header support.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
* - Footer support.
|
|
|
|
* - Separator support.
|
2017-03-02 08:13:20 +03:00
|
|
|
* - Pull to Refresh.
|
|
|
|
* - Scroll loading.
|
2017-03-22 09:55:50 +03:00
|
|
|
* - ScrollToIndex support.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
2017-03-22 09:55:50 +03:00
|
|
|
* If you need section support, use [`<SectionList>`](docs/sectionlist.html).
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
|
|
|
* Minimal Example:
|
|
|
|
*
|
2017-03-02 08:13:20 +03:00
|
|
|
* <FlatList
|
|
|
|
* data={[{key: 'a'}, {key: 'b'}]}
|
|
|
|
* renderItem={({item}) => <Text>{item.key}</Text>}
|
|
|
|
* />
|
|
|
|
*
|
2017-09-22 22:58:40 +03:00
|
|
|
* More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
|
2017-03-28 05:51:40 +03:00
|
|
|
*
|
|
|
|
* - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
|
|
|
|
* prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
|
2017-09-22 22:58:40 +03:00
|
|
|
* if the components rendered in `MyListItem` did not have such optimizations.
|
2017-03-28 05:51:40 +03:00
|
|
|
* - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
|
|
|
|
* when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
|
|
|
|
* needs to re-render any items because it is also a `PureComponent` and the prop comparison will
|
|
|
|
* not show any changes.
|
2017-09-22 22:58:40 +03:00
|
|
|
* - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
|
2017-03-28 05:51:40 +03:00
|
|
|
*
|
|
|
|
*
|
|
|
|
* class MyListItem extends React.PureComponent {
|
|
|
|
* _onPress = () => {
|
|
|
|
* this.props.onPressItem(this.props.id);
|
|
|
|
* };
|
|
|
|
*
|
|
|
|
* render() {
|
2017-09-22 22:58:40 +03:00
|
|
|
* const textColor = this.props.selected ? "red" : "black";
|
2017-03-28 05:51:40 +03:00
|
|
|
* return (
|
2017-09-22 22:58:40 +03:00
|
|
|
* <TouchableOpacity onPress={this._onPress}>
|
|
|
|
* <View>
|
|
|
|
* <Text style={{ color: textColor }}>
|
|
|
|
* {this.props.title}
|
|
|
|
* </Text>
|
|
|
|
* </View>
|
|
|
|
* </TouchableOpacity>
|
|
|
|
* );
|
2017-03-28 05:51:40 +03:00
|
|
|
* }
|
|
|
|
* }
|
|
|
|
*
|
2017-09-22 22:58:40 +03:00
|
|
|
* class MultiSelectList extends React.PureComponent {
|
2017-03-28 05:51:40 +03:00
|
|
|
* state = {selected: (new Map(): Map<string, boolean>)};
|
|
|
|
*
|
|
|
|
* _keyExtractor = (item, index) => item.id;
|
|
|
|
*
|
|
|
|
* _onPressItem = (id: string) => {
|
|
|
|
* // updater functions are preferred for transactional updates
|
|
|
|
* this.setState((state) => {
|
|
|
|
* // copy the map rather than modifying state.
|
|
|
|
* const selected = new Map(state.selected);
|
2017-05-05 21:47:28 +03:00
|
|
|
* selected.set(id, !selected.get(id)); // toggle
|
2017-03-28 05:51:40 +03:00
|
|
|
* return {selected};
|
|
|
|
* });
|
|
|
|
* };
|
|
|
|
*
|
|
|
|
* _renderItem = ({item}) => (
|
|
|
|
* <MyListItem
|
|
|
|
* id={item.id}
|
|
|
|
* onPressItem={this._onPressItem}
|
|
|
|
* selected={!!this.state.selected.get(item.id)}
|
|
|
|
* title={item.title}
|
|
|
|
* />
|
|
|
|
* );
|
|
|
|
*
|
|
|
|
* render() {
|
|
|
|
* return (
|
|
|
|
* <FlatList
|
|
|
|
* data={this.props.data}
|
|
|
|
* extraData={this.state}
|
|
|
|
* keyExtractor={this._keyExtractor}
|
|
|
|
* renderItem={this._renderItem}
|
|
|
|
* />
|
|
|
|
* );
|
|
|
|
* }
|
|
|
|
* }
|
|
|
|
*
|
2017-03-22 09:55:50 +03:00
|
|
|
* This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
|
2017-06-17 02:53:24 +03:00
|
|
|
* and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
|
2017-04-04 04:36:32 +03:00
|
|
|
* here, along with the following caveats:
|
2017-03-01 20:11:59 +03:00
|
|
|
*
|
|
|
|
* - Internal state is not preserved when content scrolls out of the render window. Make sure all
|
|
|
|
* your data is captured in the item data or external stores like Flux, Redux, or Relay.
|
2017-03-07 06:20:20 +03:00
|
|
|
* - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
|
2017-04-04 04:36:29 +03:00
|
|
|
* equal. Make sure that everything your `renderItem` function depends on is passed as a prop
|
|
|
|
* (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
|
|
|
|
* changes. This includes the `data` prop and parent component state.
|
2017-03-01 20:11:59 +03:00
|
|
|
* - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
|
|
|
|
* offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
|
|
|
|
* blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
|
|
|
* and we are working on improving it behind the scenes.
|
|
|
|
* - By default, the list looks for a `key` prop on each item and uses that for the React key.
|
2017-03-07 06:20:20 +03:00
|
|
|
* Alternatively, you can provide a custom `keyExtractor` prop.
|
2017-04-04 04:36:29 +03:00
|
|
|
*
|
2017-09-12 02:33:08 +03:00
|
|
|
* Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2017-08-18 04:36:54 +03:00
|
|
|
class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
|
2017-02-17 05:59:55 +03:00
|
|
|
static defaultProps: DefaultProps = defaultProps;
|
|
|
|
props: Props<ItemT>;
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
/**
|
2017-03-02 08:13:20 +03:00
|
|
|
* Scrolls to the end of the content. May be janky without `getItemLayout` prop.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2019-11-21 20:38:13 +03:00
|
|
|
scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.scrollToEnd(params);
|
|
|
|
}
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-07-19 03:46:01 +03:00
|
|
|
* Scrolls to the item at the specified index such that it is positioned in the viewable area
|
2017-03-02 08:13:20 +03:00
|
|
|
* such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the
|
2017-04-04 04:36:32 +03:00
|
|
|
* middle. `viewOffset` is a fixed number of pixels to offset the final target position.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*
|
2017-04-04 04:36:32 +03:00
|
|
|
* Note: cannot scroll to locations outside the render window without specifying the
|
|
|
|
* `getItemLayout` prop.
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2017-04-04 04:36:32 +03:00
|
|
|
scrollToIndex(params: {
|
2017-06-13 08:32:58 +03:00
|
|
|
animated?: ?boolean,
|
|
|
|
index: number,
|
|
|
|
viewOffset?: number,
|
|
|
|
viewPosition?: number,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2017-04-04 04:36:32 +03:00
|
|
|
}) {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.scrollToIndex(params);
|
|
|
|
}
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-04-04 04:36:32 +03:00
|
|
|
* Requires linear scan through data - use `scrollToIndex` instead if possible.
|
|
|
|
*
|
|
|
|
* Note: cannot scroll to locations outside the render window without specifying the
|
|
|
|
* `getItemLayout` prop.
|
2017-03-02 08:13:20 +03:00
|
|
|
*/
|
2017-06-13 08:32:58 +03:00
|
|
|
scrollToItem(params: {
|
|
|
|
animated?: ?boolean,
|
|
|
|
item: ItemT,
|
|
|
|
viewPosition?: number,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2017-06-13 08:32:58 +03:00
|
|
|
}) {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.scrollToItem(params);
|
|
|
|
}
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-06-06 22:24:47 +03:00
|
|
|
* Scroll to a specific content pixel offset in the list.
|
2017-06-08 22:29:29 +03:00
|
|
|
*
|
2017-06-06 22:24:47 +03:00
|
|
|
* Check out [scrollToOffset](docs/virtualizedlist.html#scrolltooffset) of VirtualizedList
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
*/
|
2019-11-21 20:38:13 +03:00
|
|
|
scrollToOffset(params: {animated?: ?boolean, offset: number, ...}) {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.scrollToOffset(params);
|
|
|
|
}
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
}
|
|
|
|
|
2017-02-28 13:08:53 +03:00
|
|
|
/**
|
2017-10-30 22:27:02 +03:00
|
|
|
* Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
|
2017-03-02 08:13:20 +03:00
|
|
|
* if `waitForInteractions` is true and the user has not scrolled. This is typically called by
|
|
|
|
* taps on items or by navigation actions.
|
2017-02-28 13:08:53 +03:00
|
|
|
*/
|
|
|
|
recordInteraction() {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.recordInteraction();
|
|
|
|
}
|
2017-02-28 13:08:53 +03:00
|
|
|
}
|
|
|
|
|
2017-06-06 23:00:30 +03:00
|
|
|
/**
|
|
|
|
* Displays the scroll indicators momentarily.
|
|
|
|
*
|
|
|
|
* @platform ios
|
|
|
|
*/
|
|
|
|
flashScrollIndicators() {
|
2017-11-29 20:05:29 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.flashScrollIndicators();
|
|
|
|
}
|
2017-06-06 23:00:30 +03:00
|
|
|
}
|
|
|
|
|
2017-04-04 04:36:31 +03:00
|
|
|
/**
|
|
|
|
* Provides a handle to the underlying scroll responder.
|
|
|
|
*/
|
2019-08-28 23:14:00 +03:00
|
|
|
getScrollResponder(): ?ScrollResponderType {
|
2017-04-04 04:36:31 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
return this._listRef.getScrollResponder();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-03 21:15:10 +03:00
|
|
|
/**
|
|
|
|
* Provides a reference to the underlying host component
|
|
|
|
*/
|
|
|
|
getNativeScrollRef():
|
|
|
|
| ?React.ElementRef<typeof View>
|
2020-11-20 02:52:24 +03:00
|
|
|
| ?React.ElementRef<NativeScrollView> {
|
2019-12-03 21:15:10 +03:00
|
|
|
if (this._listRef) {
|
Make ScrollView use ForwardRef
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.
Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />
const innerViewRef = myRef.current.getNativeScrollRef();
innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />
// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();
// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```
Changes:
* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).
Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests
Changelog:
[General] [Changed] - Make ScrollView use forwardRef
Reviewed By: TheSavior
Differential Revision: D19304480
fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
2020-03-27 02:47:39 +03:00
|
|
|
return this._listRef.getScrollRef();
|
2019-12-03 21:15:10 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-09 20:06:53 +03:00
|
|
|
getScrollableNode(): any {
|
2017-04-04 04:36:31 +03:00
|
|
|
if (this._listRef) {
|
2017-03-10 09:01:15 +03:00
|
|
|
return this._listRef.getScrollableNode();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-11-21 20:38:13 +03:00
|
|
|
setNativeProps(props: {[string]: mixed, ...}) {
|
2017-06-20 19:24:54 +03:00
|
|
|
if (this._listRef) {
|
|
|
|
this._listRef.setNativeProps(props);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-26 00:59:34 +03:00
|
|
|
constructor(props: Props<ItemT>) {
|
2017-09-06 04:33:44 +03:00
|
|
|
super(props);
|
2018-05-26 00:59:34 +03:00
|
|
|
this._checkProps(this.props);
|
2017-09-06 04:33:44 +03:00
|
|
|
if (this.props.viewabilityConfigCallbackPairs) {
|
|
|
|
this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
|
2020-03-25 07:35:58 +03:00
|
|
|
pair => ({
|
2017-09-06 04:33:44 +03:00
|
|
|
viewabilityConfig: pair.viewabilityConfig,
|
|
|
|
onViewableItemsChanged: this._createOnViewableItemsChanged(
|
|
|
|
pair.onViewableItemsChanged,
|
|
|
|
),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
} else if (this.props.onViewableItemsChanged) {
|
|
|
|
this._virtualizedListPairs.push({
|
2020-02-27 21:21:12 +03:00
|
|
|
/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
|
|
|
|
* error found when Flow v0.63 was deployed. To see the error delete
|
|
|
|
* this comment and run Flow. */
|
2017-09-06 04:33:44 +03:00
|
|
|
viewabilityConfig: this.props.viewabilityConfig,
|
|
|
|
onViewableItemsChanged: this._createOnViewableItemsChanged(
|
|
|
|
this.props.onViewableItemsChanged,
|
|
|
|
),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-26 00:59:34 +03:00
|
|
|
componentDidUpdate(prevProps: Props<ItemT>) {
|
|
|
|
invariant(
|
|
|
|
prevProps.numColumns === this.props.numColumns,
|
|
|
|
'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
|
|
|
|
'changing the number of columns to force a fresh render of the component.',
|
|
|
|
);
|
|
|
|
invariant(
|
|
|
|
prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
|
|
|
|
'Changing onViewableItemsChanged on the fly is not supported',
|
|
|
|
);
|
|
|
|
invariant(
|
2018-08-25 00:17:45 +03:00
|
|
|
!deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig),
|
2018-05-26 00:59:34 +03:00
|
|
|
'Changing viewabilityConfig on the fly is not supported',
|
|
|
|
);
|
|
|
|
invariant(
|
|
|
|
prevProps.viewabilityConfigCallbackPairs ===
|
|
|
|
this.props.viewabilityConfigCallbackPairs,
|
|
|
|
'Changing viewabilityConfigCallbackPairs on the fly is not supported',
|
|
|
|
);
|
|
|
|
|
|
|
|
this._checkProps(this.props);
|
|
|
|
}
|
|
|
|
|
2018-10-25 00:18:10 +03:00
|
|
|
_listRef: ?React.ElementRef<typeof VirtualizedList>;
|
2017-09-06 04:33:44 +03:00
|
|
|
_virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
|
2017-02-10 20:50:11 +03:00
|
|
|
|
2020-03-25 07:35:58 +03:00
|
|
|
_captureRef = ref => {
|
2017-06-13 08:32:58 +03:00
|
|
|
this._listRef = ref;
|
|
|
|
};
|
2017-02-10 20:50:11 +03:00
|
|
|
|
2017-02-17 05:59:55 +03:00
|
|
|
_checkProps(props: Props<ItemT>) {
|
2017-02-12 01:01:53 +03:00
|
|
|
const {
|
2019-10-11 19:44:48 +03:00
|
|
|
// $FlowFixMe this prop doesn't exist, is only used for an invariant
|
2017-02-12 01:01:53 +03:00
|
|
|
getItem,
|
2019-10-11 19:44:48 +03:00
|
|
|
// $FlowFixMe this prop doesn't exist, is only used for an invariant
|
2017-02-12 01:01:53 +03:00
|
|
|
getItemCount,
|
|
|
|
horizontal,
|
|
|
|
numColumns,
|
|
|
|
columnWrapperStyle,
|
2017-09-06 04:33:44 +03:00
|
|
|
onViewableItemsChanged,
|
|
|
|
viewabilityConfigCallbackPairs,
|
2017-02-12 01:01:53 +03:00
|
|
|
} = props;
|
2017-06-13 08:32:58 +03:00
|
|
|
invariant(
|
|
|
|
!getItem && !getItemCount,
|
|
|
|
'FlatList does not support custom data formats.',
|
|
|
|
);
|
2017-02-10 20:50:11 +03:00
|
|
|
if (numColumns > 1) {
|
|
|
|
invariant(!horizontal, 'numColumns does not support horizontal.');
|
2017-02-12 01:01:53 +03:00
|
|
|
} else {
|
2017-06-13 08:32:58 +03:00
|
|
|
invariant(
|
|
|
|
!columnWrapperStyle,
|
|
|
|
'columnWrapperStyle not supported for single column lists',
|
|
|
|
);
|
2017-02-10 20:50:11 +03:00
|
|
|
}
|
2017-09-06 04:33:44 +03:00
|
|
|
invariant(
|
|
|
|
!(onViewableItemsChanged && viewabilityConfigCallbackPairs),
|
|
|
|
'FlatList does not support setting both onViewableItemsChanged and ' +
|
|
|
|
'viewabilityConfigCallbackPairs.',
|
|
|
|
);
|
2017-02-10 20:50:11 +03:00
|
|
|
}
|
|
|
|
|
2017-03-02 08:13:20 +03:00
|
|
|
_getItem = (data: Array<ItemT>, index: number) => {
|
2017-02-10 20:50:11 +03:00
|
|
|
const {numColumns} = this.props;
|
|
|
|
if (numColumns > 1) {
|
|
|
|
const ret = [];
|
|
|
|
for (let kk = 0; kk < numColumns; kk++) {
|
|
|
|
const item = data[index * numColumns + kk];
|
2018-05-26 00:59:34 +03:00
|
|
|
if (item != null) {
|
|
|
|
ret.push(item);
|
|
|
|
}
|
2017-02-10 20:50:11 +03:00
|
|
|
}
|
|
|
|
return ret;
|
|
|
|
} else {
|
|
|
|
return data[index];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-03-02 08:13:20 +03:00
|
|
|
_getItemCount = (data: ?Array<ItemT>): number => {
|
2019-08-23 21:43:52 +03:00
|
|
|
if (data) {
|
|
|
|
const {numColumns} = this.props;
|
|
|
|
return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
|
|
|
|
} else {
|
|
|
|
return 0;
|
|
|
|
}
|
2017-02-10 20:50:11 +03:00
|
|
|
};
|
|
|
|
|
2017-03-02 08:13:20 +03:00
|
|
|
_keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
|
2017-02-10 20:50:11 +03:00
|
|
|
const {keyExtractor, numColumns} = this.props;
|
|
|
|
if (numColumns > 1) {
|
2017-02-17 05:59:55 +03:00
|
|
|
invariant(
|
|
|
|
Array.isArray(items),
|
|
|
|
'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
|
2017-06-13 08:32:58 +03:00
|
|
|
'array with 1-%s columns; instead, received a single item.',
|
2017-02-17 05:59:55 +03:00
|
|
|
numColumns,
|
|
|
|
);
|
2020-11-20 11:47:54 +03:00
|
|
|
return (
|
|
|
|
items
|
|
|
|
// $FlowFixMe[incompatible-call]
|
|
|
|
.map((it, kk) => keyExtractor(it, index * numColumns + kk))
|
|
|
|
.join(':')
|
|
|
|
);
|
2017-02-10 20:50:11 +03:00
|
|
|
} else {
|
2019-10-11 19:44:48 +03:00
|
|
|
// $FlowFixMe Can't call keyExtractor with an array
|
2017-02-10 20:50:11 +03:00
|
|
|
return keyExtractor(items, index);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-02-28 13:08:58 +03:00
|
|
|
_pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
|
2017-02-10 20:50:11 +03:00
|
|
|
const {numColumns, keyExtractor} = this.props;
|
|
|
|
v.item.forEach((item, ii) => {
|
|
|
|
invariant(v.index != null, 'Missing index!');
|
|
|
|
const index = v.index * numColumns + ii;
|
|
|
|
arr.push({...v, item, key: keyExtractor(item, index), index});
|
|
|
|
});
|
|
|
|
}
|
2017-03-28 05:51:40 +03:00
|
|
|
|
2017-09-06 04:33:44 +03:00
|
|
|
_createOnViewableItemsChanged(
|
|
|
|
onViewableItemsChanged: ?(info: {
|
|
|
|
viewableItems: Array<ViewToken>,
|
|
|
|
changed: Array<ViewToken>,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2017-09-06 04:33:44 +03:00
|
|
|
}) => void,
|
|
|
|
) {
|
|
|
|
return (info: {
|
|
|
|
viewableItems: Array<ViewToken>,
|
|
|
|
changed: Array<ViewToken>,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2017-09-06 04:33:44 +03:00
|
|
|
}) => {
|
|
|
|
const {numColumns} = this.props;
|
|
|
|
if (onViewableItemsChanged) {
|
|
|
|
if (numColumns > 1) {
|
|
|
|
const changed = [];
|
|
|
|
const viewableItems = [];
|
2020-03-25 07:35:58 +03:00
|
|
|
info.viewableItems.forEach(v =>
|
2017-09-06 04:33:44 +03:00
|
|
|
this._pushMultiColumnViewable(viewableItems, v),
|
|
|
|
);
|
2020-03-25 07:35:58 +03:00
|
|
|
info.changed.forEach(v => this._pushMultiColumnViewable(changed, v));
|
2017-09-06 04:33:44 +03:00
|
|
|
onViewableItemsChanged({viewableItems, changed});
|
|
|
|
} else {
|
|
|
|
onViewableItemsChanged(info);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
2017-02-10 20:50:11 +03:00
|
|
|
|
2019-05-20 17:42:49 +03:00
|
|
|
_renderer = () => {
|
|
|
|
const {
|
|
|
|
ListItemComponent,
|
|
|
|
renderItem,
|
|
|
|
numColumns,
|
|
|
|
columnWrapperStyle,
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
let virtualizedListRenderKey = ListItemComponent
|
|
|
|
? 'ListItemComponent'
|
|
|
|
: 'renderItem';
|
|
|
|
|
2019-10-11 19:44:48 +03:00
|
|
|
const renderer = (props): React.Node => {
|
2019-05-20 17:42:49 +03:00
|
|
|
if (ListItemComponent) {
|
2019-10-11 19:44:48 +03:00
|
|
|
// $FlowFixMe Component isn't valid
|
2019-05-20 17:42:49 +03:00
|
|
|
return <ListItemComponent {...props} />;
|
|
|
|
} else if (renderItem) {
|
2020-11-20 11:47:54 +03:00
|
|
|
// $FlowFixMe[incompatible-call]
|
2019-05-20 17:42:49 +03:00
|
|
|
return renderItem(props);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
2019-11-06 04:34:14 +03:00
|
|
|
/* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses an
|
|
|
|
* error found when Flow v0.111 was deployed. To see the error, delete
|
|
|
|
* this comment and run Flow. */
|
2019-05-20 17:42:49 +03:00
|
|
|
[virtualizedListRenderKey]: (info: RenderItemProps<ItemT>) => {
|
|
|
|
if (numColumns > 1) {
|
|
|
|
const {item, index} = info;
|
|
|
|
invariant(
|
|
|
|
Array.isArray(item),
|
|
|
|
'Expected array of items with numColumns > 1',
|
|
|
|
);
|
|
|
|
return (
|
2020-04-09 20:55:48 +03:00
|
|
|
<View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
|
2019-05-20 17:42:49 +03:00
|
|
|
{item.map((it, kk) => {
|
|
|
|
const element = renderer({
|
|
|
|
item: it,
|
|
|
|
index: index * numColumns + kk,
|
|
|
|
separators: info.separators,
|
|
|
|
});
|
|
|
|
return element != null ? (
|
|
|
|
<React.Fragment key={kk}>{element}</React.Fragment>
|
|
|
|
) : null;
|
|
|
|
})}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return renderer(info);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
2017-02-10 20:50:11 +03:00
|
|
|
};
|
|
|
|
|
2019-08-09 20:06:53 +03:00
|
|
|
render(): React.Node {
|
2019-10-11 19:44:48 +03:00
|
|
|
const {numColumns, columnWrapperStyle, ...restProps} = this.props;
|
|
|
|
|
2018-10-25 00:18:10 +03:00
|
|
|
return (
|
|
|
|
<VirtualizedList
|
2019-10-11 19:44:48 +03:00
|
|
|
{...restProps}
|
2018-10-25 00:18:10 +03:00
|
|
|
getItem={this._getItem}
|
|
|
|
getItemCount={this._getItemCount}
|
|
|
|
keyExtractor={this._keyExtractor}
|
|
|
|
ref={this._captureRef}
|
|
|
|
viewabilityConfigCallbackPairs={this._virtualizedListPairs}
|
2019-05-20 17:42:49 +03:00
|
|
|
{...this._renderer()}
|
2018-10-25 00:18:10 +03:00
|
|
|
/>
|
|
|
|
);
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-26 00:59:34 +03:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
row: {flexDirection: 'row'},
|
|
|
|
});
|
|
|
|
|
Better ListView - FlatList
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 21:25:32 +03:00
|
|
|
module.exports = FlatList;
|