Announcing React Native Tab View 2.0
If you are using React Native and needed an animated tab view at some point, you have probably seen the react-native-tab-view library. It’s also used in React Navigation’s material tabs.
In earlier versions, the library used ScrollView
on iOS and ViewPagerAndroid
on Android to provide smooth animations and gestures. While this provided a close to native experience, there were too many differences between the implementations between 2 platforms which made things inconsistent and hard to maintain. In addition, ScrollView
was difficult to work with.
This new 2.0 version includes a rewrite of the pager using react-native-gesture-handler and react-native-reanimated. This addresses many platform specific bugs and performance problems and makes the library easier to maintain.
Due to the use of reanimated
as opposed to React Native’s Animated
API, this release is not backward compatible. However, I have tried my best to keep the API mostly unchanged for an easier upgrade path. If you’ve been using the components provided by the library, the migration will require minimal changes.
Breaking changes
- The
renderPager
prop is removed in favor of a single cross-platform pager. - The
animationEnabled
prop is removed as it doesn’t make much sense in the scope of this library. - The
canJumpToTab
prop is removed as it’s not straightforward to implement with decent UX. - The
onAnimationEnd
prop has been removed (if you need it, PR welcome to add it back). - The
position
prop received by the variousrenderX
callbacks are now reanimated nodes. - The
renderScene
prop doesn’t receivenavigationState
anymore as screens rendered inrenderScene
should not rely on the navigation state for performance. You can still pass the navigation state explicitly. react-native-web
support is dropped because reanimated doesn’t support it.
New Features
- New
activeColor
andinactiveColor
to customize the label and icon colors. - Add
contentContainerStyle
prop to TabBar. - Add
lazy
prop to defer rendering unfocused scenes.
For instructions on how to upgrade, see the release notes. If you face any issues with version, report them on our issue tracker.
This article was originally published at callstack.com on March 4, 2019.