arrow icon
REGISTER

Announcing React Native Tab View 2.0

2019-03-04
Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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.

Author:
Satyajit Sahoo
React Native and Web developer who specializes in JavaScript, TypeScript, and all things frontend related. Satya has created and maintained many open source libraries for React Native & Web such as React Navigation, React Native Paper, React Native Builder Bob, Linaria etc. Creator of React Navigation 5 and Linaria. When not coding, Satya loves cooking or playing video games.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.