We use a navigation library to handle screen-to-screen transitions (i.e. routing) within our app.
React Native originally included a built-in navigation API, but it was eventually removed, in favor of a semi-official library called
There are a few aspects of navigation which make it challenging in React Native:
- Native navigation APIs don't correspond with "views". React Native components like
- Navigation on mobile is stateful. On the web, navigation is typically stateless, where a url (i.e. route) takes a user to a single screen/page. On mobile, the history of the user's navigation state is persisted in the application so that the user can go back to previous screens - a stack of screens can even include the same screen multiple times.
Due to these challenges, there isn't a single best way to implement navigation, so it was removed from the core React Native package.
react-navigation is the most popular navigation library. It handles most of the challenges described above nicely, and is sufficiently configurable for most apps. In the next sections, we'll walk through the APIs needed to add React Navigation to an app.
When adding React Native to an existing native app, it may be worth considering react-native-navigation
Want to learn React Native in-depth?