react-navigation / react-navigation/react-navigation

Screens with useLinkProps (using object) only work once within nested navigator (stack within bottom-tabs)

Open
#10,847 7 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug platform:ios platform:web repro provided
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:

  1. Use first button to navigate to Screen B (via screen props)
  2. Return to Screen A either via button in tab bar (or back gesture)
  3. 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

https://snack.expo.dev/@4lun/react-navigation---issue---uselinkprops-only-works-once-with-screen-props

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.