3

I want to show the path of the screen/breadcrumbs as I navigate into my nested stack navigator, I am using react-navigation v5.

Abhishek
  • 281
  • 4
  • 16

1 Answers1

2

You can do this by creating a custom component for the headerLeft option on each screen https://reactnavigation.org/docs/stack-navigator/#headerleft

The custom component would have a horizontal list of buttons. You can hook up the buttons to react navigation using the useNavigation hook https://reactnavigation.org/docs/use-navigation/

You can show and hide the buttons depending on which screen you are on. The useNavigationState hook can be used to figure out what the current screen is https://reactnavigation.org/docs/use-navigation-state/

Jack Vial
  • 2,354
  • 1
  • 28
  • 30
  • I didn;t understood the part of showing and hiding the button by getting the current state can you please give an example. – Abhishek Aug 02 '20 at 20:15
  • 1
    If your stack of screens looks like the following A -> B -> C -> D and you are on screen C then you would only want to show active links for A and B, a disabled link for C and nothing for D. When you are on screen D you would want to show active links for A, B and C with disabled link for D. For this you need to know when you are on each screen. You can use the useNavigationState hook to know which screen is currently active. – Jack Vial Aug 02 '20 at 20:19
  • ok, then I have to check on each custom component that which screen I am and only show links less then or equal to the current screen, am I right? – Abhishek Aug 02 '20 at 20:22
  • 1
    That right but you would only need one custom component but you can use the same component on all the screen in the stack. – Jack Vial Aug 02 '20 at 20:24
  • 1
    Yes, I will try these steps and will let you know, if some help needed cause I am beginner :( .. Thank you soo much :) – Abhishek Aug 02 '20 at 20:27