[HOLD for payment 2024-04-05] [$500] Storybook - "Couldn't find a navigation object" error when trying to select a year

[lanitochka17]

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: 1.4.52.0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #37820

Action Performed:

1. Navigate to https://staging.new.expensify.com/docs/index.html
2. Click on the "Form" component
3. Click on the year selector
4. Navigate to https://staging.new.expensify.com/docs/index.html
5. Click on the "Form" component
6. Click on the state selector

Expected Result:

I should be able to select a year and state

Actual Result:

"Couldn't find a navigation object. Is your component inside NavigationContainer?" error when trying to select a year or state.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6413512_1710421119535.bandicam_2024-03-14_13-58-02-469.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a13cfaecad01b349
• Upwork Job ID: 1769863435571646464
• Last Price Increase: 2024-03-18
• Automatic offers:
• dukenv0307 | Reviewer | 0
• tienifr | Contributor | 0

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[Krishna2323]

Proposal

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

Storybook - "Couldn't find a navigation object" error when trying to select a year

What is the root cause of that problem?

We need to wrap StatePicker & DatePicker with navigation with withNavigationFallback since they use ScreenWrapper & HeaderWithBackButton which uses useWaitForNavigation.

App/src/stories/Form.stories.tsx

Lines 53 to 54 in d4eaf4e

	StatePicker,
	DatePicker,

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

Wrap StatePicker & DatePicker with withNavigationFallback.

There might be more components which uses navigation and is used in storrybook, we might want to check for that as well.

Result

storybook_fix.mp4

Alternative

Wrap StatePicker.tsx & DatePicker.tsx with withNavigationFallback and then export.
Or Wrap ScreenWrapper.tsx & HeaderWithBackButton.tsx with withNavigationFallback and then export.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a13cfaecad01b349

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dukenv0307 (External)