diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx
index b05e633842b16..16c29c7f51c90 100644
--- a/src/components/TabSelector/TabSelector.tsx
+++ b/src/components/TabSelector/TabSelector.tsx
@@ -28,16 +28,6 @@ type IconAndTitle = {
 
 function getIconAndTitle(route: string, translate: LocaleContextProps['translate']): IconAndTitle {
     switch (route) {
-        case CONST.DEBUG.DETAILS:
-            return {icon: Expensicons.Info, title: translate('debug.details')};
-        case CONST.DEBUG.JSON:
-            return {icon: Expensicons.Eye, title: translate('debug.JSON')};
-        case CONST.DEBUG.REPORT_ACTIONS:
-            return {icon: Expensicons.Document, title: translate('debug.reportActions')};
-        case CONST.DEBUG.REPORT_ACTION_PREVIEW:
-            return {icon: Expensicons.Document, title: translate('debug.reportActionPreview')};
-        case CONST.DEBUG.TRANSACTION_VIOLATIONS:
-            return {icon: Expensicons.Exclamation, title: translate('debug.violations')};
         case CONST.TAB_REQUEST.MANUAL:
             return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')};
         case CONST.TAB_REQUEST.SCAN:
diff --git a/src/components/TabSelector/getBackground/index.native.ts b/src/components/TabSelector/getBackground/index.native.ts
index 09a9b3f347e63..2fd2a2ef6dd3b 100644
--- a/src/components/TabSelector/getBackground/index.native.ts
+++ b/src/components/TabSelector/getBackground/index.native.ts
@@ -1,15 +1,20 @@
 import type {Animated} from 'react-native';
 import type GetBackgroudColor from './types';
 
-const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position}) => {
+const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position, isActive}) => {
     if (routesLength > 1) {
         const inputRange = Array.from({length: routesLength}, (v, i) => i);
-        return position?.interpolate({
-            inputRange,
-            outputRange: inputRange.map((i) => {
-                return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG;
-            }),
-        }) as unknown as Animated.AnimatedInterpolation<string>;
+
+        if (position) {
+            return position.interpolate({
+                inputRange,
+                outputRange: inputRange.map((i) => {
+                    return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG;
+                }),
+            }) as unknown as Animated.AnimatedInterpolation<string>;
+        }
+
+        return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG;
     }
     return theme.border;
 };
