diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx index 0272c014ab..365beede08 100644 --- a/package/src/components/MessageList/MessageList.tsx +++ b/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) => ( + +); + const keyExtractor = < StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, >( @@ -970,17 +979,23 @@ const MessageListWithContext = < return null; }; + const shouldApplyAndroidWorkaround = + inverted && Platform.OS === 'android' && Platform.Version >= 33; + return (