From 95ac5024ccfb25f090066c85d96fea036e4a8f21 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 5 Dec 2024 21:13:33 +0100
Subject: [PATCH 1/7] replace FlatList with .map solution

---
 .../Transaction/DebugTransactionViolations.tsx      | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/pages/Debug/Transaction/DebugTransactionViolations.tsx b/src/pages/Debug/Transaction/DebugTransactionViolations.tsx
index d3e37f726a96..e13fd01fdcd7 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>
     );
 }

From 0e58ab322bf988f47f8628c24fa5c97b2a6deda2 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Fri, 6 Dec 2024 11:31:09 +0100
Subject: [PATCH 2/7] Replace FlatList with .map solution in
 DebugReportActions.tsx

---
 src/pages/Debug/Report/DebugReportActions.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/Debug/Report/DebugReportActions.tsx b/src/pages/Debug/Report/DebugReportActions.tsx
index 9368ca5116bd..fdc2aa8b1ca8 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>
     );
 }

From 090a98a21335ce97a956ec92c47075b03d3dbd6e Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Mon, 16 Dec 2024 20:56:43 +0000
Subject: [PATCH 3/7] fix(debug mode): screen flashing when switching tabs or
 navigating back from another screen

---
 src/components/TabSelector/TabSelector.tsx    |  10 --
 src/libs/Navigation/DebugTabNavigator.tsx     | 153 +++++++++++++++++
 src/pages/Debug/Report/DebugReportPage.tsx    | 158 +++++++++++-------
 .../ReportAction/DebugReportActionPage.tsx    |  84 ++++++----
 .../Transaction/DebugTransactionPage.tsx      |  80 +++++----
 .../DebugTransactionViolationPage.tsx         |  46 +++--
 6 files changed, 374 insertions(+), 157 deletions(-)
 create mode 100644 src/libs/Navigation/DebugTabNavigator.tsx

diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx
index b05e633842b1..16c29c7f51c9 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/libs/Navigation/DebugTabNavigator.tsx b/src/libs/Navigation/DebugTabNavigator.tsx
new file mode 100644
index 000000000000..9581ba6bd96c
--- /dev/null
+++ b/src/libs/Navigation/DebugTabNavigator.tsx
@@ -0,0 +1,153 @@
+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 type {Animated} from 'react-native';
+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: {} as Animated.AnimatedInterpolation<number>,
+                        isActive,
+                    });
+                    const inactiveOpacity = getOpacity({
+                        routesLength: routes.length,
+                        tabIndex: index,
+                        active: false,
+                        affectedTabs: affectedAnimatedTabs,
+                        position: {} as Animated.AnimatedInterpolation<number>,
+                        isActive,
+                    });
+                    const backgroundColor = getBackgroundColor({
+                        routesLength: routes.length,
+                        tabIndex: index,
+                        affectedTabs: affectedAnimatedTabs,
+                        theme,
+                        position: {} as Animated.AnimatedInterpolation<number>,
+                        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/DebugReportPage.tsx b/src/pages/Debug/Report/DebugReportPage.tsx
index 16e23ed4c608..df898736a6f9 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,98 @@ 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={() => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, null);
+                    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,62 +223,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={() => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, null);
-                                        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 e072913c0c03..c6b793174465 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 {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,48 @@ function DebugReportActionPage({
     });
     const transactionID = ReportActionsUtils.getLinkedTransactionID(reportAction);
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.REPORT_ACTION}
+                data={reportAction}
+                onSave={(data) => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: data});
+                }}
+                onDelete={() => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: null});
+                    Navigation.goBack();
+                }}
+                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,40 +93,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.setDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: data});
-                                    }}
-                                    onDelete={() => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: null});
-                                        Navigation.goBack();
-                                    }}
-                                    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 b729d18374e9..d6794086d51a 100644
--- a/src/pages/Debug/Transaction/DebugTransactionPage.tsx
+++ b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
@@ -1,17 +1,17 @@
-import React 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 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';
@@ -34,6 +34,46 @@ function DebugTransactionPage({
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const styles = useThemeStyles();
 
+    const DebugDetailsTab = useCallback(
+        () => (
+            <DebugDetails
+                formType={CONST.DEBUG.FORMS.TRANSACTION}
+                data={transaction}
+                onSave={(data) => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, data);
+                }}
+                onDelete={() => {
+                    Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, null);
+                    Navigation.goBack();
+                }}
+                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>
+        ),
+        [styles.mb5, styles.mh5, transaction, transactionID, translate],
+    );
+
+    const DebugJSONTab = useCallback(() => <DebugJSON data={transaction ?? {}} />, []);
+
+    const DebugTransactionViolationsTab = useCallback(() => <DebugTransactionViolations 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 />;
     }
