🍒 Cherry pick PR #30962 to staging 🍒

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001039605
-        versionName "1.3.96-5"
+        versionCode 1001039606
+        versionName "1.3.96-6"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.96.5</string>
+	<string>1.3.96.6</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.96.5</string>
+	<string>1.3.96.6</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.96-5",
+  "version": "1.3.96-6",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/InvertedFlatList/index.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useEffect, useRef} from 'react';
 import {DeviceEventEmitter, FlatList, StyleSheet} from 'react-native';
-import _ from 'underscore';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
@@ -24,31 +23,24 @@ const propTypes = {
 // It's a HACK alert since FlatList has inverted scrolling on web
 function InvertedFlatList(props) {
     const {innerRef, contentContainerStyle} = props;
-    const listRef = React.createRef();
 
     const lastScrollEvent = useRef(null);
     const scrollEndTimeout = useRef(null);
     const updateInProgress = useRef(false);
     const eventHandler = useRef(null);
 
-    useEffect(() => {
-        if (!_.isFunction(innerRef)) {
-            // eslint-disable-next-line no-param-reassign
-            innerRef.current = listRef.current;
-        } else {
-            innerRef(listRef);
-        }
-
-        return () => {
+    useEffect(
+        () => () => {
             if (scrollEndTimeout.current) {
                 clearTimeout(scrollEndTimeout.current);
             }
 
             if (eventHandler.current) {
                 eventHandler.current.remove();
             }
-        };
-    }, [innerRef, listRef]);
+        },
+        [innerRef],
+    );
 
     /**
      * Emits when the scrolling is in progress. Also,
@@ -114,7 +106,7 @@ function InvertedFlatList(props) {
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            ref={listRef}
+            ref={innerRef}
             shouldMeasureItems
             contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}
             onScroll={handleScroll}