I’ve been using react-router-native a lot for navigation in my React Native projects, I highly recommend it. I’ve used other navigation options before including React Navigation but I didn’t really like any of them…Especially React Navigation because it is somewhat complicated to implement with Redux and still has some other issues. The other day I encountered a situation where I wanted to go back two screens in my navigation stack and I wasn’t sure how to do it.
Typically if you want to go back one screen you would use your history prop’s goBack method. Here’s an example:
This is intuitive but it only goes back one screen in the stack. It might be possible to use goBack twice but that felt kind of awkward to me so I decided to look for another solution.
After reading the documentation more thoroughly I realized there’s actually another history function called go. The example below is the equivalent of goBack:
So if you wanted to navigate two screens backwards you would use it like this:
You can replace this with any number and go backwards as far as you want.
A quick word on navigation
I recommend react-router-native because it has a very simple approach to navigation, everything is Component based and it works just like it would in ReactJS. I don’t think React Navigation is horrible, I just feel like it’s a little bit convoluted. I don’t think most projects require that kind of complexity, but there might be some good use cases for it. Either way, if you haven’t tried out react-router-native yet you should definitely check it out and make a decision for yourself. It’s kind of sad to think there still isn’t any clear best practice regarding navigation in React Native yet.