Skip to content
This repository has been archived by the owner on Nov 27, 2022. It is now read-only.

Release 3.0.0

Compare
Choose a tag to compare
@satya164 satya164 released this 09 Mar 02:42
· 44 commits to main since this release

3.0.0 (2021-03-09)

This version includes a rewrite of the pager using react-native-pager-view on Android & iOS and PanResponder on Web.

It's a similar approach to the 1.x version, where we had ViewPager based implementation on Android and ScrollView based implementation on iOS. However, back then ViewPager had many known bugs and wasn't well-maintained, and ScrollView required a lot of hacky code to implement what we needed. So we migrated to a custom implementation instead.

Things have changed a lot since then. ViewPager is now extracted out and is well-maintained by troZee. It now also supports iOS, so we don't need a different implementation for iOS.

Due to the removal of react-native-gesture-handler and react-native-reanimated, this release is not backward compatible. However, the API is mostly unchanged. If you're not using any features related to Reanimated or GestureHandler, Upgrading will require no changes apart from installing the new peer dependency.

Upgrade instructions

Installation

Open a Terminal in the project root and run:

yarn add react-native-tab-view

Now we need to install react-native-pager-view.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-pager-view

If you are not using Expo, run the following:

yarn add react-native-pager-view

We're done! Now you can build and run the app on your device/simulator.

Updating your code

Since we don't use react-native-reanimated, you have to update the code to use Animated from react-native. This is only necessary if you are using a custom tab bar, indicator, animation related code etc.

Change the import statement:

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

If you're using interpolations:

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

For more advanced usage, please refer to Animated's documentation.

Note that Animated API doesn't support animating colors, layout properties etc. with native driver, so you might have to rework your logic if you need to animate those.

BREAKING CHANGES

The following props have been removed as they were specific to our custom implementation:

  • renderPager
  • swipeVelocityImpact
  • timingConfig
  • springConfig
  • springVelocityScale
  • position
  • removeClippedSubviews
  • gestureHandlerProps