diff --git a/src/components/TabSelector/getBackground/types.ts b/src/components/TabSelector/getBackground/types.ts
index f66ee37e9b730..a207c3bab35eb 100644
--- a/src/components/TabSelector/getBackground/types.ts
+++ b/src/components/TabSelector/getBackground/types.ts
@@ -28,7 +28,7 @@ type GetBackgroudColorConfig = {
     /**
      * The animated position interpolation.
      */
-    position: Animated.AnimatedInterpolation<number>;
+    position: Animated.AnimatedInterpolation<number> | undefined;
 
     /**
      * Whether the tab is active.
diff --git a/src/components/TabSelector/getOpacity/index.native.ts b/src/components/TabSelector/getOpacity/index.native.ts
index a59d32c2db6e5..fcdb1d0fc31ef 100644
--- a/src/components/TabSelector/getOpacity/index.native.ts
+++ b/src/components/TabSelector/getOpacity/index.native.ts
@@ -1,16 +1,20 @@
 import type GetOpacity from './types';
 
-const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position}) => {
+const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position, isActive}) => {
     const activeValue = active ? 1 : 0;
     const inactiveValue = active ? 0 : 1;
 
     if (routesLength > 1) {
         const inputRange = Array.from({length: routesLength}, (v, i) => i);
 
-        return position?.interpolate({
-            inputRange,
-            outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)),
-        });
+        if (position) {
+            return position.interpolate({
+                inputRange,
+                outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)),
+            });
+        }
+
+        return affectedTabs.includes(tabIndex) && isActive ? activeValue : inactiveValue;
     }
     return activeValue;
 };
diff --git a/src/components/TabSelector/getOpacity/types.ts b/src/components/TabSelector/getOpacity/types.ts
index 46e4568b27838..a15eacf0d8ccb 100644
--- a/src/components/TabSelector/getOpacity/types.ts
+++ b/src/components/TabSelector/getOpacity/types.ts
@@ -27,7 +27,7 @@ type GetOpacityConfig = {
     /**
      * Scene's position, value which we would like to interpolate.
      */
-    position: Animated.AnimatedInterpolation<number>;
+    position: Animated.AnimatedInterpolation<number> | undefined;
 
     /**
      * Whether the tab is active.
diff --git a/src/libs/Navigation/DebugTabNavigator.tsx b/src/libs/Navigation/DebugTabNavigator.tsx
new file mode 100644
index 0000000000000..3b705596cb9b6
--- /dev/null
+++ b/src/libs/Navigation/DebugTabNavigator.tsx
@@ -0,0 +1,152 @@
+import type {EventMapCore, NavigationProp, NavigationState} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import React, {useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import getBackgroundColor from '@components/TabSelector/getBackground';
+import getOpacity from '@components/TabSelector/getOpacity';
+import TabSelectorItem from '@components/TabSelector/TabSelectorItem';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type IconAndTitle = {
+    icon: IconAsset;
+    title: string;
+};
+
+function getIconAndTitle(route: string, translate: LocaleContextProps['translate']): IconAndTitle {
+    switch (route) {
+        case CONST.DEBUG.DETAILS:
+            return {icon: Expensicons.Info, title: translate('debug.details')};
+        case CONST.DEBUG.JSON:
+            return {icon: Expensicons.Eye, title: translate('debug.JSON')};
+        case CONST.DEBUG.REPORT_ACTIONS:
+            return {icon: Expensicons.Document, title: translate('debug.reportActions')};
+        case CONST.DEBUG.REPORT_ACTION_PREVIEW:
+            return {icon: Expensicons.Document, title: translate('debug.reportActionPreview')};
+        case CONST.DEBUG.TRANSACTION_VIOLATIONS:
+            return {icon: Expensicons.Exclamation, title: translate('debug.violations')};
+        default:
+            throw new Error(`Route ${route} has no icon nor title set.`);
+    }
+}
+
+const StackNavigator = createStackNavigator();
+
+type DebugTabNavigatorRoute = {
+    name: string;
+    component: () => React.ReactNode;
+};
+
+type DebugTabNavigatorRoutes = DebugTabNavigatorRoute[];
+
+type DebugTabNavigatorProps = {
+    id: string;
+    routes: DebugTabNavigatorRoutes;
+};
+
+function DebugTabNavigator({id, routes}: DebugTabNavigatorProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const navigation = useNavigation<NavigationProp<Record<string, void>>>();
+    const {translate} = useLocalize();
+    const [currentTab, setCurrentTab] = useState(routes.at(0)?.name);
+    const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: routes.length}, (v, i) => i), [routes.length]);
+    const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs);
+
+    useEffect(() => {
+        // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition.
+        setTimeout(() => {
+            setAffectedAnimatedTabs(defaultAffectedAnimatedTabs);
+        }, CONST.ANIMATED_TRANSITION);
+    }, [defaultAffectedAnimatedTabs, currentTab]);
+
+    return (
+        <>
+            <View style={styles.tabSelector}>
+                {routes.map((route, index) => {
+                    const isActive = route.name === currentTab;
+                    const activeOpacity = getOpacity({
+                        routesLength: routes.length,
+                        tabIndex: index,
+                        active: true,
+                        affectedTabs: affectedAnimatedTabs,
+                        position: undefined,
+                        isActive,
+                    });
+                    const inactiveOpacity = getOpacity({
+                        routesLength: routes.length,
+                        tabIndex: index,
+                        active: false,
+                        affectedTabs: affectedAnimatedTabs,
+                        position: undefined,
+                        isActive,
+                    });
+                    const backgroundColor = getBackgroundColor({
+                        routesLength: routes.length,
+                        tabIndex: index,
+                        affectedTabs: affectedAnimatedTabs,
+                        theme,
+                        position: undefined,
+                        isActive,
+                    });
+                    const {icon, title} = getIconAndTitle(route.name, translate);
+
+                    const onPress = () => {
+                        navigation.navigate(route.name);
+                        setCurrentTab(route.name);
+                    };
+
+                    return (
+                        <TabSelectorItem
+                            key={route.name}
+                            icon={icon}
+                            title={title}
+                            onPress={onPress}
+                            activeOpacity={activeOpacity}
+                            inactiveOpacity={inactiveOpacity}
+                            backgroundColor={backgroundColor}
+                            isActive={isActive}
+                        />
+                    );
+                })}
+            </View>
+            <StackNavigator.Navigator
+                id={id}
+                screenOptions={{
+                    animationEnabled: false,
+                    headerShown: false,
+                }}
+                screenListeners={{
+                    state: (e) => {
+                        const event = e as unknown as EventMapCore<NavigationState>['state'];
+                        const state = event.data.state;
+                        const routeNames = state.routeNames;
+                        const newSelectedTab = state.routes.at(state.routes.length - 1)?.name;
+                        if (currentTab === newSelectedTab || (currentTab && !routeNames.includes(currentTab))) {
+                            return;
+                        }
+                        setCurrentTab(newSelectedTab);
+                    },
+                }}
+            >
+                {routes.map((route) => (
+                    <StackNavigator.Screen
+                        key={route.name}
+                        name={route.name}
+                        component={route.component}
+                    />
+                ))}
+            </StackNavigator.Navigator>
+        </>
+    );
+}
+
+export default DebugTabNavigator;
+
+export type {DebugTabNavigatorRoutes};
diff --git a/src/pages/Debug/Report/DebugReportActions.tsx b/src/pages/Debug/Report/DebugReportActions.tsx
index 9368ca5116bd9..fdc2aa8b1ca84 100644
--- a/src/pages/Debug/Report/DebugReportActions.tsx
+++ b/src/pages/Debug/Report/DebugReportActions.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import type {ListRenderItemInfo} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
-import FlatList from '@components/FlatList';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -28,17 +26,20 @@ function DebugReportActions({reportID}: DebugReportActionsProps) {
         canEvict: false,
         selector: (allReportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, canUserPerformWriteAction, true),
     });
-    const renderItem = ({item}: ListRenderItemInfo<ReportAction>) => (
+
+    const renderItem = (item: ReportAction, index: number) => (
         <PressableWithFeedback
             accessibilityLabel={translate('common.details')}
             onPress={() => Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION.getRoute(reportID, item.reportActionID))}
             style={({pressed}) => [styles.flexRow, styles.justifyContentBetween, pressed && styles.hoveredComponentBG, styles.p4]}
             hoverStyle={styles.hoveredComponentBG}
+            key={index}
         >
             <Text>{item.reportActionID}</Text>
             <Text style={styles.textLabelSupporting}>{datetimeToCalendarTime(item.created, false, false)}</Text>
         </PressableWithFeedback>
     );
+
     return (
         <ScrollView style={styles.mv5}>
             <Button
@@ -48,11 +49,9 @@ function DebugReportActions({reportID}: DebugReportActionsProps) {
                 onPress={() => Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION_CREATE.getRoute(reportID))}
                 style={[styles.pb5, styles.ph3]}
             />
-            <FlatList
-                data={sortedAllReportActions}
-                renderItem={renderItem}
-                scrollEnabled={false}
-            />
+            {/* This list was previously rendered as a FlatList, but it turned out that it caused the component to flash in some cases,
+            so it was replaced by this solution. */}
+            {sortedAllReportActions?.map((item, index) => renderItem(item, index))}
         </ScrollView>
     );
 }
