From 266ddf2fd7d59509ae493ad74ac76a79bde33412 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Thu, 24 Aug 2023 10:45:41 +0200
Subject: [PATCH 1/2] Migrate index.js to function component

---
 src/components/InvertedFlatList/index.js | 46 +++++++++++-------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index 923a17210af7..4cd15ba60521 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/src/components/InvertedFlatList/index.js
@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {FlatList, StyleSheet} from 'react-native';
 import _ from 'underscore';
@@ -18,34 +18,30 @@ const propTypes = {
 
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
 // It's a HACK alert since FlatList has inverted scrolling on web
-class InvertedFlatList extends React.Component {
-    constructor(props) {
-        super(props);
+function InvertedFlatList(props) {
+    const {innerRef, contentContainerStyle} = props;
+    let list;
 
-        this.list = undefined;
-    }
-
-    componentDidMount() {
-        if (!_.isFunction(this.props.innerRef)) {
+    useEffect(() => {
+        if (!_.isFunction(innerRef)) {
             // eslint-disable-next-line no-param-reassign
-            this.props.innerRef.current = this.list;
+            innerRef.current = list;
         } else {
-            this.props.innerRef(this.list);
+            innerRef(list);
         }
-    }
-
-    render() {
-        return (
-            <BaseInvertedFlatList
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.props}
-                inverted
-                ref={(el) => (this.list = el)}
-                shouldMeasureItems
-                contentContainerStyle={StyleSheet.compose(this.props.contentContainerStyle, styles.justifyContentEnd)}
-            />
-        );
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <BaseInvertedFlatList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            inverted
+            ref={(el) => (list = el)}
+            shouldMeasureItems
+            contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}
+        />
+    );
 }
 
 InvertedFlatList.propTypes = propTypes;

From 67060f4bb45c73b5287a8624924b5eb3d8c86bad Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Mon, 28 Aug 2023 11:39:42 +0200
Subject: [PATCH 2/2] Turn list into React ref

---
 src/components/InvertedFlatList/index.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index 4cd15ba60521..e8e546385207 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/src/components/InvertedFlatList/index.js
@@ -20,24 +20,23 @@ const propTypes = {
 // It's a HACK alert since FlatList has inverted scrolling on web
 function InvertedFlatList(props) {
     const {innerRef, contentContainerStyle} = props;
-    let list;
+    const listRef = React.createRef();
 
     useEffect(() => {
         if (!_.isFunction(innerRef)) {
             // eslint-disable-next-line no-param-reassign
-            innerRef.current = list;
+            innerRef.current = listRef.current;
         } else {
-            innerRef(list);
+            innerRef(listRef);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [innerRef, listRef]);
 
     return (
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             inverted
-            ref={(el) => (list = el)}
+            ref={listRef}
             shouldMeasureItems
             contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}
         />