Merge pull request Expensify#38607 from tienifr/fix/38155

Fix: Debug console always scrolls to new data position

src/pages/settings/AboutPage/ConsolePage.tsx

@@ -1,14 +1,15 @@
 import {format} from 'date-fns';
 import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {FlatList, View} from 'react-native';
+import {View} from 'react-native';
 import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import InvertedFlatList from '@components/InvertedFlatList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -69,7 +70,13 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const logsList = useMemo(() => (logs ? Object.values(logs).reverse() : []), [logs]);
+    const logsList = useMemo(
+        () =>
+            Object.entries(logs ?? {})
+                .map(([key, value]) => ({key, ...value}))
+                .reverse(),
+        [logs],
+    );
 
     useEffect(() => {
         if (!shouldStoreLogs) {
@@ -136,11 +143,10 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
-                <FlatList
+                <InvertedFlatList
                     data={logsList}
                     renderItem={renderItem}
                     contentContainerStyle={styles.p5}
-                    inverted
                     ListEmptyComponent={<Text>{translate('initialSettingsPage.debugConsole.noLogsAvailable')}</Text>}
                 />
             </View>