diff --git a/src/pages/Debug/Report/DebugReportPage.tsx b/src/pages/Debug/Report/DebugReportPage.tsx
index a31597bb59dd8..d706dbe97610f 100644
--- a/src/pages/Debug/Report/DebugReportPage.tsx
+++ b/src/pages/Debug/Report/DebugReportPage.tsx
@@ -1,11 +1,10 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
-import TabSelector from '@components/TabSelector/TabSelector';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -14,8 +13,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {navigateToConciergeChatAndDeleteReport} from '@libs/actions/Report';
 import DebugUtils from '@libs/DebugUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type {DebugTabNavigatorRoutes} from '@libs/Navigation/DebugTabNavigator';
+import DebugTabNavigator from '@libs/Navigation/DebugTabNavigator';
 import Navigation from '@libs/Navigation/Navigation';
-import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -114,6 +114,97 @@ function DebugReportPage({
         ];
     }, [report, reportActions, reportID, transactionViolations, translate]);
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.REPORT}
+                data={report}
+                onSave={(data) => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, data);
+                }}
+                onDelete={() => {
+                    navigateToConciergeChatAndDeleteReport(reportID, true, true);
+                }}
+                validate={DebugUtils.validateReportDraftProperty}
+            >
+                <View style={[styles.mb5, styles.ph5, styles.gap5]}>
+                    {metadata?.map(({title, subtitle, message, action}) => (
+                        <View style={[StyleUtils.getBackgroundColorStyle(theme.cardBG), styles.p5, styles.br4, styles.flexColumn, styles.gap2]}>
+                            <View style={[styles.flexRow, styles.justifyContentBetween]}>
+                                <Text style={styles.h4}>{title}</Text>
+                                <Text>{subtitle}</Text>
+                            </View>
+                            {!!message && <Text style={styles.textSupporting}>{message}</Text>}
+                            {!!action && (
+                                <Button
+                                    text={action.name}
+                                    onPress={action.callback}
+                                />
+                            )}
+                        </View>
+                    ))}
+                    <Button
+                        text={translate('debug.viewReport')}
+                        onPress={() => {
+                            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
+                        }}
+                        icon={Expensicons.Eye}
+                    />
+                    {!!transactionID && (
+                        <Button
+                            text={translate('debug.viewTransaction')}
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.DEBUG_TRANSACTION.getRoute(transactionID));
+                            }}
+                        />
+                    )}
+                </View>
+            </DebugDetails>
+        ),
+        [
+            StyleUtils,
+            metadata,
+            report,
+            reportID,
+            styles.br4,
+            styles.flexColumn,
+            styles.flexRow,
+            styles.gap2,
+            styles.gap5,
+            styles.h4,
+            styles.justifyContentBetween,
+            styles.mb5,
+            styles.p5,
+            styles.ph5,
+            styles.textSupporting,
+            theme.cardBG,
+            transactionID,
+            translate,
+        ],
+    );
+
+    const DebugJSONTab = useCallback(() => <DebugJSON data={report ?? {}} />, [report]);
+
+    const DebugReportActionsTab = useCallback(() => <DebugReportActions reportID={reportID} />, [reportID]);
+
+    const routes = useMemo<DebugTabNavigatorRoutes>(
+        () => [
+            {
+                name: CONST.DEBUG.DETAILS,
+                component: DebugDetailsTab,
+            },
+            {
+                name: CONST.DEBUG.JSON,
+                component: DebugJSONTab,
+            },
+            {
+                name: CONST.DEBUG.REPORT_ACTIONS,
+                component: DebugReportActionsTab,
+            },
+        ],
+        [DebugDetailsTab, DebugJSONTab, DebugReportActionsTab],
+    );
+
     if (!report) {
         return <NotFoundPage />;
     }
