React Navigation manages app screens and provides navigation UI such as tabs, drawers, and stack transitions. Unlike React Router, which the speakers describe as providing logic, React Navigation includes both logic and UI, with patterns suited to iOS and Android.
What is React Navigation library?
Speakers
Satya, a React Navigation contributor, joins Callstack’s host and audience to explain the library’s purpose, history, and rise in the React Native community.
The earlier choices were Navigator, a cross-platform JavaScript implementation, and NavigatorIOS, a native option limited to iOS. Satya says Navigator’s animations could not use the native driver and that it was difficult to customize. NavigationExperimental offered more flexible animation building blocks, but developers had to supply much of the navigation logic themselves.
Expo’s ExNavigation built on NavigationExperimental and added a friendlier API, along with stack, tab, and drawer patterns. Developers from Expo, Facebook, and the community later created React Navigation with a new API designed to be simpler while offering substantial functionality.
Satya credits tutorial-focused documentation with helping beginners learn how to use the library, rather than leaving them with only an API reference. He also says the JavaScript implementation let maintainers add features and fix bugs quickly. An audience member recommends its component-based syntax and built-in navigators to people new to React Native.
Takeaways
- Choose a navigation library that provides the screen logic and interface patterns your app needs.
- Tutorials can help new users assemble a working solution more quickly than an API reference alone.
- A JavaScript implementation can make iteration and bug fixes faster, according to Satya.
- Built-in stack, tab, and drawer navigators cover common early app needs.
- When evaluating libraries, consider platform support, animation performance, customization, and maintenance.
Mentioned in this talk
Search inside this talk
What was claimed 21
- featureReact Navigation: Manages app screens and provides navigation logic, UI, animations, tab bars, and drawers.
“built-in elements for all of those things”
YouTube Unverified1 source· Talk
- featureReact Navigation: Implements native navigation patterns, including drawers, tabs, and stack transitions.
“It implements native patterns”
YouTube Unverified1 source· Talk
- featureNavigatorIOS: Native navigation implementation available only on iOS.
“a native implementation but only worked with iOS”
YouTube Unverified1 source· Talk
- feature
Navigator: Pure JavaScript and cross-platform, but not very customizable and unable to use the native driver for animations.“Navigator provided a JavaScript implementation and was cross-platform”
YouTube Unverified1 source· Talk
- featureNavigationExperimental: Low-level navigation building blocks and animations, without screen-management logic.
“it only provided animations, without any logic for how to manage those screens”
YouTube Unverified1 source· Talk
- previously atErik Vicenti previously at
Meta“who was working at Facebook back then”
YouTube Unverified1 source· Talk
- built
“Erik Vicenti ... came up with a new idea. He built something called NavigationExperimental.”
YouTube Unverified1 source· Talk
- built
“ExNavigation was built on top of NavigationExperimental”
YouTube Verified2 sources· Talk
- role atBrent Vatne is maintainer at ExNavigation
“also maintained by Brent Vatne”
YouTube Unverified1 source· Talk
- builtAdam Miskiv built ExNavigation
“It was built by Adam Miskiv”
YouTube Unverified1 source· Talk
- featureWix native navigation library: Described as the most popular native navigation library at the time.
“the most popular native navigation library at the time”
YouTube Unverified1 source· Talk
- built
“another native navigation library from Wix”
YouTube Unverified1 source· Talk
- featureAirbnb native navigation library: No longer maintained at the time discussed.
“which is no longer maintained”
YouTube Unverified1 source· Talk
- built
“the native navigation library from Airbnb”
YouTube Unverified1 source· Talk
- launchedMeta launched React Navigation
“Developers from Expo, Facebook, and the community came together to start a new navigation library called React Navigation”
YouTube Unverified1 source· Talk
- launchedExpo launched React Navigation
“Developers from Expo, Facebook, and the community came together to start a new navigation library called React Navigation”
YouTube Unverified1 source· Talk
- featureReact Navigation: Became the most popular navigation library in the community.
“has become the most popular navigation library in the community”
YouTube Unverified1 source· Talk
- featureReact Navigation: A simple API with extensive functionality.
“a completely new API that was simple and easy to use, with a lot of functionality”
YouTube Unverified1 source· Talk
- built
“It was also built on Navigation Experimental”
YouTube Verified2 sources· Talk
- featureReact Navigation: Popularity was attributed in part to tutorial-focused documentation.
“we focused a lot on improving the documentation”
YouTube Unverified1 source· Talk
- featureReact Navigation: JavaScript implementation enabled faster iteration, feature additions, and bug fixes than a fully native implementation.
“since it was built with JavaScript, we were able to iterate very quickly”
YouTube Unverified1 source· Talk
