diff --git a/Examples/UIExplorer/js/FlatListExample.js b/Examples/UIExplorer/js/FlatListExample.js index 9eae853bf..90263d70a 100644 --- a/Examples/UIExplorer/js/FlatListExample.js +++ b/Examples/UIExplorer/js/FlatListExample.js @@ -26,6 +26,7 @@ const React = require('react'); const ReactNative = require('react-native'); const { + Animated, FlatList, StyleSheet, View, @@ -47,6 +48,8 @@ const { renderSmallSwitchOption, } = require('./ListExampleShared'); +const AnimatedFlatList = Animated.createAnimatedComponent(FlatList); + const VIEWABILITY_CONFIG = { minimumViewTime: 3000, viewAreaCoveragePercentThreshold: 100, @@ -66,15 +69,29 @@ class FlatListExample extends React.PureComponent { logViewable: false, virtualized: true, }; + _onChangeFilterText = (filterText) => { this.setState({filterText}); }; + _onChangeScrollToIndex = (text) => { - this._listRef.scrollToIndex({viewPosition: 0.5, index: Number(text)}); + this._listRef.getNode().scrollToIndex({viewPosition: 0.5, index: Number(text)}); }; + + _scrollPos = new Animated.Value(0); + _scrollSinkX = Animated.event( + [{nativeEvent: { contentOffset: { x: this._scrollPos } }}], + {useNativeDriver: true}, + ); + _scrollSinkY = Animated.event( + [{nativeEvent: { contentOffset: { y: this._scrollPos } }}], + {useNativeDriver: true}, + ); + componentDidUpdate() { - this._listRef.recordInteraction(); // e.g. flipping logViewable switch + this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch } + render() { const filterRegex = new RegExp(String(this.state.filterText), 'i'); const filter = (item) => ( @@ -95,7 +112,6 @@ class FlatListExample extends React.PureComponent { @@ -104,10 +120,19 @@ class FlatListExample extends React.PureComponent { {renderSmallSwitchOption(this, 'fixedHeight')} {renderSmallSwitchOption(this, 'logViewable')} {renderSmallSwitchOption(this, 'debug')} + - { - this._listRef.recordInteraction(); + this._listRef.getNode().recordInteraction(); pressItem(this, key); }; _listRef: FlatList<*>; @@ -196,6 +222,12 @@ const styles = StyleSheet.create({ searchRow: { paddingHorizontal: 10, }, + spindicator: { + marginLeft: 'auto', + width: 2, + height: 16, + backgroundColor: 'darkgray', + }, }); module.exports = FlatListExample; diff --git a/Libraries/CustomComponents/Lists/FlatList.js b/Libraries/CustomComponents/Lists/FlatList.js index 2c45a86f8..951f8f782 100644 --- a/Libraries/CustomComponents/Lists/FlatList.js +++ b/Libraries/CustomComponents/Lists/FlatList.js @@ -34,6 +34,7 @@ const MetroListView = require('MetroListView'); // Used as a fallback legacy option const React = require('React'); +const ReactNative = require('ReactNative'); const View = require('View'); const VirtualizedList = require('VirtualizedList'); @@ -235,6 +236,14 @@ class FlatList extends React.PureComponent, vo this._listRef.recordInteraction(); } + getScrollableNode() { + if (this._listRef && this._listRef.getScrollableNode) { + return this._listRef.getScrollableNode(); + } else { + return ReactNative.findNodeHandle(this._listRef); + } + } + componentWillMount() { this._checkProps(this.props); } diff --git a/Libraries/CustomComponents/Lists/VirtualizedList.js b/Libraries/CustomComponents/Lists/VirtualizedList.js index db7445055..206a1f2d8 100644 --- a/Libraries/CustomComponents/Lists/VirtualizedList.js +++ b/Libraries/CustomComponents/Lists/VirtualizedList.js @@ -34,6 +34,7 @@ const Batchinator = require('Batchinator'); const React = require('React'); +const ReactNative = require('ReactNative'); const RefreshControl = require('RefreshControl'); const ScrollView = require('ScrollView'); const View = require('View'); @@ -237,6 +238,14 @@ class VirtualizedList extends React.PureComponent { this._updateViewableItems(this.props.data); } + getScrollableNode() { + if (this._scrollRef && this._scrollRef.getScrollableNode) { + return this._scrollRef.getScrollableNode(); + } else { + return ReactNative.findNodeHandle(this._scrollRef); + } + } + static defaultProps = { disableVirtualization: false, getItem: (data: any, index: number) => data[index], @@ -293,7 +302,8 @@ class VirtualizedList extends React.PureComponent { super(props); invariant( !props.onScroll || !props.onScroll.__isNative, - 'VirtualizedList does not support AnimatedEvent with onScroll and useNativeDriver', + 'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' + + 'to support native onScroll events with useNativeDriver', ); this._updateCellsToRenderBatcher = new Batchinator( this._updateCellsToRender,