@@ -131,61 +222,10 @@ function DebugReportPage({
                         title={`${translate('debug.debug')} - ${translate('debug.report')}`}
                         onBackButtonPress={Navigation.goBack}
                     />
-                    <OnyxTabNavigator
-                        id={CONST.TAB.DEBUG_TAB_ID}
-                        tabBar={TabSelector}
-                    >
-                        <TopTab.Screen name={CONST.DEBUG.DETAILS}>
-                            {() => (
-                                <DebugDetails
-                                    formType={CONST.DEBUG.FORMS.REPORT}
-                                    data={report}
-                                    onSave={(data) => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, data);
-                                    }}
-                                    onDelete={() => {
-                                        navigateToConciergeChatAndDeleteReport(reportID, true, true);
-                                    }}
-                                    validate={DebugUtils.validateReportDraftProperty}
-                                >
-                                    <View style={[styles.mb5, styles.ph5, styles.gap5]}>
-                                        {metadata?.map(({title, subtitle, message, action}) => (
-                                            <View style={[StyleUtils.getBackgroundColorStyle(theme.cardBG), styles.p5, styles.br4, styles.flexColumn, styles.gap2]}>
-                                                <View style={[styles.flexRow, styles.justifyContentBetween]}>
-                                                    <Text style={styles.h4}>{title}</Text>
-                                                    <Text>{subtitle}</Text>
-                                                </View>
-                                                {!!message && <Text style={styles.textSupporting}>{message}</Text>}
-                                                {!!action && (
-                                                    <Button
-                                                        text={action.name}
-                                                        onPress={action.callback}
-                                                    />
-                                                )}
-                                            </View>
-                                        ))}
-                                        <Button
-                                            text={translate('debug.viewReport')}
-                                            onPress={() => {
-                                                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
-                                            }}
-                                            icon={Expensicons.Eye}
-                                        />
-                                        {!!transactionID && (
-                                            <Button
-                                                text={translate('debug.viewTransaction')}
-                                                onPress={() => {
-                                                    Navigation.navigate(ROUTES.DEBUG_TRANSACTION.getRoute(transactionID));
-                                                }}
-                                            />
-                                        )}
-                                    </View>
-                                </DebugDetails>
-                            )}
-                        </TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.JSON}>{() => <DebugJSON data={report ?? {}} />}</TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.REPORT_ACTIONS}>{() => <DebugReportActions reportID={reportID} />}</TopTab.Screen>
-                    </OnyxTabNavigator>
+                    <DebugTabNavigator
+                        id={CONST.DEBUG.FORMS.REPORT}
+                        routes={routes}
+                    />
                 </View>
             )}
         </ScreenWrapper>
