react-navigation / react-navigation/react-navigation
Screens with useLinkProps (using object) only work once within nested navigator (stack within bottom-tabs)
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
I have a Stack.Navigator (native-stack but also tried using just stack) nested inside a Tab.Navigator.
Links actions (onPress), generated using useLinkProps (using object), only seems to work once.
This is in circumstances when you return to the previous screen with no re-render invoked (e.g. tab bar button or via back gesture)
Using a string path however, it works consistently
Example, this works repeatedly
const linkProps = useLinkProps({ to: '/b' });
This only works once
const linkProps = useLinkProps({
to: {
screen: 'StackNavigator',
params: { screen: 'ScreenB' }
}
});
Reproduction steps in repo snack:
- Use first button to navigate to Screen B (via screen props)
- Return to Screen A either via button in tab bar (or back gesture)
- Use same button to try to get to Screen B again, observe no navigation occurs
Video: https://user-images.githubusercontent.com/933275/190622422-0a187445-f276-41f7-9ce7-1bde3e130b0e.mov
I see a workaround where I switch exclusively to passing paths around, but this current behaviour seems like it might be a bug
Expected behavior
Expect navigation to occur when returning to previous screen and triggering the same action again
Reproduction
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 6.0.12 |
| @react-navigation/bottom-tabs | 6.3.3 |
| @react-navigation/native-stack | 6.8.0 |
| react-native-safe-area-context | 4.3.1 |
| react-native-screens | ~3.15.0 |
| react-native | 0.69.5 |
| expo | ~46.0.0 |
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 Snack reproduction and the useLinkProps entry point, comparing object-based navigation with the working string-path case. Reproduce the sequence of navigating to Screen B, returning to Screen A, and triggering the same action again; done means repeated object-based navigation works on iOS and web.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100