[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

[cglacet]

For what it's worth, disabling the animation is important for the web version, otherwise it looks very odd (rather unusual than odd).

[Bardiamist]

@satya164 Only problems from your animation https://github.com/callstack/react-native-pager-view/issues/458#issuecomment-938898558

[claudesortwell]

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]);
 

Seems like this does not work anymore, no matter what I try cant seem to disable the animation. Even tried changing everything from setPage to setPageWithoutAnimation.

[Bardiamist]

Seems like this does not work anymore, no matter what I try cant seem to disable the animation. Even tried changing everything from setPage to setPageWithoutAnimation.

Still work for me:

react-native-tab-view+3.1.1.patch

diff --git a/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js b/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
index c4ee5c8..19fa6b0 100644
--- a/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
+++ b/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
@@ -50,7 +50,7 @@ function PagerViewAdapter({
     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 PagerViewAdapter({
     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/PagerViewAdapter.js b/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
index 726b9f5..27eca60 100644
--- a/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
+++ b/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
@@ -32,7 +32,7 @@ export default function PagerViewAdapter({
     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 PagerViewAdapter({
     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/src/PagerViewAdapter.tsx b/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
index b858cb4..f715f5c 100644
--- a/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
+++ b/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
@@ -63,7 +63,7 @@ export default function PagerViewAdapter<T extends Route>({
       (route: { key: string }) => route.key === key
     );
 
-    pagerRef.current?.setPage(index);
+    pagerRef.current?.setPageWithoutAnimation(index);
   }, []);
 
   React.useEffect(() => {
@@ -72,7 +72,7 @@ export default function PagerViewAdapter<T extends Route>({
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      pagerRef.current?.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);
 

[claudesortwell]

@Bardiamist It must be that im using this with react-navigation but that exact react-patch does not disable page navigation for me (only testing using react-native-web).

[efstathiosntonas]

@claudesortwell I think you should use yarn or npm resolutions on your package.json so react navigation will pick/respect the patched version.

[Bardiamist]

animationEnabled prop was added in [email protected] https://github.com/satya164/react-native-tab-view/pull/1388 Thanks @szymonrybczak