diff --git a/src/pages/Debug/ReportAction/DebugReportActionPage.tsx b/src/pages/Debug/ReportAction/DebugReportActionPage.tsx
index 8c9e33af7f856..a7b6499c70aad 100644
--- a/src/pages/Debug/ReportAction/DebugReportActionPage.tsx
+++ b/src/pages/Debug/ReportAction/DebugReportActionPage.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DebugUtils from '@libs/DebugUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type {DebugTabNavigatorRoutes} from '@libs/Navigation/DebugTabNavigator';
+import DebugTabNavigator from '@libs/Navigation/DebugTabNavigator';
 import Navigation from '@libs/Navigation/Navigation';
-import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -38,6 +38,52 @@ function DebugReportActionPage({
     });
     const transactionID = ReportActionsUtils.getLinkedTransactionID(reportAction);
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.REPORT_ACTION}
+                data={reportAction}
+                onSave={(data) => {
+                    Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: data});
+                }}
+                onDelete={() => {
+                    Navigation.goBack();
+                    // We need to wait for navigation animations to finish before deleting an action,
+                    // otherwise the user will see a not found page briefly.
+                    InteractionManager.runAfterInteractions(() => {
+                        Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: null});
+                    });
+                }}
+                validate={DebugUtils.validateReportActionDraftProperty}
+            >
+                {!!transactionID && (
+                    <View style={[styles.mh5, styles.mb5]}>
+                        <Button
+                            text={translate('debug.viewTransaction')}
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.DEBUG_TRANSACTION.getRoute(transactionID));
+                            }}
+                        />
+                    </View>
+                )}
+            </DebugDetails>
+        ),
+        [reportAction, reportActionID, reportID, styles.mb5, styles.mh5, transactionID, translate],
+    );
+
+    const DebugJSONTab = useCallback(() => <DebugJSON data={reportAction ?? {}} />, [reportAction]);
+
+    const DebugReportActionPreviewTab = useCallback(() => <DebugReportActionPreview reportAction={reportAction} />, [reportAction]);
+
+    const routes = useMemo<DebugTabNavigatorRoutes>(
+        () => [
+            {name: CONST.DEBUG.DETAILS, component: DebugDetailsTab},
+            {name: CONST.DEBUG.JSON, component: DebugJSONTab},
+            {name: CONST.DEBUG.REPORT_ACTION_PREVIEW, component: DebugReportActionPreviewTab},
+        ],
+        [DebugDetailsTab, DebugJSONTab, DebugReportActionPreviewTab],
+    );
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -51,44 +97,10 @@ function DebugReportActionPage({
                         title={`${translate('debug.debug')} - ${translate('debug.reportAction')}`}
                         onBackButtonPress={Navigation.goBack}
                     />
-                    <OnyxTabNavigator
+                    <DebugTabNavigator
                         id={CONST.TAB.DEBUG_TAB_ID}
-                        tabBar={TabSelector}
-                    >
-                        <TopTab.Screen name={CONST.DEBUG.DETAILS}>
-                            {() => (
-                                <DebugDetails
-                                    formType={CONST.DEBUG.FORMS.REPORT_ACTION}
-                                    data={reportAction}
-                                    onSave={(data) => {
-                                        Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: data});
-                                    }}
-                                    onDelete={() => {
-                                        Navigation.goBack();
-                                        // We need to wait for navigation animations to finish before deleting an action,
-                                        // otherwise the user will see a not found page briefly.
-                                        InteractionManager.runAfterInteractions(() => {
-                                            Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: null});
-                                        });
-                                    }}
-                                    validate={DebugUtils.validateReportActionDraftProperty}
-                                >
-                                    {!!transactionID && (
-                                        <View style={[styles.mh5, styles.mb5]}>
-                                            <Button
-                                                text={translate('debug.viewTransaction')}
-                                                onPress={() => {
-                                                    Navigation.navigate(ROUTES.DEBUG_TRANSACTION.getRoute(transactionID));
-                                                }}
-                                            />
-                                        </View>
-                                    )}
-                                </DebugDetails>
-                            )}
-                        </TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.JSON}>{() => <DebugJSON data={reportAction ?? {}} />}</TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.REPORT_ACTION_PREVIEW}>{() => <DebugReportActionPreview reportAction={reportAction} />}</TopTab.Screen>
-                    </OnyxTabNavigator>
+                        routes={routes}
+                    />
                 </View>
             )}
         </ScreenWrapper>
