[$250] Debug mode tabs not working properly

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.74-9
Reproducible in staging?: Y
Reproducible in production?: Reproduction blocked
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Enable debug mode.
2. Open a expense report
3. Click on header > debug mode.
4. Try switching between the tabs in the Debug Mode panel.

Expected Result:

Tab content should update accordingly when switching between tab headers.

Actual Result:

Clicking tab headers does not change the tab content — the display remains static or stuck.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-07-03.at.5.27.08.PM.mov

Recording.1372.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021942687199283346611
• Upwork Job ID: 1942687199283346611
• Last Price Increase: 2025-07-08
• Automatic offers:
• thelullabyy | Contributor | 107973282

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Debug mode tabs not working properly

What is the root cause of that problem?

The navigation between pages is not working properly, currently it is performed using useNavigation, which is why the error:

App/src/libs/Navigation/DebugTabNavigator.tsx

Line 56 in 5b2b9c6

const navigation = useNavigation<NavigationProp<Record<string, void>>>();

App/src/libs/Navigation/DebugTabNavigator.tsx

Line 101 in 5b2b9c6

navigation.navigate(route.name);

What changes do you think we should make in order to solve the problem?

We need to update the routing to use Navigation, as in all other components

1. Add to routes the route itself, where it should lead:

type DebugTabNavigatorRoute = {
 name: string;
 component: () => React.ReactNode;
 route: Route;
};

2. Change the routing in DebugTabNavigator to
   Navigation.navigate(route.route);

App/src/libs/Navigation/DebugTabNavigator.tsx

Line 101 in 5b2b9c6

navigation.navigate(route.name);

This is what routes will look like:

 const routes = useMemo<DebugTabNavigatorRoutes>(
 () => [
 {
 name: CONST.DEBUG.DETAILS,
 component: DebugDetailsTab,
 route: ROUTES.DEBUG_REPORT_TAB_DETAILS.getRoute(reportID),
 },
 {
 name: CONST.DEBUG.JSON,
 component: DebugJSONTab,
 route: ROUTES.DEBUG_REPORT_TAB_JSON.getRoute(reportID),
 },
 {
 name: CONST.DEBUG.REPORT_ACTIONS,
 component: DebugReportActionsTab,
 route: ROUTES.DEBUG_REPORT_TAB_ACTIONS.getRoute(reportID),
 },
 ],
 [DebugDetailsTab, DebugJSONTab, DebugReportActionsTab, reportID],
 );

Make similar changes for the DebugReportActionPage
Also update the DebugTransactionPage and DebugTransactionViolationPage accordingly

And also add improvements to ensure that goBack buttons work correctly on the

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None, navigation bug

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nabi-ebrahimi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Debug mode tabs not working properly

What is the root cause of that problem?

useNavigation is being called outside of the StackNavigator.Navigator, so it only has access to the parent navigation context, not the nested stack's navigation context.

App/src/libs/Navigation/DebugTabNavigator.tsx

Lines 53 to 59 in 11ff1d3

	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]);

We're attempting to navigate to a nested screen using a navigation object that only has access to the parent context. Since we're passing only the route name without specifying the nested structure, it results in a navigation error.

App/src/libs/Navigation/DebugTabNavigator.tsx

Lines 100 to 103 in 11ff1d3

	const onPress = () => {
	navigation.navigate(route.name);
	setCurrentTab(route.name);
	};

What changes do you think we should make in order to solve the problem?

To navigate to a nested screen from the parent navigation context, we need to specify both the parent navigator’s name and the target screen name within it.

   const onPress = () => {
                        navigation.navigate(SCREENS.DEBUG.REPORT, {screen: route.name, reportID});
                        setCurrentTab(route.name);
                    };

To make this work, the DebugTabNavigator component should accept reportID as a prop

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[Christinadobrzyn]

not sure how to get into debug mode - https://expensify.slack.com/archives/C049HHMV9SM/p1751544564103139

[Eskalifer1]

@Christinadobrzyn Toggle debug mode in troubleshoots, then go to report details page and you will have option Debug, thats it

[Christinadobrzyn]

Thanks @Eskalifer1 I don't see debug in the Troubleshoot page, any idea why?

[thelullabyy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Clicking on tab headers does not update the displayed tab content — the UI remains static or stuck.

What is the root cause of that problem?

• Here is the current logic we use for switching tabs:
  

  App/src/libs/Navigation/DebugTabNavigator.tsx

  Lines 100 to 103 in 755b505

  	const onPress = () => {
  	navigation.navigate(route.name);
  	setCurrentTab(route.name);
  	};

• Below is a screenshot illustrating the bug:
  

• The issue arises because navigation = useNavigation() retrieves the navigation object from the parent navigator (outside DebugTabNavigator). However, we are attempting to navigate to screens within the internal stack navigator (StackNavigator.Navigator) defined inside the same DebugTabNavigator component.

• As a result, navigation.navigate(route.name) attempts to navigate using the parent navigator, which does not recognize routes such as "details" or "actions". These routes are only registered within the inner stack navigator.

Update

• After updating the react navigation to v7 - more detail, see link https://reactnavigation.org/docs/upgrading-from-6.x#changes-to-the-navigate-action:

The navigate method no longer navigates to screen in a nested child navigator

Due to these issues, we have a special API to navigate to a nested screen (navigation.navigate(ParentScreenName, { screen: ScreenName })).

What changes do you think we should make in order to solve the problem?

• We can resolve this by using the global navigation ref instead of the local navigation object:

const onPress = () => {
    navigationRef.navigate(route.name);
    setCurrentTab(route.name);
};

This approach ensures that navigation is correctly directed to the inner stack navigator.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• N/A

What alternative solutions did you explore? (Optional)

• We can update the onPress function:

                    const onPress = () => {
                        navigation.navigate(routeData.name, {...routeData?.params, screen: route.name});
                        setCurrentTab(route.name);
                    };

    const routeData = useRoute();

[FitseTLT]

@staszekscp Is this related to the react navigation bump here it used to work perfect ?

[melvin-bot]

@Christinadobrzyn Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!