react-navigation icon indicating copy to clipboard operation
react-navigation copied to clipboard

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

Open 4lun opened this issue 3 years ago • 0 comments

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
  • [X] iOS
  • [X] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [X] @react-navigation/​bottom-tabs
  • [ ] @react-navigation/​drawer
  • [ ] @react-navigation/​material-bottom-tabs
  • [ ] @react-navigation/​material-top-tabs
  • [ ] @react-navigation/​stack
  • [X] @react-navigation/​native-stack

Environment

  • [x] 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

4lun avatar Sep 16 '22 11:09 4lun