diff --git a/src/pages/Debug/Transaction/DebugTransactionPage.tsx b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
index 86a8e3ded86af..453d87d07cf46 100644
--- a/src/pages/Debug/Transaction/DebugTransactionPage.tsx
+++ b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
@@ -1,17 +1,17 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Debug from '@libs/actions/Debug';
 import DebugUtils from '@libs/DebugUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type {DebugTabNavigatorRoutes} from '@libs/Navigation/DebugTabNavigator';
+import DebugTabNavigator from '@libs/Navigation/DebugTabNavigator';
 import Navigation from '@libs/Navigation/Navigation';
-import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -40,6 +40,52 @@ function DebugTransactionPage({
 
     const styles = useThemeStyles();
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.TRANSACTION}
+                data={transaction}
+                policyID={report?.policyID}
+                policyHasEnabledTags={TagsOptionsListUtils.hasEnabledTags(policyTagLists)}
+                onSave={(data) => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, data);
+                }}
+                onDelete={() => {
+                    Navigation.goBack();
+                    // We need to wait for navigation animations to finish before deleting a transaction,
+                    // otherwise the user will see a not found page briefly.
+                    InteractionManager.runAfterInteractions(() => {
+                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, null);
+                    });
+                }}
+                validate={DebugUtils.validateTransactionDraftProperty}
+            >
+                <View style={[styles.mh5, styles.mb5]}>
+                    <Button
+                        text={translate('debug.viewReport')}
+                        onPress={() => {
+                            Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(`${transaction?.reportID}`));
+                        }}
+                    />
+                </View>
+            </DebugDetails>
+        ),
+        [policyTagLists, report?.policyID, styles.mb5, styles.mh5, transaction, transactionID, translate],
+    );
+
+    const DebugJSONTab = useCallback(() => <DebugJSON data={transaction ?? {}} />, [transaction]);
+
+    const DebugTransactionViolationsTab = useCallback(() => <DebugTransactionViolations transactionID={transactionID} />, [transactionID]);
+
+    const routes = useMemo<DebugTabNavigatorRoutes>(
+        () => [
+            {name: CONST.DEBUG.DETAILS, component: DebugDetailsTab},
+            {name: CONST.DEBUG.JSON, component: DebugJSONTab},
+            {name: CONST.DEBUG.TRANSACTION_VIOLATIONS, component: DebugTransactionViolationsTab},
+        ],
+        [DebugDetailsTab, DebugJSONTab, DebugTransactionViolationsTab],
+    );
+
     if (!transaction) {
         return <NotFoundPage />;
     }
