react-navigation / react-navigation/react-navigation
(native-tab-navigator/experimental) - weird/unwanted bottom navigator animation on back when using deeplinks
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
Repository provided.
I have a Root Stack navigator that contains:
- a Tab navigator (3 tabs), and
- a Details screen at the same stack level.
When I navigate manually from Tab 3 to Details, everything works as expected.
Pressing back returns to Tab 3 with normal animation for the screen (so no specific animation for the tab navigator itself).
https://github.com/user-attachments/assets/35fdbb3b-af8d-413d-88fe-a8ba54269be1
However, when I open Details via deep link, pressing back (which should return to Tab 3) shows an unexpected/weird back animation.
https://github.com/user-attachments/assets/64458b81-0250-4697-8e99-357726093e42
Use command
adb shell am start -W -a android.intent.action.VIEW -d "buggednav://tab3/details" com.buggednav
Notice the weird/unwanted animation on the tab navigator.
This doesn't happen with the JS/non-native tab navigator in my tests.
Expected: same back behavior/animation as manual navigation (Tab 3 -> Details -> back to Tab 3).
Actual: back transition animation is visually incorrect only in the deep-link flow.
Expected behavior
No weird animation should appear, basically it should behave like we'd just go normally back from details to 3rd tab.
Reproduction
https://github.com/spasmodiumspam-web/react-navigation-native-tabs-deeplink-reset-repro
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-drawer-layout
- react-native-tab-view
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 7.1.33 |
| @react-navigation/bottom-tabs | 7.15.5 |
| @react-navigation/native-stack | 7.14.4 |
| react-native-screens | 4.24.0 |
| react-native-safe-area-context | 5.7.0 |
| react-native-gesture-handler | 2.30.0 |
| react-native | 0.84.1 |
| node | >= 22.11.0 (project engine) |
| npm or yarn | npm |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and run the provided Android adb deep-link command for tab3/details. Compare the deep-link back transition with manual Tab 3 to Details navigation and the JS tab navigator; done means the native tab navigator returns to Tab 3 without the unwanted animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100