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 ||