React-native-tab-view: [question][v3] Transition duration

[Bardiamist]

How to remove transition duration in v3?

Previously it was:

timingConfig={{
  duration: 0.00000001,
}};

| software | version
| ---------------------------- | -------
| react-native | 0.63.4
| react-native-tab-view | 3.0.0
| react-native-pager-view | 5.0.12

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-tab-view
• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[Bardiamist]

In react-native-viewpager it is possible if use setPageWithoutAnimation instead setPage https://github.com/callstack/react-native-viewpager/issues/304#issuecomment-793506667

[efstathiosntonas]

@Bardiamist did you find a solution?

[Bardiamist]

@efstathiosntonas Looks no solution because @satya164 using only setPage here. So it is regression and we can only to request the feature to use setPageWithoutAnimation optionaly.

[efstathiosntonas]

I've created a patch to not use animation for the time being using patch-package ,tested on both Android and iOS and it works fine:

diff --git a/node_modules/react-native-tab-view/lib/commonjs/Pager.native.js b/node_modules/react-native-tab-view/lib/commonjs/Pager.native.js
index 0934bbc..7f4e0f4 100644
--- a/node_modules/react-native-tab-view/lib/commonjs/Pager.native.js
+++ b/node_modules/react-native-tab-view/lib/commonjs/Pager.native.js
@@ -50,7 +50,7 @@ function Pager({
     var _pagerRef$current;

     const index = navigationStateRef.current.routes.findIndex(route => route.key === key);
-    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
+    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPageWithoutAnimation(index);
   }, []);
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -60,7 +60,7 @@ function Pager({
     if (indexRef.current !== index) {
       var _pagerRef$current2;

-      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPage(index);
+      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);

diff --git a/node_modules/react-native-tab-view/lib/module/Pager.native.js b/node_modules/react-native-tab-view/lib/module/Pager.native.js
index 518d2eb..23445be 100644
--- a/node_modules/react-native-tab-view/lib/module/Pager.native.js
+++ b/node_modules/react-native-tab-view/lib/module/Pager.native.js
@@ -32,7 +32,7 @@ export default function Pager({
     var _pagerRef$current;

     const index = navigationStateRef.current.routes.findIndex(route => route.key === key);
-    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
+    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPageWithoutAnimation(index);
   }, []);
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -42,7 +42,7 @@ export default function Pager({
     if (indexRef.current !== index) {
       var _pagerRef$current2;

-      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPage(index);
+      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);

[satya164]

What's the use case for removing animation? Like why would you use a package whose main purpose is to provide gesture and animations and then disable them?

[efstathiosntonas]

@satya164 in my case it's just a UX issue, my app is for a niche community and the animations are reduced to minimum app wide.

[Bardiamist]

@satya164 I'm using react-navigation. I need top tabs. Designer and customer wants to switch between tabs immediantly for consistent with @react-navigation/bottom-tabs.

[satya164]

@efstathiosntonas but why not just use a simple implementation instead of a library that needs native dependencies, it's just a row of buttons at the top.

[satya164]

@Bardiamist that's not really the platform UX. imo it's better just to use bottom tabs for such cases. I have never seen an app with tabs at top but without animations or gestures.

[Bardiamist]

@satya164 We using @react-navigation/bottom-tabs and some inner screens also using @react-navigation/material-top-tabs (because we need top tabs and react-navigation don't provides another top tabs). And for consistent we want to disable animation. It was possible when we started to use that. https://github.com/satya164/react-native-tab-view/issues/707 So please return back that ability.

[satya164]

@Bardiamist that was never properly supported. react navigation's goal is to be consistent with the platform UX. if you want non-standard UX I'd suggest it's best to build a custom navigator, you'd also reduce your app's size since you won't include stuff you don't actually use.

[Bardiamist]

Scrolling tabs looks not consistent on iOS. So that is reason.

[satya164]

@Bardiamist normally iOS also uses a different kind of tabs for such case, called SegmentedControl

[Bardiamist]

Exactly. SegmentedControl isn't scrollable.

I'm using most of stuff available in the @react-navigation/material-top-tabs (lazyLoading, navigate to inner screen). So just need to disable animation. And I'm not the only person who wants this https://github.com/satya164/react-native-tab-view/issues/707#issuecomment-481258674

[satya164]

Exactly. SegmentedControl isn't scrollable.

But it's also a completely different UI. It makes more sense to have a different component for that than changing viewpager to do it.

And I'm not the only person who wants this

I don't want to maintain a feature that very few people use and goes against platform guidelines. I don't have a lot of time and I'll need to test that works properly every release. If it's useful for people, you can request for new features on canny: https://react-navigation.canny.io/feature-requests which lets us see how important a feature is so we can prioritize.

Additionally consider convincing your company to sponsor React Navigation so that we can spend more time maintaining features which are useful to your product: https://github.com/sponsors/react-navigation

[Bardiamist]

Feature request here:
https://react-navigation.canny.io/feature-requests/p/allow-to-disable-animation-for-tabnavigator