Release 2.0.1

This version includes a rewrite of the pager using react-native-gesture-handler and react-native-reanimated as opposed to the platform specific implementations in the previous version. This addresses a many platform specific bugs and performance problems.

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.

Upgrade instructions

Installation

Open a Terminal in the project root and run:

yarn add react-native-tab-view@^2.0.1

If you are using Expo, you are done. Otherwise, continue to the next step.

Install and link react-native-gesture-handler and react-native-reanimated. To install and link them, run:

yarn add react-native-reanimated react-native-gesture-handler
react-native link react-native-reanimated
react-native link react-native-gesture-handler

Finish configuring react-native-gesture-handler following the instructions in this guide.

Updating your code

Since we now use react-native-reanimated, you have to update the code using Animated from react-native to use react-native-reanimated instead. This should only be necessary if you are using custom tab bar, indicator, icons etc.

Change the import statement:

- import { Animated } from 'react-native';
+ import Animated from 'react-native-reanimated';

If you're using interpolations:

- position.interpolate({
+ Animated.interpolate(position, {
    inputRange: [...],
    outputRange: [...],
  });

For more advanced usage, please refer to react-native-reanimated's documentation.

The renderPager prop is removed, move any props from the pager component to TabView and remove any useNativeDriver prop:

- _renderPager = props => (
-   <PagerScroll
-     {...props}
-     onSwipeStart={this._handleSwipeStart}
-     keyboardDismissMode="on-drag"
-   />
- );

  render() {
    return (
      <TabView
        navigationState={this.state}
+       onSwipeStart={this._handleSwipeStart}
+       keyboardDismissMode="on-drag"
-       renderPager={this._renderPager}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
-       useNativeDriver
      />
    );
  }

Changelog

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 various renderX callbacks are now reanimated nodes.
• The renderScene prop doesn't receive navigationState anymore as screens rendered in renderScene should not rely on the navigation state for better performance. You can still pass the navigation state explicitly. Usually navigationState={this.state} should be enough.
• react-native-web support is dropped because reanimated doesn't support it.

New Features

• Add activeColor and inactiveColor to customize the label and icon colors (18cc82a)
• Add contentContainerStyle prop to TabBar (#687) (e2b3af9)
• Add lazy prop to defer rendering unfocused scenes (a31c3e5)