Explain how to define/register routes in a way that is decoupled from the UI about react-navigation.github.io

[vonovak]

I'm afraid that what you're asking is not possible. You do need to register the routes somewhere before navigating to them. This configuration will likely involve a StackNavigator or some other navigator which will handle things like going back to previous route, header appearance and more. This is different from from eg. react-router where you can just present any component (at least I think so).

[arnoldbird]

I’m all set now. I was confused about several different things simultaneously. For one thing, I was a bit confused about the concept of a stack. It helps if I think of a stack as a section of the app, in the sense that websites are often said to have sections. React Navigation became very easy once I started using it exclusively and not trying to combine it with another library.

[arnoldbird]

The answer may be to create a custom navigator. With a minimalistic custom navigator and a custom router, I then have a place to specify components for routes, and then I can use navigation.navigate(‘someRoute’).

Now that I see that the navigator renders the screen component, rather than the navigation elements, it make sense. As the docs state, “The navigators render application screens which are just React components.”.

[arnoldbird]

Returning to this task today, I just find it a little hard to believe I need to implement a custom navigator to accomplish the very simple task I am trying to accomplish: add a button to a screen that, when tapped, transitions the user to another screen. Is there a simple way to do this in React Navigation? This does not appear to be documented.

[brentvatne]

@arnoldbird - what is a route to you aside from a binding from a name to a component, on a particular type of navigator? I think you need to define what a route is in your mind and describe a use case that is based in something that you will realistically do before we can discuss much further here