react-navigation is the most popular navigation library for React Native. It is easy to use and provides a lot of features out of the box. It is also highly customizable and extensible. It is a great choice for most apps nowadays, while waiting for Expo Router to become stable and ready for production. It looks promising! 🔥
Probably nothing we can add here that doesn’t exist in the official docs except that we are using native stack navigation instead of the default one.
All the navigation-related code is located in the src/navigation folder. We opted for this approach to keep the project structure clean and easy to navigate.
One last thing to mention is that we added a global declaration for the ReactNavigation namespace to add TypeScript support to the navigate function from the useNavigation hook.
Once you add a new stack navigator, you need to include it in the RootStackParamList type, as mentioned in the snippet above.
The Demo app comes with a simple stack and tabs navigator. Feel free to remove what is not working for you and add your own using the same approach as the existing ones. Also, remember to add the typing to the RootStackParamList type.
Here is a simple example of the feed stack navigator.
Make sure to check the official docs for more information and examples about react-navigation.