How can i make breadcrumbs/show screens path in react native (I am using react navigation v5)

Question

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

Answer 1

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/