[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]

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 callstack/react-native-pager-view#304 (comment)

[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. #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