@@ -57,44 +103,10 @@ function DebugTransactionPage({
                         title={`${translate('debug.debug')} - ${translate('debug.transaction')}`}
                         onBackButtonPress={Navigation.goBack}
                     />
-                    <OnyxTabNavigator
+                    <DebugTabNavigator
                         id={CONST.TAB.DEBUG_TAB_ID}
-                        tabBar={TabSelector}
-                    >
-                        <TopTab.Screen name={CONST.DEBUG.DETAILS}>
-                            {() => (
-                                <DebugDetails
-                                    formType={CONST.DEBUG.FORMS.TRANSACTION}
-                                    data={transaction}
-                                    policyID={report?.policyID}
-                                    policyHasEnabledTags={TagsOptionsListUtils.hasEnabledTags(policyTagLists)}
-                                    onSave={(data) => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, data);
-                                    }}
-                                    onDelete={() => {
-                                        Navigation.goBack();
-                                        // We need to wait for navigation animations to finish before deleting a transaction,
-                                        // otherwise the user will see a not found page briefly.
-                                        InteractionManager.runAfterInteractions(() => {
-                                            Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, null);
-                                        });
-                                    }}
-                                    validate={DebugUtils.validateTransactionDraftProperty}
-                                >
-                                    <View style={[styles.mh5, styles.mb5]}>
-                                        <Button
-                                            text={translate('debug.viewReport')}
-                                            onPress={() => {
-                                                Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(transaction?.reportID ?? ''));
-                                            }}
-                                        />
-                                    </View>
-                                </DebugDetails>
-                            )}
-                        </TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.JSON}>{() => <DebugJSON data={transaction ?? {}} />}</TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.TRANSACTION_VIOLATIONS}>{() => <DebugTransactionViolations transactionID={transactionID} />}</TopTab.Screen>
-                    </OnyxTabNavigator>
+                        routes={routes}
+                    />
                 </View>
             )}
         </ScreenWrapper>