@@ -51,38 +91,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}
-                                    onSave={(data) => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, data);
-                                    }}
-                                    onDelete={() => {
-                                        Debug.setDebugData(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, null);
-                                        Navigation.goBack();
-                                    }}
-                                    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/TransactionViolation/DebugTransactionViolationPage.tsx b/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
index 2c44e936f10f..950c3f4243c7 100644
--- a/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
+++ b/src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx
@@ -3,14 +3,14 @@ import {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';
@@ -49,6 +49,29 @@ function DebugTransactionViolationPage({
         Navigation.goBack();
     }, [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 />;
     }
@@ -66,23 +89,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>

From 6acbbcbfc06d2bef298ea112a5c530d8b95a7ee2 Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <48553277+pac-guerreiro@users.noreply.github.com>
Date: Tue, 17 Dec 2024 15:29:37 +0000
Subject: [PATCH 4/7] chore: resolve eslint issues

---
 src/pages/Debug/Transaction/DebugTransactionPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Debug/Transaction/DebugTransactionPage.tsx b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
index d6794086d51a..a6dc24603888 100644
--- a/src/pages/Debug/Transaction/DebugTransactionPage.tsx
+++ b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
@@ -61,9 +61,9 @@ function DebugTransactionPage({
         [styles.mb5, styles.mh5, transaction, transactionID, translate],
     );
 
-    const DebugJSONTab = useCallback(() => <DebugJSON data={transaction ?? {}} />, []);
+    const DebugJSONTab = useCallback(() => <DebugJSON data={transaction ?? {}} />, [transaction]);
 
-    const DebugTransactionViolationsTab = useCallback(() => <DebugTransactionViolations transactionID={transactionID} />, []);
+    const DebugTransactionViolationsTab = useCallback(() => <DebugTransactionViolations transactionID={transactionID} />, [transactionID]);
 
     const routes = useMemo<DebugTabNavigatorRoutes>(
         () => [

From 3430d4792471e95593abdd4a9d1cec04e5bde55e Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Tue, 17 Dec 2024 16:25:13 +0000
Subject: [PATCH 5/7] chore: resolve eslint issues

---
 src/ROUTES.ts                                        | 2 +-
 src/pages/Debug/Transaction/DebugTransactionPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index b9544d81bece..9fb069f58cc8 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1777,7 +1777,7 @@ const ROUTES = {
     },
     DEBUG_REPORT: {
         route: 'debug/report/:reportID',
-        getRoute: (reportID: string) => `debug/report/${reportID}` as const,
+        getRoute: (reportID = '') => `debug/report/${reportID}` as const,
     },
     DEBUG_REPORT_TAB_DETAILS: {
         route: 'debug/report/:reportID/details',
diff --git a/src/pages/Debug/Transaction/DebugTransactionPage.tsx b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
index a6dc24603888..ac4f9689abdd 100644
--- a/src/pages/Debug/Transaction/DebugTransactionPage.tsx
+++ b/src/pages/Debug/Transaction/DebugTransactionPage.tsx
@@ -52,7 +52,7 @@ function DebugTransactionPage({
                     <Button
                         text={translate('debug.viewReport')}
                         onPress={() => {
-                            Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(transaction?.reportID ?? ''));
+                            Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(transaction?.reportID));
                         }}
                     />
                 </View>

From 1115836cf67bf0c252d5ba745155d8a4ccf35d41 Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Wed, 18 Dec 2024 11:12:18 +0000
Subject: [PATCH 6/7] chore: resolve eslint issues

---
 src/ROUTES.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 9fb069f58cc8..57227a97a357 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1162,16 +1162,15 @@ const ROUTES = {
     },
     WORKSPACE_REPORT_FIELDS_LIST_VALUES: {
         route: 'settings/workspaces/:policyID/reportFields/listValues/:reportFieldID?',
-        getRoute: (policyID: string, reportFieldID?: string) => `settings/workspaces/${policyID}/reportFields/listValues/${encodeURIComponent(reportFieldID ?? '')}` as const,
+        getRoute: (policyID: string, reportFieldID = '') => `settings/workspaces/${policyID}/reportFields/listValues/${encodeURIComponent(reportFieldID)}` as const,
     },
     WORKSPACE_REPORT_FIELDS_ADD_VALUE: {
         route: 'settings/workspaces/:policyID/reportFields/addValue/:reportFieldID?',
-        getRoute: (policyID: string, reportFieldID?: string) => `settings/workspaces/${policyID}/reportFields/addValue/${encodeURIComponent(reportFieldID ?? '')}` as const,
+        getRoute: (policyID: string, reportFieldID = '') => `settings/workspaces/${policyID}/reportFields/addValue/${encodeURIComponent(reportFieldID)}` as const,
     },
     WORKSPACE_REPORT_FIELDS_VALUE_SETTINGS: {
         route: 'settings/workspaces/:policyID/reportFields/:valueIndex/:reportFieldID?',
-        getRoute: (policyID: string, valueIndex: number, reportFieldID?: string) =>
-            `settings/workspaces/${policyID}/reportFields/${valueIndex}/${encodeURIComponent(reportFieldID ?? '')}` as const,
+        getRoute: (policyID: string, valueIndex: number, reportFieldID = '') => `settings/workspaces/${policyID}/reportFields/${valueIndex}/${encodeURIComponent(reportFieldID)}` as const,
     },
     WORKSPACE_REPORT_FIELDS_EDIT_VALUE: {
         route: 'settings/workspaces/:policyID/reportFields/new/:valueIndex/edit',

From b6ccc0bd8ea2e9ba203292acefc2b05c55ae38fd Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Fri, 20 Dec 2024 14:05:37 +0000
Subject: [PATCH 7/7] fix(debug mode): app crashing when accessing debug
 details page

---
 .../TabSelector/getBackground/index.native.ts | 19 ++++++++++++-------
 .../TabSelector/getBackground/types.ts        |  2 +-
 .../TabSelector/getOpacity/index.native.ts    | 14 +++++++++-----
 .../TabSelector/getOpacity/types.ts           |  2 +-
 src/libs/Navigation/DebugTabNavigator.tsx     |  7 +++----
 5 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/TabSelector/getBackground/index.native.ts b/src/components/TabSelector/getBackground/index.native.ts
index 09a9b3f347e6..2fd2a2ef6dd3 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 f66ee37e9b73..a207c3bab35e 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 a59d32c2db6e..fcdb1d0fc31e 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 46e4568b2783..a15eacf0d8cc 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
index 9581ba6bd96c..3b705596cb9b 100644
--- a/src/libs/Navigation/DebugTabNavigator.tsx
+++ b/src/libs/Navigation/DebugTabNavigator.tsx
@@ -2,7 +2,6 @@ import type {EventMapCore, NavigationProp, NavigationState} from '@react-navigat
 import {useNavigation} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import React, {useEffect, useMemo, useState} from 'react';
-import type {Animated} from 'react-native';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
@@ -77,7 +76,7 @@ function DebugTabNavigator({id, routes}: DebugTabNavigatorProps) {
                         tabIndex: index,
                         active: true,
                         affectedTabs: affectedAnimatedTabs,
-                        position: {} as Animated.AnimatedInterpolation<number>,
+                        position: undefined,
                         isActive,
                     });
                     const inactiveOpacity = getOpacity({
@@ -85,7 +84,7 @@ function DebugTabNavigator({id, routes}: DebugTabNavigatorProps) {
                         tabIndex: index,
                         active: false,
                         affectedTabs: affectedAnimatedTabs,
-                        position: {} as Animated.AnimatedInterpolation<number>,
+                        position: undefined,
                         isActive,
                     });
                     const backgroundColor = getBackgroundColor({
@@ -93,7 +92,7 @@ function DebugTabNavigator({id, routes}: DebugTabNavigatorProps) {
                         tabIndex: index,
                         affectedTabs: affectedAnimatedTabs,
                         theme,
-                        position: {} as Animated.AnimatedInterpolation<number>,
+                        position: undefined,
                         isActive,
                     });
                     const {icon, title} = getIconAndTitle(route.name, translate);