Invert list manually on android

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -134,7 +134,6 @@ class BaseInvertedFlatList extends Component {
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this.props}
                 ref={this.props.innerRef}
-                inverted
                 renderItem={this.renderItem}
                 sizeMap={this.sizeMap}
 

src/components/InvertedFlatList/index.android.js

@@ -0,0 +1,24 @@
+import React, {forwardRef} from 'react';
+import {View} from 'react-native';
+import BaseInvertedFlatList from './BaseInvertedFlatList';
+import styles from '../../styles/styles';
+
+const InvertedCell = props => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <View {...props} style={styles.invert} />
+);
+
+export default forwardRef((props, ref) => (
+    <BaseInvertedFlatList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+
+        // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13
+        inverted={false}
+        style={styles.invert}
+        verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position
+
+        CellRendererComponent={InvertedCell}
+    />
+));

src/components/InvertedFlatList/index.native.js → src/components/InvertedFlatList/index.ios.js

@@ -6,5 +6,6 @@ export default forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
+        inverted
     />
 ));

src/components/InvertedFlatList/index.js

@@ -41,6 +41,7 @@ class InvertedFlatList extends React.Component {
             <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)}

src/styles/styles.js

@@ -2633,6 +2633,11 @@ const styles = {
         transform: [{scale: 0}],
     },
 
+    invert: {
+        // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
+        transform: [{scaleX: -1}, {scaleY: -1}],
+    },
+
     keyboardShortcutModalContainer: {
         maxHeight: '100%',
         flex: '0 0 auto',