Current behavior

On Android,

Trigger steps

  1. Switch to tab2
  2. Click the trigger button to trigger re-render of the screen of both tab1 and tab2 via navigationKey

Current behaviour

  1. The screen of tab1 will be shown
  2. The top tab of tab2 still marked as the selected tab

android navigation key problem

Expected behavior

The behaviour on iOS is expected,

Trigger steps

Same as the steps in Current behavior

Expected behaviour

  1. Both the screens of tab1 and tab2 are updated
  2. Keep display screen of tab2
  3. Keep tab2 marked as the selected tab

ios navigation key problem

Reproduction

https://github.com/CKS1998/NativeKeyProblemDemo

Platform

  • [X] Android
  • [ ] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-bottom-tabs
  • [X] @react-navigation/material-top-tabs
  • [ ] @react-navigation/stack
  • [ ] @react-navigation/native-stack
  • [X] react-native-tab-view
  • [ ] flipper-plugin-react-navigation

Environment

  • [x] I've removed the packages that I don't use

| package | version | | -------------------------------------- | ------- | | @react-navigation/native |6.1.2 | @react-navigation/material-top-tabs |6.5.2 | react-native-tab-view |3.3.4 | react-native-pager-view |6.1.2 | react-native |0.68.2 | npm |8.19.2

0
hacktoberfest react react-native navigation react-navigation

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • @react-navigation/native (found: 6.1.1, latest: 6.1.2)
  • @react-navigation/material-top-tabs (found: 6.5.1, latest: 6.5.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

0

Yes, the problem still exists for

| package | version | | -------------------------------------- | ------- | | @react-navigation/native |6.1.2 | @react-navigation/material-top-tabs |6.5.2

0

Hey @CKS1998,

Just checked your reproduction code, please avoid creating components inside another components. This is what causes bug in this situation.

So please move the Tab1Content and Tab2Content outside of App function scope and let me know if that fixes the issue.

0

Hi @okwasniewski ,

Thanks for your reply, I moved the Tab1Content and Tab2Content to another file and pass the button press count via initialParams. However, the problem still exists.

The reproduction code is updated. Thanks for your help.

0

Hey, @CKS1998

It seems like the issue is on the underlying native component on android (coming from react-native-pager-view). So could you please create an issue in pager-view repository so the team can take a look at it?

Also if you want to solve the issue, you can create a context which would pass the state down the component tree. Or you could try this: https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props

Let me know if this fixes your issue 😄

0
© 2022 pullanswer.com - All rights reserved.
Privacy policy