diff --git a/src/pages/Debug/Transaction/DebugTransactionViolations.tsx b/src/pages/Debug/Transaction/DebugTransactionViolations.tsx
index d3e37f726a96a..e13fd01fdcd70 100644
--- a/src/pages/Debug/Transaction/DebugTransactionViolations.tsx
+++ b/src/pages/Debug/Transaction/DebugTransactionViolations.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import type {ListRenderItemInfo} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
-import FlatList from '@components/FlatList';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -23,12 +21,13 @@ function DebugTransactionViolations({transactionID}: DebugTransactionViolationsP
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const renderItem = ({item, index}: ListRenderItemInfo<TransactionViolation>) => (
+    const renderItem = (item: TransactionViolation, index: number) => (
         <PressableWithFeedback
             accessibilityLabel={translate('common.details')}
             onPress={() => Navigation.navigate(ROUTES.DEBUG_TRANSACTION_VIOLATION.getRoute(transactionID, String(index)))}
             style={({pressed}) => [styles.flexRow, styles.justifyContentBetween, pressed && styles.hoveredComponentBG, styles.p4]}
             hoverStyle={styles.hoveredComponentBG}
+            key={index}
         >
             <Text>{item.type}</Text>
             <Text>{item.name}</Text>
@@ -44,11 +43,9 @@ function DebugTransactionViolations({transactionID}: DebugTransactionViolationsP
                 onPress={() => Navigation.navigate(ROUTES.DEBUG_TRANSACTION_VIOLATION_CREATE.getRoute(transactionID))}
                 style={[styles.pb5, styles.ph3]}
             />
-            <FlatList
-                data={transactionViolations}
-                renderItem={renderItem}
-                scrollEnabled={false}
-            />
+            {/* This list was previously rendered as a FlatList, but it turned out that it caused the component to flash in some cases,
+            so it was replaced by this solution. */}
+            {transactionViolations?.map((item, index) => renderItem(item, index))}
         </ScrollView>
     );
 }
diff --git a/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx b/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
index f615060ab6df4..9db84c341d591 100644
--- a/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
+++ b/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
@@ -3,14 +3,14 @@ import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Debug from '@libs/actions/Debug';
 import DebugUtils from '@libs/DebugUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type {DebugTabNavigatorRoutes} from '@libs/Navigation/DebugTabNavigator';
+import DebugTabNavigator from '@libs/Navigation/DebugTabNavigator';
 import Navigation from '@libs/Navigation/Navigation';
-import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
 import DebugDetails from '@pages/Debug/DebugDetails';
@@ -53,6 +53,29 @@ function DebugTransactionViolationPage({
         });
     }, [index, transactionID, transactionViolations]);
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.TRANSACTION_VIOLATION}
+                data={transactionViolation}
+                onSave={saveChanges}
+                onDelete={deleteTransactionViolation}
+                validate={DebugUtils.validateTransactionViolationDraftProperty}
+            />
+        ),
+        [deleteTransactionViolation, saveChanges, transactionViolation],
+    );
+
+    const DebugJSONTab = useCallback(() => <DebugJSON data={transactionViolation ?? {}} />, [transactionViolation]);
+
+    const routes = useMemo<DebugTabNavigatorRoutes>(
+        () => [
+            {name: CONST.DEBUG.DETAILS, component: DebugDetailsTab},
+            {name: CONST.DEBUG.JSON, component: DebugJSONTab},
+        ],
+        [DebugDetailsTab, DebugJSONTab],
+    );
+
     if (!transactionViolation) {
         return <NotFoundPage />;
     }
@@ -70,23 +93,10 @@ function DebugTransactionViolationPage({
                         title={`${translate('debug.debug')} - ${translate('debug.transactionViolation')}`}
                         onBackButtonPress={Navigation.goBack}
                     />
-                    <OnyxTabNavigator
+                    <DebugTabNavigator
                         id={CONST.TAB.DEBUG_TAB_ID}
-                        tabBar={TabSelector}
-                    >
-                        <TopTab.Screen name={CONST.DEBUG.DETAILS}>
-                            {() => (
-                                <DebugDetails
-                                    formType={CONST.DEBUG.FORMS.TRANSACTION_VIOLATION}
-                                    data={transactionViolation}
-                                    onSave={saveChanges}
-                                    onDelete={deleteTransactionViolation}
-                                    validate={DebugUtils.validateTransactionViolationDraftProperty}
-                                />
-                            )}
-                        </TopTab.Screen>
-                        <TopTab.Screen name={CONST.DEBUG.JSON}>{() => <DebugJSON data={transactionViolation ?? {}} />}</TopTab.Screen>
-                    </OnyxTabNavigator>
+                        routes={routes}
+                    />
                 </View>
             )}
         </ScreenWrapper>