Merge pull request #25818 from software-mansion-labs/migrate-inverted…

…-flat-list-index

Migrate index.js to function component

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,29 @@ 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;
+    const listRef = React.createRef();
 
-        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 = listRef.current;
         } else {
-            this.props.innerRef(this.list);
+            innerRef(listRef);
         }
-    }
-
-    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)}
-            />
-        );
-    }
+    }, [innerRef, listRef]);
+
+    return (
+        <BaseInvertedFlatList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            inverted
+            ref={listRef}
+            shouldMeasureItems
+            contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}
+        />
+    );
 }
 
 InvertedFlatList.propTypes = propTypes;