Merge pull request #20 from ArekChr/arekchr/fix-viewable-items-invert…

…ed-list

Fix: onViewableItemsChanged event handler for inverted FlatList

packages/react-native-web-examples/pages/viewable-items/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+ FlatList,
+ StyleSheet,
+ Text,
+ Pressable,
+ View,
+ Button
+} from 'react-native';
+import Example from '../../shared/example';
+
+const ITEMS = [...Array(200)].map((_, i) => `Item ${i}`);
+
+const viewabilityConfig = {
+ itemVisiblePercentThreshold: 95
+};
+
+function createItemRow({ item, index }) {
+ return (
+ <Pressable key={index} style={[styles.item]}>
+ <Text style={styles.text}>{item}</Text>
+ </Pressable>
+ );
+}
+
+function Divider() {
+ return <View style={styles.divider} />;
+}
+
+function onViewableItemsChanged({ viewableItems, changed }) {
+ console.log('Visible items are', viewableItems);
+ console.log('Changed in this iteration', changed);
+}
+
+export default function ScrollViewPage() {
+ const [isInverted, setIsInverted] = React.useState(true);
+
+ return (
+ <Example title="ViewableItems Test">
+ <View style={styles.container}>
+ <Button
+ onPress={() => setIsInverted((val) => !val)}
+ title={isInverted ? 'Inverted Enabled' : 'Inverted Disabled'}
+ />
+ <FlatList
+ ItemSeparatorComponent={Divider}
+ data={ITEMS}
+ inverted={isInverted}
+ onViewableItemsChanged={onViewableItemsChanged}
+ renderItem={createItemRow}
+ style={styles.scrollView}
+ viewabilityConfig={viewabilityConfig}
+ />
+ </View>
+ </Example>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ alignSelf: 'stretch'
+ },
+ scrollView: {
+ backgroundColor: '#eeeeee',
+ maxHeight: 250
+ },
+ item: {
+ margin: 5,
+ padding: 5,
+ backgroundColor: '#cccccc',
+ borderRadius: 3,
+ minWidth: 96
+ },
+ text: {
+ fontSize: 16,
+ fontWeight: 'bold',
+ margin: 5
+ },
+ divider: {
+ width: '1rem'
+ }
+});

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -1424,14 +1424,23 @@ class VirtualizedList extends React.PureComponent<Props, State> {
  }
  };
 
+ _selectClientLength(parentNode) {
+ return !horizontalOrDefault(this.props.horizontal) ? parentNode.clientHeight : parentNode.clientWidth;
+ }
+
  _onCellLayout(e, cellKey, index) {
  const layout = e.nativeEvent.layout;
+ const target = e.nativeEvent.target;
  const next = {
  offset: this._selectOffset(layout),
  length: this._selectLength(layout),
  index,
  inLayout: true,
  };
+
+ if (this.props.inverted) {
+ next.offset = this._selectClientLength(target.parentNode) - next.offset - next.length;
+ }
  const curr = this._frames[cellKey];
  if (
  !curr ||