React Navigation began with JavaScript animations to support fast iteration, but demanding app tasks could block them and cause choppy motion. The team wanted smoother animations with fewer dropped frames.
Changes in React Navigation 5
An unnamed Callstack speaker talks about React Navigation 5’s animation and native-navigation changes with host Mike.
The team reworked the architecture so animations use React Native’s native driver. It also adopted Gesture Handler and Reanimated; the Drawer Navigator uses Reanimated to reduce lag during swipes.
React Navigation 5 introduced Native Stack, built with React Native Screens and designed to provide a fully native stack experience through the React Navigation API. It offers less customization than the JavaScript stack.
Material Top Tabs moved to the native ViewPager library for swipeable tabs on Android and iOS. The speaker recommends native navigators for performance-critical apps and the JavaScript stack when customization matters and screens are not especially demanding.
The speaker says the hybrid approach brings together React Navigation’s JavaScript API and native-style animations. It also ends long efforts to reproduce Apple animation curves in JavaScript.
Takeaways
- Use native-driven animations when heavy app work could interrupt JavaScript animations.
- Consider Gesture Handler and Reanimated for smoother swipe interactions.
- Choose Native Stack when native behavior and performance matter more than deep customization.
- Use the JavaScript stack when its extra customization suits the app’s performance needs.
Mentioned in this talk
Search inside this talk
What was claimed 10
- builtdrawer navigation built Reanimated
“Our Drawer Navigator is built with Reanimated.”
YouTube Unverified1 source· Talk
- uses
“Another thing we did was incorporate Gesture Handler and Reanimated.”
YouTube Verified2 sources· Talk
- uses
“We re-architected things to make sure every animation used the native driver.”
YouTube Unverified1 source· Talk
- uses
“Another thing we did was incorporate Gesture Handler and Reanimated.”
YouTube Verified3 sources· Talk
- featureReact Navigation: Less customization than the JavaScript stack
“It has a bit less customization than the JavaScript stack.”
YouTube Unverified1 source· Talk
- featureReact Navigation: Fully native stack navigation experience
“There's a new Native Stack Navigator, which is a fully native stack navigation experience.”
YouTube Unverified1 source· Talk
- built
“Native Stack is built with React Native Screens.”
YouTube Unverified1 source· Talk
- featureReact Navigation: React Navigation 5 offers a mix of JavaScript and native navigators
“We wanted a hybrid approach: for some navigators, JavaScript makes sense, but we should also have native options.”
YouTube Unverified1 source· Talk
- featureMaterial Top Tabs: Swipeable tab experience on Android and iOS
“Material Top Tabs, which provides a swipeable tab experience on Android and iOS.”
YouTube Unverified1 source· Talk
- uses
“We migrated it to use the ViewPager library.”
YouTube Unverified1 source· Talk
