Allow cycle and same screen names with nested stack navigator

Question

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

Answer 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 .