HOME
|
COMMUNITY
|
BLOG
|
Announcing React Native Tab View 2.0

Announcing React Native Tab View 2.0

In short

The popular react-native-tab-view library, commonly used in React Native projects for animated tab views, has received a significant upgrade to version 2.0. Several breaking changes and new customization features have been introduced. Read the article to find out what has changed.

What's been updated?

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 <rte-code>ScrollView<rte-code> on iOS and <rte-code>ViewPagerAndroid<rte-code> 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, <rte-code>ScrollView<rte-code> 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.

scrollable tap bar in React Native Tab View 2.0

Due to the use of <rte-code>reanimated<rte-code> as opposed to React Native’s <rte-code>Animated<rte-code>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 <rte-code>renderPager<rte-code> prop is removed in favor of a single cross-platform pager.
  • The <rte-code>animationEnabled<rte-code> prop is removed as it doesn’t make much sense in the scope of this library.
  • The <rte-code>canJumpToTab<rte-code> prop is removed as it’s not straightforward to implement with decent UX.
  • The <rte-code>onAnimationEnd<rte-code> prop has been removed (if you need it, PR welcome to add it back).
  • The <rte-code>position<rte-code> prop received by the various renderX callbacks are now reanimated nodes.
  • The <rte-code>renderScene<rte-code> prop doesn’t receive <rte-code>navigationState<rte-code> anymore as screens rendered in <rte-code>renderScene<rte-code> should not rely on the navigation state for performance. You can still pass the navigation state explicitly.
  • <rte-code>react-native-web<rte-code> support is dropped because reanimated doesn’t support it.

New Features

  • New <rte-code>activeColor<rte-code> and <rte-code>inactiveColor<rte-code> to customize the label and icon colors.
  • Add <rte-code>contentContainerStyle<rte-code> prop to TabBar.
  • Add <rte-code>lazy<rte-code> 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.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.