4

I'm trying to make a complex app where there are 5 pages (Bottom Tab Navigator) and multiple screens (Native Stack Navigator). The multiple screens are supposed to open in the 5 pages. I wish to use the same screen names in the 5 pages and multiple screens for consistency purposes and I have the requirement of having cycles of these screens being opened. I'm getting lots of warnings regarding cycling nested screens and screens with the same names such as:

  • Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

  • Screens with same name warning:

    Found screens with the same name nested inside one another. Check:
Home -> PROVIDER_PAGE -> PRODUCT_PAGE -> PROVIDER_PAGE -> PRODUCT_PAGE
This can cause confusing behavior during navigation. Consider using unique names for each screen instead.

How can I achieve this in the clean way and ignore these warnings?

Sample Project Link

aman
  • 307
  • 21
  • 48
  • Seems like You are importing something from "file A" into "file B", then importing something again from "file B" into "file A" – Aman Deep Apr 19 '23 at 06:28
  • Yes, I need to achieve this. How can I do it in a clean way? This behaviour can be found in other apps such as Instagram. – aman Apr 19 '23 at 12:57
  • 1
    could you please create a Minimal example .? would be easier to resolve. – Aman Deep Apr 19 '23 at 13:54
  • I believe your question may be a duplicate of: https://stackoverflow.com/questions/47050850/react-navigation-go-to-same-route-with-different-params – Slbox Apr 20 '23 at 20:54
  • @AmanDeep, I have created and provided the link in the question of my sample Snack on Expo. – aman May 01 '23 at 12:56

1 Answers1

1

You can have your Tab and Stack navigators structure like this to achieve your requirement,

  • Tab Navigator
    • Home Stack
      1. Home Screen
      2. Product screen
      3. Provider Screen
    • Explore Stack
      1. Explore Screen
      2. Product Screen
      3. Provider Screen

I have added this change in Home Tab Navigator of your snack, you may check it here.

Mainly I have removed the Stack Navigator from each Product and Provider screen, and
added a title parameter in navigation.push .

Rohit S K
  • 1,178
  • 3
  • 13
  • Thanks for the help but how can I check which instance of Screen is currently open? Or how can I detect when the screen becomes active again after the pushed screen gets closed? I have some logic that requires this information. – aman Jun 05 '23 at 10:50
  • 1
    You can use [useFocusEffect](https://reactnavigation.org/docs/use-focus-effect/) or other navigation events for that. – Rohit S K Jun 05 '23 at 13:18