Release 1.3.3

Bug Fixes

• handle page scroll state event properly on RN 0.59 (#723) (128c4f1)

Release 2.0.3

Bug Fixes

• add a prop to remove clipped subviews (#714) (cfa18b3)

Release 2.0.2

Bug Fixes

• force the pager to stay in sync with state if update is dropped (374560f)

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)

Release 2.0.0-alpha.8

Features

• add onSwipeStart and onSwipeEnd listeners back (08b1dc2)

Release 2.0.0-alpha.7

Bug Fixes

• fix a regression disabling PureComponent optimizations (9a63903)

Release 2.0.0-alpha.6

Features

• add lazy prop to defer rendering unfocused scenes (a31c3e5)

Release 2.0.0-alpha.5

Bug Fixes

• add extra check to ensure that navigation state has changed (71fbaa7)

Release 2.0.0-alpha.4

Bug Fixes

• pass down tabStyle prop correctly. closes #689 (2af0c56)

Code Refactoring

• add a type argument for addListener (3632e22)

Features

• add contentContainerStyle to TabBar (#687) (e2b3af9)

BREAKING CHANGES

• addListener now takes 2 arguments, type and listener callback instead of just callback

Release 2.0.0-alpha.3

Code Refactoring

• Use exact types for flow (8d5c475)

BREAKING CHANGES

• Don't pass navigationState to renderScene: Screens rendered in renderScene should not rely on the navigation state for better performance. We no longer pass the prop to encourage this behaviour. You can still pass the navigation state explicitely. Usually navigationState={this.state} should be enough.