fix: apply workaround for android anr (#1964)

* fix: apply workaround for android anr

ref: Expensify/App#12820

* chore: simplify the cell renderer component

* fix: update snapshots

Author: santhoshvai

package/src/components/MessageList/MessageList.tsx

@@ -75,6 +75,11 @@ const styles = StyleSheet.create({
   },
   flex: { flex: 1 },
   invert: { transform: [{ scaleY: -1 }] },
+  invertAndroid: {
+    // Invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
+    // details: https://github.com/Expensify/App/pull/12820
+    transform: [{ scaleX: -1 }, { scaleY: -1 }],
+  },
   listContainer: {
     flex: 1,
     width: '100%',
@@ -88,6 +93,10 @@ const styles = StyleSheet.create({
   },
 });
 
+const InvertedCellRendererComponent = (props: React.PropsWithChildren<unknown>) => (
+  <View {...props} style={styles.invertAndroid} />
+);
+
 const keyExtractor = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -970,17 +979,23 @@ const MessageListWithContext = <
     return null;
   };
 
+  const shouldApplyAndroidWorkaround =
+    inverted && Platform.OS === 'android' && Platform.Version >= 33;
+
   return (
     <View
       style={[styles.container, { backgroundColor: white_snow }, container]}
       testID='message-flat-list-wrapper'
     >
       <FlatList
+        CellRendererComponent={
+          shouldApplyAndroidWorkaround ? InvertedCellRendererComponent : undefined
+        }
         contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={messageList}
         /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
         extraData={disabled || !hasNoMoreRecentMessagesToLoad}
-        inverted={inverted}
+        inverted={shouldApplyAndroidWorkaround ? false : inverted}
         keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
         ListEmptyComponent={renderListEmptyComponent}
@@ -1000,7 +1015,12 @@ const MessageListWithContext = <
         ref={refCallback}
         renderItem={renderItem}
         scrollEnabled={overlay === 'none'}
-        style={[styles.listContainer, listContainer]}
+        showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
+        style={[
+          styles.listContainer,
+          listContainer,
+          shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
+        ]}
         testID='message-flat-list'
         viewabilityConfig={flatListViewabilityConfig}
         {...additionalFlatListProps}

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -162,6 +162,7 @@ exports[`Thread should match thread snapshot 1`] = `
         renderItem={[Function]}
         scrollEnabled={false}
         scrollEventThrottle={50}
+        showsVerticalScrollIndicator={true}
         stickyHeaderIndices={Array []}
         style={
           Array [
@@ -178,6 +179,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 "width": "100%",
               },
               Object {},
+              undefined,
             ],
           ]
         }