From ad90ffbf353837ecb5b5cecafa2364eadfd29100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= <Arkadiuszchr@gmail.com>
Date: Tue, 18 Jul 2023 13:24:05 +0200
Subject: [PATCH 1/3] test: scenario

---
 .../pages/viewable-items/index.js             | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 packages/react-native-web-examples/pages/viewable-items/index.js

diff --git a/packages/react-native-web-examples/pages/viewable-items/index.js b/packages/react-native-web-examples/pages/viewable-items/index.js
new file mode 100644
index 000000000..799e09046
--- /dev/null
+++ b/packages/react-native-web-examples/pages/viewable-items/index.js
@@ -0,0 +1,86 @@
+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}`);
+
+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} />;
+}
+
+const viewabilityConfig = {
+  itemVisiblePercentThreshold: 95
+};
+
+function onViewableItemsChanged({ viewableItems, changed }) {
+  console.log('Visible items are', viewableItems);
+  console.log('Changed in this iteration', changed);
+}
+
+export default function ScrollViewPage() {
+  const scrollRef = React.useRef(null);
+  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}
+          ref={scrollRef}
+          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'
+  }
+});

From d4571bbd799f28fd0d4e27d5d3befc9b0f75166a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= <Arkadiuszchr@gmail.com>
Date: Tue, 18 Jul 2023 13:33:29 +0200
Subject: [PATCH 2/3] fix: viewable items while list is inverted

---
 .../src/vendor/react-native/VirtualizedList/index.js     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 2fa5b8d58..5c4196dc4 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/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 ||

From 0d443e7f78f38503f48df4f29c4ccb778895125d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= <Arkadiuszchr@gmail.com>
Date: Tue, 18 Jul 2023 13:52:07 +0200
Subject: [PATCH 3/3] refactor: test scenario

---
 .../pages/viewable-items/index.js                  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/react-native-web-examples/pages/viewable-items/index.js b/packages/react-native-web-examples/pages/viewable-items/index.js
index 799e09046..9003821d1 100644
--- a/packages/react-native-web-examples/pages/viewable-items/index.js
+++ b/packages/react-native-web-examples/pages/viewable-items/index.js
@@ -11,6 +11,10 @@ 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]}>
@@ -23,26 +27,19 @@ function Divider() {
   return <View style={styles.divider} />;
 }
 
-const viewabilityConfig = {
-  itemVisiblePercentThreshold: 95
-};
-
 function onViewableItemsChanged({ viewableItems, changed }) {
   console.log('Visible items are', viewableItems);
   console.log('Changed in this iteration', changed);
 }
 
 export default function ScrollViewPage() {
-  const scrollRef = React.useRef(null);
   const [isInverted, setIsInverted] = React.useState(true);
 
   return (
     <Example title="ViewableItems Test">
       <View style={styles.container}>
         <Button
-          onPress={() => {
-            setIsInverted((val) => !val);
-          }}
+          onPress={() => setIsInverted((val) => !val)}
           title={isInverted ? 'Inverted Enabled' : 'Inverted Disabled'}
         />
         <FlatList
@@ -50,7 +47,6 @@ export default function ScrollViewPage() {
           data={ITEMS}
           inverted={isInverted}
           onViewableItemsChanged={onViewableItemsChanged}
-          ref={scrollRef}
           renderItem={createItemRow}
           style={styles.scrollView}
           viewabilityConfig={viewabilityConfig}